We built our entire startup on React Native and this is what we found out

We built our entire startup on #ReactNative and this is what we found out:  #developer

  • However with the Android market share being pretty high, we had to make sure our app worked on both Android and iOS.
  • We wanted the iOS app to look and feel native.That’s where React Native came into the picture.
  • Could React Native pull this off and still look native?A few months down the line, with our iOS and Android app on the respective stores, I can tell you the journey was nothing but spectacular.
  • But hey, if we could go from an iOS app to fully functional Android app in 2 days, can it really get any better?Honestly I have never written an app for iOS on objective C that didn’t crash during beta testing a few times.
  • And to my amazement, our React Native app on iOS is yet to crash even once during production run.

At Genie! we like to spend most of our time giving our users the best experience to send and receive gifts. However I only had expertise writing apps for iOS and not Android. When we first decided to…
Continue reading “We built our entire startup on React Native and this is what we found out”

JavaScript ES 2017: Learn Async/Await by Example – codeburst

  • Consider the below code:function doubleAfter2Seconds(x) { return new Promise(resolve = { setTimeout(() = { resolve(x * 2); }, 2000); });}In this code we have a function called doubleAfter2Seconds.
  • Here’s what the boilerplate code looks like:function addPromise(x){ return new Promise(resolve = { // Code goes here… // resolve() });}Awesome.
  • In this example we should be returning x + 2*a + 2*b + 2*c. Here’s the code:function addPromise(x){ return new Promise(resolve = { = { = { = { resolve(x + a + b + c); }) }) }) });}Lets walk through the code again, line by line.First, we create…
  • Here’s what that looks like:async function addAsync(x) { // code here…}Now that you’ve created an async function, we can make use of the await keyword which will pause our code until the Promise has resolved.
  • Here’s how easy that is:async function addAsync(x) { const a = await doubleAfter2Seconds(10); const b = await doubleAfter2Seconds(20); const c = await doubleAfter2Seconds(30); return x + a + b + c;}And here’s the full code:As you can see, we’re still making use of the same doubleAfter2Seconds function.

ES 2017 introduced Asynchronous functions. Async functions are essentially a cleaner way to work with asynchronous code in JavaScript. In order to understand exactly what these are, and how they work…
Continue reading “JavaScript ES 2017: Learn Async/Await by Example – codeburst”

The Very First React Native App On the AppStore / frantic.im

  • It was the first React Native app ever shipped to production.
  • It was only the beginning, the React Native team had about 6 people working on it.
  • At Facebook we often ask

    For us the answer then was to “ship a React Native app”.

  • It was very reassuring to be able to use the technology you work on and confirm that it really delivered on the promise – building a native feeling apps in 10% of the time.
  • Video demo (notice the easter egg at the end):

    The @Scale app inspired the F8 conference apps to be built with React Native for 2015, 2016 and 2017 years.

A little known story about the first React Native app that was published on the AppStore.
Continue reading “The Very First React Native App On the AppStore / frantic.im”

Effects in Redux Saga — Cheat Sheet – Sankalp Lakhina – Medium

Effects in Redux Saga — Cheat Sheet  #javascript #redux #reduxsaga #react #async #reactjs

  • Effects in Redux Saga — Cheat SheetRedux Saga — Cheat SheetRedux saga expose several methods called Effects, we are going to define several of them:Fork performs a non-blocking operation on the function passed.Take pauses until action received.Race runs effects simultaneously, then cancels them all once one finishes.Call runs a function.
  • If it returns a promise, pauses the saga until the promise is resolved.Put dispatches an action.Select Runs a selector function to get data from the statetakeLatest means we are going to execute the operations, then return only the results of the last one call.
  • If we trigger several cases, it’s going to ignore all of them except the last one.takeEvery will return results for all the calls triggered.

Redux saga expose several methods called Effects, we are going to define several of them: “Effects in Redux Saga — Cheat Sheet” is published by Sankalp Lakhina
Continue reading “Effects in Redux Saga — Cheat Sheet – Sankalp Lakhina – Medium”

Lazy Loaded React Components With Webpack 2

Lazy loaded #ReactJS components with #Webpack 2:

  • How to improve your React code-base with higher order components (HOC) and how to make parts of your single page application load on-demand with Webpack 2.
  • Because Webpack searches the code for and creates new chunks depending on the path argument.
  • We the file needs to look like this:

    Now is able to create our wrapping component (WC) and give it access to the function that will load the right import.

  • The promise will resolve to our loaded module and this should export a React component as default.
  • When default export, the real component (RC) we really want to render is stored in the state of the WC, the WC will render again, this time with the RC and pass its down to it, so the parent of WC won’t be the wiser about what happened.

Making components load on-demand with Webpack 2.
Continue reading “Lazy Loaded React Components With Webpack 2”

Introducing React Komposer 2 – Hacker Noon

Introducing React Komposer 2: Feed data into #ReactJS components by composing containers

  • I released React Komposer in January as a way to bind data to React UI components.
  • Version 1.x came with a set of utility composers which helps you to use React Komposer with popular data sources.
  • Now you can start using React Komposer 2 and let me know how it works for your app.
  • Even we are not using that prop for data loading.
  • Now with 2.x you could ask React Komposer to watch only a set of props you want.

I released React Komposer in January as a way to bind data to React UI components. It was a universal tool which you could use with any kind of data source, whether it’s a promise, Meteor, redux, Rx…
Continue reading “Introducing React Komposer 2 – Hacker Noon”