Betting on React Native

We believe in the web. The future of mobile apps most certainly includes Progressive Web Applications. But the reality of the present and the near term future is that native apps will continue to provide the best cross-platform user experience.

React Native is a new approach building native apps in JavaScript with a lot of excitement behind it, even from iOS and Android developers. We'll learn why by comparing cross-platform apps in React Native against Cordova, Progressive Web Apps, and their fully native counterparts.

Transcript

1. BY CHRIS BALL
   Betting on React Native
   

   View Slide

2. Betting on React Native by cball_
   WHY USE
   REACT NATIVE?
   BUILDING MOBILE
   APPS
   Our Agenda
   What we’re talking about today
   HOW REACT
   NATIVE WORKS
   REACT NATIVE
   WORKFLOW
   OUR BET AT
   ECHOBIND
   ?
   

   View Slide

3. SIMPLY CHOOSE FROM AN OVERWHELMING NUMBER OF WAYS BEFORE YOU START!
   Build a mobile app
   

   View Slide

4. Betting on React Native by cball_
   Options for building a mobile app
   Web Hybrid Native
   JSNative
   PWAs
   From Web to Native
   

   View Slide

5. Betting on React Native by cball_
   Web Apps
   - Make sure your site looks good on mobile
   - Add meta tags and manifest (use polyfill for iOS)
   Responsive app
   - Prompt the user since many people don’t
   bookmark things
   - The web browser will use meta/manifest to get
   the app name and icon.
   Add to home screen
   Responsive + meta tags + manifest + Add to Homescreen
   

   View Slide

6. Betting on React Native by cball_
   Web Apps
   - Very low barrier to entry
   - Browser chrome is removed for you
   Benefits
   - Hard to customize (ex: loading screens)
   - What if user has no connectivity?
   - Good luck changing your icon after it’s installed.
   Challenges
   Responsive + meta tags + manifest + Add to Homescreen
   

   View Slide

7. Betting on React Native by cball_
   Options for building a mobile app
   Web Hybrid Native
   JSNative
   PWAs
   From Web to Native
   

   View Slide

8. Betting on React Native by cball_
   Progressive Web Apps (PWAs)
   Improve on general web apps. This looks like the future!
   - Start off as a basic web app
   - As the user uses, it becomes more app-like.
   - Support for many “native only” features like
   offline & push notifications. Mostly through
   ServiceWorker
   What is a PWA?
   

   View Slide

9. Betting on React Native by cball_
   Progressive Web Apps (PWAs)
   Improve on general web apps. This looks like the future!
   - Over time, PWAs will closer match native
   - No need to search an App Store
   - No large initial download
   - Works well in Android
   Benefits
   - Does not work with iOS (Safari), though it is
   under consideration
   - ServiceWorker is not trivial
   Challenges
   

   View Slide

10. Betting on React Native by cball_
    Options for building a mobile app
    Web Hybrid Native
    JSNative
    PWAs
    From Web to Native
    

    View Slide

11. Betting on React Native by cball_
    Hybrid Apps
    A native “shell” for your web app
    - Cordova has been around a long time
    - A large plugin ecosystem
    Why Cordova?
    - Powered by WebView, an embedded browser
    engine
    - Your entire app lives under this WebView.
    Powered by WebView
    

    View Slide

12. Betting on React Native by cball_
    Hybrid Apps
    Cordova and the like
    - Use existing JS skills and any frontend
    framework you want
    - Wrap native features (camera, etc) via plugins
    Benefits
    - Performance & memory usage (must be very
    careful to avoid jank)
    - No UI Components, you must create them
    Challenges
    

    View Slide

13. Betting on React Native by cball_
    Options for building a mobile app
    Web Hybrid Native
    JSNative
    PWAs
    From Web to Native
    

    View Slide

14. Betting on React Native by cball_
    JSNative Apps
    JavaScript talks to Native APIs
    Runs an embedded instance of JavascriptCore.
    React calculates render and passes off to native
    components for layout & rendering.
    React Native
    Acts as a translator where you call native APIs
    from JavaScript. Good integration w/ Angular
    ecosystem.
    NativeScript
    

    View Slide

15. Betting on React Native by cball_
    NativeScript
    Runs on UI Thread
    

    View Slide

16. Betting on React Native by cball_
    React Native
    Runs multiple threads
    

    View Slide

17. Betting on React Native by cball_
    Options for building a mobile app
    Web Hybrid Native
    JSNative
    PWAs
    From Web to Native
    

    View Slide

18. Betting on React Native by cball_
    Native Apps
    Objective-C, Swift, Java
    - Best memory management
    - No restrictions, bridges, or plugins to write
    Benefits
    - Multiple skillsets necessary to build cross-
    platform apps (ex: Swift & Java)
    - No option for sharing code or architecture
    - Slower release cycle
    Challenges
    

    View Slide

19. LET’S EXAMINE SOME BENEFITS
    Why use React Native?
    ?
    

    View Slide

20. Betting on React Native by cball_
    Live/Hot Reload
    - No need to save and recompile, changes are instantly reflected
    - Quick Feedback loops
    Why this is good
    When file is saved, the app recompiles automatically and is reloaded -
    FAST feedback loop!
    Live Reload
    Updated modules are injected, so you don’t lose state (even after
    error screens). FASTER feedback loop, but must be explicitly enabled.
    Hot Reload
    Every once-in-a-while, this breaks and you have to restart the app
    server.
    Caveat:
    

    View Slide

21. Betting on React Native by cball_
    CodePush Support
    - You can push updates to users without needing to resubmit to the
    App Stores
    - If something goes wrong, users will automatically be rolled back.
    Why this is good
    If you add native functionality like camera support, you’ll need to
    recompile and resubmit.
    Caveat:
    

    View Slide

