React Native

Presentation by João Anes

In this talk, we’re gonna talk mobile development without using strictly native tools - and yes, these sorts of platforms usually result in apps that don’t quite nail the native look&feel, residing in an uncanny valley for applications. However, this one’s a little different.

We’re talking about React Native, a mobile development framework, created, developed and endorsed by Facebook you can plug right in your existing native code to gain developer superpowers: Hot Reloading, instant deploys without an AppStore round-trip, UI expressed in React components and many more! Facebook says it’ll replace mobile development as we know it - so let’s see how true that might be!

Transcript

1. REACT NATIVE Or how to make mobile development bearable again
2. "a framework that will wholly replace mobile development as we know it today."
4. "A javascript framework for cross- platform mobile development"
5. BEST FEATURES 1. Multiplatform, 80-90% code share! 2. Faster iteration and development speed than native 3. Can be dropped in existant native apps 4. Write once, run anywhere, in JavaScript!
9. EVALUATION CRITERIA 1. How is your code written/represented? 2. How is your code ran, and by what? 3. Who renders the user interface, and how?
10. PHONEGAP (CORDOVA) 1. You write code in javascript, and you communicate with native modules through a bridge 2. Your JS code is interpreted by the device's JS Virtual Machine 3. Your views are written in HTML and rendered by the device's webview
11. BUT HOW ABOUT REACT NATIVE?
12. REACT NATIVE 1. You write code in javascript, communicating with native modules through a bridge 2. Your JS code is interpreted by a vendored JavascriptCore 3. Your views are written in React and rendered natively
13. REACT?
14. A Javascript library for building user interfaces
15. React is an unopinionated, declarative way to describe UI.
16. <div class="content"> <div class="profile"> <img src="/avatars/1337.jpg" /> <span class="info"> <i class="name">John Doe</i> <i class="title">CFO</i> </span> </div> <span class="contentTitle"> Titles! </span> ... </div>
17. <Content title="Titles!"> <Profile photoId="1337" name="John Doe" title="CFO"/> ... </Content>
18. But react isn't just about extracting elements into modules. <ScrollableList> { profiles.map( profile => ( <Profile ...profile> )) } </ScrollableList>
19. REACT COMPONENT reusable, modular, scoped
20. REACT COMPONENT Large open-source scene, thousands of reusable components
21. But enough of that, what about the native?
22. BEST FEATURES 1. Multiplatform, 80-90% code share! 2. Faster iteration and development speed than native 3. Can be dropped in existant native apps 4. JavaScript
23. BEST FEATURES 1. Multiplatform, 80-90% code share! Metro-bundler is even con gured to load .ios.js and .android.js les!
24. BEST FEATURES 1. Faster iteration and development speed than native Since your app is just a js bundle, you can beam that to your clients bypassing the stores!
25. BEST FEATURES 1. Can be dropped in existant native apps You can integrate your existant native modules with the bridge.
26. BEST FEATURES 1. JavaScript From ow to webpack, npm to Typescript, extensive tooling to make JS better exists.
27. However, a rose without thorns doesn't exist.
28. WORST FEATURES 1. Javascript Tool complexity can create problems in and out of itself.
29. WORST FEATURES 1. Driven by Facebook needs Sometimes other companies and communities rise to the challenge. No router? * https://github.com/airbnb/native-navigation * https://github.com/wix/react-native-navigation * https://github.com/react-community/react-navigation
30. WORST FEATURES 1. Upgrading and native package management is complicated 'react-native link' doesn't always work
31. WORST FEATURES 1. Slight performance overhead Crossing the bridge takes time.
32. WORST FEATURES 1. Iffy licensing Patents involved. Legal departments might be concerned.
33. WORST FEATURES 1. Long dependency chain That's a lot to break compared to native toolkits.
34. LIVE CODING!
35. CONTINUED FUTURE? Dogfooded and integrated into products at founding company Most code is open sourced, even if Facebook abandons Thousands of apps by different companies depend on them Microsoft maintains a Modern UI-frontend!
36. END NOTES
37. SHOULD YOU USE REACT? It depends.