Introducción a React Native

Charla presentada en el meetup local NSCoders Night Madrid introduciendo react-native y algunos de los motivos por los que en ticketea hemos comenzado una nueva aplicación con esta tecnología.

Presentada por Jorge Maroto @patoroco y Miguel Araujo @maraujop.

Transcript

1. a new approach Miguel Araujo (@maraujop) Jorge Maroto (@patoroco)
2. @ticketeaeng
3. We tried several options (including native) Why React Native at ticketea? 3
4. Framework by facebook Using React Easy bridging native code Multiplatform apps written in JavaScript (actually ES2015) What is React Native? 4
6. Native modules JavaScript side Objective-C Java Bridging native code 6
7. WHAT IS REACT?
8. 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? 8
9. Everything is a component 9
11. Not a webview Not a 100% code reuse Closer to frontend development than native development What is not React Native? 11
12. React always re-renders Every component has a 2 important things state properties (props) Virtual DOM 12
13. Differences in virtual DOM 13
14. State changes 14
15. Support for iOS / Android index.ios.js / index.android.js ToastAndroid / ActivityIndicatorIOS Differences between Android / iOS 15
16. GETTING STARTED
17. 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 Getting started 17
18. react-native init <project_name> . ├── android ├── index.android.js ├── index.ios.js ├── ios ├── node_modules └── package.json react-native init 18
19. Only compile when native code added react-native run-android compile on XCode facebook packager react-native start Autoreload on JavaScript changes Development process 19
20. <Component propName=“propValue”> <Text>Hello</Text> </Component> this.props.propName this.props.children JSX & props 20
21. Components lifecycle 21 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
22. Components lifecycle 22 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
23. Components lifecycle 23 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
24. Components lifecycle 24 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
25. Not storyboards (and much less autolayout) either XML layouts CSS + flexbox as styling language Design & layout 25
26. HELLO NSCODERS
27. All examples will be on Android simulator emulator DISCLAIMER
29. DEMO TIME
32. SHOW ME THE CODE
33. EVENTCARD
37. EVENTSTREAM
44. EXTRA BALL
45. react-native bundle Crashlytics (ɑ) iTunes Connect (β / prod.) Google Play (ɑ / β / prod.) Deploy 45
46. Single place for our state Predictable code flow Redux has been very easy to test Flux & Redux 46
47. CONCLUSIONS
48. Blocking animations Some inconsistencies between iOS / Android We’ve hit around 12 bugs and reported some Early adopting on Android Issues 48
49. 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 Advantages 49
50. Missing more best practices Storyboards vs. (JSX + flexbox) (Swift / Obj-C / Java / Kotlin) vs. JS Mature ecosystem with less WTF/min More libraries available Disadvantages 50
52. THANKS
53. ticketea questions?