Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native Introduction

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

Jorge Maroto

July 19, 2016
Tweet

More Decks by Jorge Maroto

Other Decks in Programming

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