$30 off During Our Annual Pro Sale. View Details »

Betting on React Native

Chris Ball
December 14, 2016

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.

Chris Ball

December 14, 2016
Tweet

More Decks by Chris Ball

Other Decks in Programming

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