React Native Introduction

Slides used in CrossDevelopment Madrid Meetup talk: http://www.meetup.com/CrossDevelopment-Madrid/events/232349828/

Videos
======
- react-native init: https://youtu.be/AI_VLiMq3As
- react-native run-ios: https://youtu.be/2N1iShBAwCw
- react-native run-android: https://youtu.be/iWlICqPw3x0

Transcript

1. React Native introduction Jorge Maroto García
 @patoroco CrossDevelopment Madrid
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. ‣ Obj-C ‣ iOS 7 ‣ Stateless app ‣ Printer drivers Box Office :: Tech 9
10. 10 ticketea
11. ‣ Geolocated events ‣ Push notifications ‣ Bridging with some parts in current frontend Purchase app :: Product 11
12. Purchase app :: Tech 12 vs.
13. Purchase app :: Tech II 13 React Native
14. ‣ Framework by facebook ‣ Using React ‣ Easy bridging native code ‣ Multiplatform apps written in JavaScript (actually ES2015) What is React Native? 14
15. ‣ Not a webview ‣ Not a 100% code reuse ‣ Closer to frontend development than native development What is not React Native? 15
16. ‣ 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? 16
17. Everything is a component 17
18. Everything is a component 18
19. ‣ Each component has two important things ‣ state => this.state.counter ‣ properties => this.props.title ‣ React always re-renders ‣ render() Virtual DOM 19
20. State changes 20
21. Differences in Virtual DOM 21
22. JSX & props 22 <Component propName=“propValue”> <Text>Hello</Text> </Component> this.props.propName this.props.children
23. ‣ Support for iOS / Android / Windows **
 https://blogs.windows.com/buildingapps/2016/04/13/react-native-on-the-universal-windows-platform/ ‣ Mandatory entry point
 index.ios.js / index.android.js ‣ Specific components by platform
 ToastAndroid / ActivityIndicatorIOS Differences iOS <—> Android 23
24. ‣ 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 npm install -g react-native-cli Getting started 24
25. react-native init 25 react-native init <project_name>
26. react-native init 26
27. Development process 27 ‣ Only compile when native code added react-native run-android react-native run-ios ‣ facebook packager react-native start ‣ Autoreload on JavaScript changes
28. react-native run-ios 28
29. react-native run-android 29
30. Design & layout 30 ‣ Not storyboards (and much less autolayout) either XML layouts ‣ CSS + flexbox as styling language const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); class HelloWorld extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> ); } }
31. Documentation 31
32. ‣ React always re-renders ‣ render() Components lifecycle 32
33. Components lifecycle 33 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
34. Components lifecycle 34 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
35. Components lifecycle 35 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
36. Components lifecycle 36 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
37. “REDUX IS A PREDICTABLE STATE CONTAINER FOR JAVASCRIPT APPS” React — Redux 37
38. ‣ Single source of truth (store) ‣ Smart vs. dumb components ‣ Dispatch actions ‣ Async actions (redux-thunk / redux-saga) ‣ https://learnredux.com/ React — Redux 38
39. React — Redux 39 const initialState = { search: { category: {}, last_10_searchs: [], searching: false, filtering: false, filters_selected: [], } } function mapStateToProps(state) { var jsstate = state.toJS() return { events: jsstate.events, }; } function mapDispatchToProps(dispatch) { return { searchAutocompleteEvents: (search_term) => dispatch(searchAutocompleteEvents(search_term)), }; } <SearchOverlay navigator={this.props.navigator} searchAutocompleteEvents={(search_term) => this.props.searchAutocompleteEvents(search_term)} /> redux.js HomeContainer.js HomeScreen.js
40. React — Redux 40 export function searchAutocompleteEvents(search_term, refresh=false) { return function(dispatch, getState) { var api_client = new ApiClient() return api_client.ajax_get(`${API_HOST}/events/search/`, { term_autocomplete: search_term }) .then((response) => response.json()) .then((response) => { return dispatch(receiveSearch(search_term, response)) }) } } export function receiveSearch(search_term, response) { return { type: ACTION_RECEIVE_SEARCH, search_term: search_term, events: response.results, total: response.total, } } case actions.ACTION_RECEIVE_SEARCH: return state.updateIn(['search', 'events'], val => Immutable.fromJS(events_list())) search_actions.js search_actions.js search_reducers.js
41. ‣ Native modules ‣ JavaScript side ‣ Objective-C ‣ Java Bridging native code I 41
42. Bridging native code II 42 #import <Foundation/Foundation.h> #import "RCTBridgeModule.h" @interface RNSVProgressHUD : NSObject <RCTBridgeModule> @end #import "RNSVProgressHUD.h" #import <SVProgressHUD/SVProgressHUD.h> @implementation RNSVProgressHUD RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(showErrorWithStatus:(NSString *)status) { dispatch_async(dispatch_get_main_queue(), ^{ [SVProgressHUD showErrorWithStatus:status]; }); } RCT_EXPORT_METHOD(showInfoWithStatus:(NSString *)status) { dispatch_async(dispatch_get_main_queue(), ^{ [SVProgressHUD showInfoWithStatus:status]; }); } // .... @end RNSVProgressHUD.h RNSVProgressHUD.m
43. let RCProgressHUD = require('NativeModules').RNSVProgressHUD; let ProgressHUD = { showError: function (message: string): void { RCProgressHUD.showErrorWithStatus(message); }, showInfo: function (message: string): void { RCProgressHUD.showInfoWithStatus(message); }, // ... }; module.exports = ProgressHUD; Bridging native code III 43 RNSVProgressHUD.js const React = require('react-native') const { Platform, ToastAndroid } = React const ProgressHUD = require('ProgressHUD') export default function show_error_on_screen(error_msg) { if (Platform.OS === 'android') { ToastAndroid.show(error_msg, ToastAndroid.SHORT); } else if (Platform.OS === 'ios') { ProgressHUD.showError(error_msg) } } Component.js
44. Issues 44 ‣ Blocking animations ‣ Some inconsistencies between iOS / Android ‣ We’ve hit and report several bugs ‣ Early adopting on Android
45. Advantages 45 ‣ 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
46. Disadvantages 46 ‣ Missing more best practices ‣ Storyboards vs. (JSX + flexbox) ‣ (Swift / Obj-C / Java / Kotlin) vs. JS ‣ Mature ecosystem with less WTF/min ‣ More libraries available
47. Questions? Jorge Maroto García
 @patoroco CrossDevelopment Madrid