That Conference 2017, Kalahari Resort, Lake Delton, WI
React Native: The Good Parts – Stan Bershadskiy

Day 1, 7 Aug 2017

Disclaimer: This post contains my own thoughts and notes based on attending That Conference 2017 presentations. Some content maps directly to what was originally presented. Other content is paraphrased or represents my own thoughts and opinions and should not be construed as reflecting the opinion of the speakers.

Executive Summary

• Native app is a very different experience than web app
• You get way better performance with native app
• You get better development experience when working in React
• React Native gives you best of both worlds–good development experience and best performance

Stan Bershadskiy

• Architect at Modus Create
• Author of React Native Cookbook
• Working with React Native >1.5 yrs

React Native Cookbook

• From UI to deployment
• Not just “how”, but “why”

Modus

• Product Studio
  • Consulting company
  • Specializing in mobile and web apps
  • Globally distributed agile teams
• Community leaders
  • Published authors and conference speakers
  • Partners with GitHub et al

Mobile Apps Today

• Split into three groups
  • Native
    • Excellent performance, slow development
  • Web/Hybrid – PhoneGap, Cordoba, Ionic
    • Easy development, terrible performance
    • HTML5/JS is not the solution for fast native apps
  • Cross Compiled – Xamarin, Titanium
    • Meh, dinosaur
    • Most people moving away from this world

We want, of course, good performance, quick development

React Native

• A framework for building native mobile apps using JavaScript
• JavaScript runs in interpreter on the platform
• Different from cross-compiled, which compiles down to native

React’s Core Dependency

• React.js

React.js

• Parts
  • JSX – Describe the UI
  • Virtual DOM – Efficiently batch and schedule rendering
  • Lifecycle – Control how components render

How Does React Work?

• View Declaration (JSX) -> Virtual DOM -> Target Platform
• Initial phase – componentWillMount, render, componentDidMount
• Update phase – shouldComponentUpdate, render, componentDidUpdate

React’s New Core Algorithm

• Fiber – will also be in React Native (next version)

React Native

• Parts
  • React – declarative goodness
  • Bridge – communication between JavaScript and native threads
  • Native UI SDK – Render Native UI elements on the main thread

How Does React Native Work?

• JavaScript thread
  • Has event loop (60 fps)
  • JS Call – delegates to main thread, which does Native Call
• Main thread
  • Renders to the UI
  • Main thread is never blocked, so UI responsive

The Good Parts

Layout System

• Yoga
• Flexbox and Absolute positioned layout system written in C++ to achieve maximum performance
• Some parts written in assembly
• Similar to web standards

Animated API

• 60 fps goodness
• Create Animated Values of a type that wrap components
• Values can be composed in parallel, sequence or other variations
• Animations can be executed on the native thread for increased performance
• Native thread can kick off sub-thread on which to do the animation calculations. So UI isn’t blocked

Animated API Examples

• React-Native-Foldview
• Twitter Exploding Hearts
• Can now export Adobe (something) Effects into React Native

Native Module Bridge

• Native Made Easy
• Easily expose native functionality and native UI components to be used by React Native

It’s Just JavaScript

• Answer to anything is probably on Stack Overflow
• All your business logic likely going to be implemented in JavaScript

Commonly Used JS Modules

• Redux – state container
• Lodash – looping
• Moment – simple date manipulation

Community

• This is the most important thing
• Facebook and the Community as a whole work hand in hand to further the development of React native.
• >50% of commits come from the community

Community Contributions

• Expo(nent) – app development platform
• React Navigation – navigation made simple (finally)
• RNPM – Simple linking of native modules

The Not-So-Good Parts

Upgrading

• “Hope you like reading diffs”
• But it’s not critical that you upgrade immediately
• If you’re actively developing, you could keep up with latest versions
• But if further into lifecycle, don’t need to upgrade constantly

Android

• Dealing with Native Android code is no fun
• Device and version fragmentation cripples the development experience
• Tons of devices, tons of Android versions
• “Tread lightly”
• Suggested starting with Android first, since once it works there, you know it will work on iOS

Development Mode

• Apps work much slower in development mode, especially Android
• But much faster in production mode

Where does React Native Belong?

• Target platforms
  • iOS
  • Android
  • Apple TV
• More
  • Universal Windows Platform – Surface tablets, Xbox One
  • Mac OS
  • Linux
• Few more
  • Virtual Reality – Oculus (React VR)
  • Web – but Stan doesn’t recommend it
  • Other–just needs to run JavaScript interpreter in C++

React Native in the Wild

• Skype
• AirBnb
• Instagram – recently switched over to React Native – claimed better velocity

Building Your Next App

Resources

• Stan’s book
• React Native Docs
• GitHub issues page

Create React Native App

• Simple platform-independent way to get up and running
• Can push updates to your app while in production (if JavaScript)
  • e.g. Microsoft CodePush

Standard Way

• Start with native IDE
  • Xcode
  • Android Studio
  • javaScript IDE
• Still need to know how to go through deployment cycle on each platform

Best Practices

• Render() – keep as lean as possible
• Bridge – be mindful of data you send across bridge
  • Bridge has to serialize the types, so be careful of large blobs of data going across
  • To do complicated data manipulation, e.g. transfer megabytes, do this on the native side

First Use of React Native in Production

• Facebook Groups
• Ads Manager 2nd