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
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 ?
3. SIMPLY CHOOSE FROM AN OVERWHELMING NUMBER OF WAYS BEFORE YOU START! Build a mobile app
4. Betting on React Native by cball_ Options for building a mobile app Web Hybrid Native JSNative PWAs From Web to Native
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
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
7. Betting on React Native by cball_ Options for building a mobile app Web Hybrid Native JSNative PWAs From Web to Native
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?
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
10. Betting on React Native by cball_ Options for building a mobile app Web Hybrid Native JSNative PWAs From Web to Native
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
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
13. Betting on React Native by cball_ Options for building a mobile app Web Hybrid Native JSNative PWAs From Web to Native
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
15. Betting on React Native by cball_ NativeScript Runs on UI Thread
16. Betting on React Native by cball_ React Native Runs multiple threads
17. Betting on React Native by cball_ Options for building a mobile app Web Hybrid Native JSNative PWAs From Web to Native
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
19. LET’S EXAMINE SOME BENEFITS Why use React Native? ?
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:
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:
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:
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:
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:
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 ❤
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
27. EMBEDDED JAVASCRIPT INTERPRETER + REACT + SPECIALIZED RENDER How React Native Works
28. Betting on React Native by cball_ How React Native Works Keep the UI thread free
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
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
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
32. NOT ALL THAT DIFFERENT React Native Workflow
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
34. Betting on React Native by cball_ Develop your app
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
36. Betting on React Native by cball_ Release Updates - Use CodePush Without native dependencies - Rebuild / Resubmit to App Stores With native dependencies
37. A CROSS-PLATFORM WINNER FOR THE NEAR-TERM FUTURE Our Bet on React Native
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?
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
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
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