Desarrollo de aplicaciones con react native by @charliesbox

Talk: https://www.youtube.com/watch?v=lOBTihIzrd0

Transcript

1. R e a c t N a t i v e Building native apps. With JS.
2. “One day, developers will build native apps by using HTML5, JS and CSS” The Golden Dream
3. Is it Phonegap the chosen one?
4. Web views suck!
5. Awful performance and weird UI
7. Anyway, developing native apps is awesome!
9. Slow development cycle Why it doesn’t work Slow deployment cycle Different APIs to code the same thing
10. What we want • Similar web development cycle • Hot fixes on the fly (did you say iOS?) • Code reuse • Unique UI per platform
11. Let’s talk about 
 React Native
12. Write Once 
 Run Everywhere
13. Learn Once 
 Write Anywhere
14. Instant reload React Native OTA Updates Common APIs
16. class Example extends Component { render() { return ( <View> <Text style={styles.text}> Hello World! </Text> ); } }; It’s all about JS var styles = StyleSheet.create({ text: { flex: 1; justifyContent: ‘center’; backgroundColor: ‘#000’; } });
17. How it works? HTML? Swift or Java? Nope. Bridge and threads
19. React Native iOS Android <View/> UIView View <Button/> UIButton Button <DatePicker/> X X <DatePickerIOS/> <DatePickerAndroid/> UIDatePicker DatePicker
20. Performance + UI React uses the UI components that are native to the platform that it runs on.
21. Can I use 3rd party native components?
22. @interface RCTMapView : RCTViewManager @end @implementation RCTMapManager RCT_EXPORT_MODULE() - (UIView *)view { return [[MKMapView alloc] init]; } RCT_EXPORT_VIEW_PROPERTY(showsUserLocation, BOOL) @end //Usage in javascript const MapView = requireNativeComponent("RCTMap", null); // In a render function: <MapView showsUserLocation={true} />
23. What if Apple or Google release some new components or APIs?
25. I won’t move without my lodash ❤
26. All libraries that don’t interact with the DOM are welcome
27. Can I use it with an existing app?
29. Enough talk.
 Show me the magic.
31. How do I debug? (Do you like Chrome?)
33. Production ready?
34. Gyroscope apps from http://gyrosco.pe/
35. Same team developed both apps They reused almost 85% of code
37. Sneak Peaks
40. R e a c t N a t i v e R e n d e re r A n g u l a r
41. Let’s code!
42. Thanks! @carlyeah carlos.lopez@gbox.com @charliesbox