22. Betting on React Native by cball_
    CSS-like Styling
    - No AutoLayout or xml properties, just write “css”
    - Flexbox is nice
    Why this is good
    Flexbox is not 1-to-1 with Flexbox in the browser, but its really close.
    Caveat:
    

    View Slide

23. Betting on React Native by cball_
    Platform Specific Components
    - Structure for max code-reuse, then create platform specific
    components
    - Removes a TON of `if platform.IOS` code
    Why this is good
    Keep the same public API in each platform specific component.
    Caveat:
    

    View Slide

24. Betting on React Native by cball_
    Drop Down to Native
    - If you need to support something outside the norm, or you have
    preexisting iOS / Android code you can reuse it.
    - This is how the React Native community creates plugins
    - Replace existing apps incrementally
    Why this is good
    You’ll need to know what you’re doing (or figure it out) for each
    platform.
    Caveat:
    

    View Slide

25. Betting on React Native by cball_
    Native Teams ❤ React Native
    - Faster iteration
    - Anyone can work on either team
    - They can use CodePush
    Why this is good
    Adjusting to a new workflow may take some time
    Caveat:
    http:/
    /m-static.flikie.com/ImageData/WallPapers/e392e735ca87403ca484fc0310f37768.jpg
    http:/
    /i.ebayimg.com/images/i/291467820065-0-1/s-l1000.jpg
    ❤
    

    View Slide

26. Betting on React Native by cball_
    - More contributors to the framework and community
    - Less chance you’re adopting something that will die off
    Why this is good
    ?
    Caveat:
    Companies ❤ React Native
    

    View Slide

27. EMBEDDED JAVASCRIPT INTERPRETER + REACT + SPECIALIZED RENDER
    How React Native Works
    

    View Slide

28. Betting on React Native by cball_
    How React Native Works
    Keep the UI thread free
    

    View Slide

29. Betting on React Native by cball_
    How React Native Works
    React is React, but renders differently
    - React state & data flow is the same as the web
    - Render cycle calculates diff, passes it off
    - Instead of DOM, renders to Native Components
    using the Native UI thread
    - Calculate layouts via Stylesheet classes, but
    actual layout and drawing is managed Natively
    React Native does not use the DOM
    

    View Slide

30. Betting on React Native by cball_
    How React Native Works
    How does React Run?
    - JavaScriptCore
    - VM that interprets JavaScript
    - React Native uses this to run React
    - A bridge is used to pass from JS -> Native and
    back
    Embed an interpreter
    

    View Slide

31. Betting on React Native by cball_
    How React Native Works
    React.js Conf 2015 Keynote 2 - A Deep Dive into React Native
    https:/
    /www.youtube.com/watch?v=7rDsRXj9-cU
    

    View Slide

32. NOT ALL THAT DIFFERENT
    React Native Workflow
    

    View Slide

33. Betting on React Native by cball_
    It’s not “write once, run everywhere”
    - React Native’s mantra is “Learn once, write
    anywhere”
    - Use platform specific components
    Embrace platform differences
    

    View Slide

34. Betting on React Native by cball_
    Develop your app
    

    View Slide

35. Betting on React Native by cball_
    Bundle for Testing & Release
    - react-native run-ios --configuration Release
    iOS
    - generate a signing key, update config to use it
    - react-native run-android —variant=release
    - cd android && ./gradlew assembleRelease
    Android
    

    View Slide

36. Betting on React Native by cball_
    Release Updates
    - Use CodePush
    Without native dependencies
    - Rebuild / Resubmit to App Stores
    With native dependencies
    

    View Slide

37. A CROSS-PLATFORM WINNER FOR THE NEAR-TERM FUTURE
    Our Bet on React Native
    

    View Slide

38. Betting on React Native by cball_
    Use the right tool for the job
    Or is a web app sufficient?
    Do you need a mobile app?
    If so, maybe Cordova is a better option. BTW, is push really helpful?
    Do you just want to add push messaging?
    Nope, we still love Ember for web apps. Components & data are likely
    different between web/mobile anyway.
    Do I have to use React for everything now?
    You wont do better than React Native
    Trying for a native experience w/ web tech?
    

    View Slide

39. Betting on React Native by cball_
    PWAs aren’t a magic bullet (yet)
    - Have a great responsive web app
    - Users can install a native app to get more features, richer experience
    Check out Airbnb’s Approach
    This ensures people can install the PWA version if they prefer it
    Make your web apps PWA friendly
    See previous point about the right tool for the job
    Add a mobile app (if you need it)
    Make it part of the package
    But the reality is that it will take some time to get there.
    PWAs look like the future
    http:/
    /www.mariowiki.com/images/e/e6/BulletBillWii.png
    

    View Slide

40. Betting on React Native by cball_
    It’s the best option TODAY
    We need to leverage our existing skillsets and keep our existing web-
    based workflow as much as possible.
    Keeps the ability to iterate quickly
    Our team often delivers improvements to production many times a
    day.
    Keeps the ability to deploy often
    Bad performance can drain momentum, you shouldn’t have to focus
    on it out of the gate.
    Has good performance by default
    Tech moves fast, but we believe React Native will remain the best
    option for building native apps.
    It will stay the best option for the next year
    We owe it to our clients to find & recommend the best solutions
    

    View Slide

41. Betting on React Native by cball_
    THANKS!
    RESOURCES
    http:/
    /reactnativeexpress.com https:/
    /js.coach/react-native
    https:/
    /www.quora.com/What-are-the-key-difference-between-
    ReactNative-and-NativeScript
    https:/
    /facebook.github.io/react-native/
    https:/
    /github.com/Microsoft/code-push
    https:/
    /discord.engineering/using-react-native-one-year-
    later-91fd5e949933
    

    View Slide