Intro to React Native

Picnic Code workshop about React Native (https://www.gui.uva.es/taller-introduccion-a-react-native/)

Demo and guide available in https://github.com/patoroco/react-native-workshop

Transcript

1. mobile Jorge Maroto García
 @patoroco
2. Mobile in ticketea 2
3. Technologies 3 Swift + JavaScript + [Obj-C]
4. 4 Checkpoint
5. ‣ From 2012 ‣ QR-Scanner for iOS & Android ‣ Several entrances to the same venue ‣ Recurrent events vs. big festivals ‣ Bad lighting conditions ‣ Battery issues Checkpoint :: Product 5
6. ‣ Obj-C / Java ‣ iOS 6 / Android 1.5 ‣ Core Data / SQLite ‣ ZXing / ZBar ‣ Captuvo SDK Checkpoint :: Tech 6
7. 7 Box Office
8. ‣ From 2013 ‣ Ad-hoc installations ‣ Numbered and not numbered venues ‣ Printers Box Office :: Product 8
9. 9 ticketea
10. ‣ Geolocated events ‣ Push notifications ‣ Bridging with some parts in current frontend Purchase app :: Product 10
11. Purchase app :: Tech 11 vs.
12. Purchase app :: Tech II 12 React Native
13. ‣ Framework by facebook ‣ Using React ‣ Easy bridging native code ‣ Multiplatform apps written in JavaScript (actually ES2015) What is React Native? 13
14. ‣ Not a webview ‣ Not a 100% code reuse ‣ Closer to frontend development than native development What is not React Native? 14
15. ‣ It's a pattern supported by a library ‣ Different implementations: ReactJS / React Native ‣ Everything in React is a component ‣ Data flow is unidirectional What is React? 15
16. Everything is a component 16
17. Everything is a component 17
18. ‣ React always re-renders ‣ Every component has two important things ‣ state ‣ properties (props) Virtual DOM 18
19. Differences in Virtual DOM 19
20. State changes 20
21. ‣ Support for iOS / Android index.ios.js / index.android.js ‣ ToastAndroid / ActivityIndicatorIOS Differences iOS <—> Android 21
22. ‣ Native modules ‣ JavaScript side ‣ Objective-C ‣ Java Bridging native code 22
23. ‣ There is a great getting started tutorial from facebook ‣ Better on OS X ‣ XCode > 7.0 / Android 6.0 (API 23) ‣ node 4.0 + watchman + flow npm install -g react-native-cli react-native init <project_name> Getting started 23
24. 24 Demo 1
25. JSX & props 25 <Component propName=“propValue”> <Text>Hello</Text> </Component> this.props.propName this.props.children
26. Components lifecycle 26 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
27. Components lifecycle 27 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
28. Components lifecycle 28 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
29. Components lifecycle 29 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
30. 30 Demo 2
31. 31 Demo 3
32. 32 Do you like it?
33. Next chapters… 33 ‣ React Native Playgrounds (https://rnplay.org/) ‣ rnpm (React Native Package Manager) ‣ Redux ‣ Reactotron ‣ Hybrid apps (old native app + parts in React Native) ‣ RealmJS ‣ Testing ‣ Microsoft Code Push ‣ …
34. 34 Knowledgements
35. Issues 35 ‣ Blocking animations ‣ Some inconsistencies between iOS / Android ‣ We’ve hit around 12 bugs and reported some ‣ Early adopting on Android
36. Advantages 36 ‣ Sharing code between platforms (including tests) ‣ Testing in JS-way (no simulator needed) ‣ Web developers can easily jump into react-native ‣ Some things are done faster (less boilerplate) ‣ React and redux are a killer combo ‣ Learning curve ‣ Introduce new people to the project
37. Disadvantages 37 ‣ Missing more best practices ‣ Storyboards vs. (JSX + flexbox) ‣ (Swift / Obj-C / Java / Kotlin) vs. JS ‣ Mature ecosystem with less WTF/min ‣ More libraries available
38. questions? mobile questions?