BY CHRIS BALL Betting on React Native 

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 ? 

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

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

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 

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 

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

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? 

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 

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

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 

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 

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

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 

Betting on React Native by cball_ NativeScript Runs on UI Thread 

Betting on React Native by cball_ React Native Runs multiple threads 

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

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 

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

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: 

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: 

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: 

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: 

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: 

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 ❤ 

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 

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

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

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 

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 

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 

NOT ALL THAT DIFFERENT React Native Workflow 

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 

Betting on React Native by cball_ Develop your app 

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 

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

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

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? 

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 

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 

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