Developing Apps With React Native

737 views

Published on

Demo project
https://github.com/alvarowolfx/GifPartyReactNative
Talk that I gave on FrontInCuiaba 2016.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
737
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Developing Apps With React Native

  1. 1. DEVELOPING MOBILE APPS WITH REACT NATIVE@ A LVA R O V I E B R A N T Z / / AV I E B R A N T Z . C O M . B R 1
  2. 2. • IT Analyst at Sefaz-MT • Former Fullstack developer at Procurix • Bsc. Computer Science at UFMT • Golang and React enthusiast Cuiabá, MT, Brasil alvarowolfx @alvaroviebrantz Alvaro Viebrantz
  3. 3. DevMT
  4. 4. R E A C T W H A T I S R E A C T ? 5
  5. 5. R E A C T Just the V of MVC 6 Created by Facebook 2013-2016
  6. 6. R E A C T 7 D ATA D O M f(data) = View One-way Data Flow
  7. 7. R E A C T 8 Simple and Declarative JSX
  8. 8. R E A C T 9 JSX is a syntactic sugar It’s just Javascript
  9. 9. R E A C T Everything is a Component 10
  10. 10. R E A C T Bring your own Architecture 11
  11. 11. R E A C T I N T E R N A L S H O W R E A C T W O R K S ? 12
  12. 12. R E A C T I N T E R N A L S 13 Virtual DOM
  13. 13. R E A C T I N T E R N A L S 14 Batch Updates
 Blazing Fast Diff Algorithm
  14. 14. R E A C T I N T E R N A L S 15 S TAT E State vs Props Mutable vs Immutable What you Own vs What you Won P R O P S
  15. 15. R E A C T I N T E R N A L S • componentWillMount • render • componentDidMount • shouldUpdateComponent • componentWillUpdate • render • componentDidUpdate • componentWillUnmount M O U N T U P D AT E U N M O U N T 16 View lifecycle
  16. 16. R E A C T P U S H E D T H E W E B F O R WA R D 17 Many cutting edge web technologies
  17. 17. R E A C T P U S H E D T H E W E B F O R WA R D 18 Modern JS Many projects using 
 ES6 and ES7(!!!)
  18. 18. R E A C T P U S H E D T H E W E B F O R WA R D 19 More Functional Programming in Javascript Immutability
  19. 19. R E A C T P U S H E D T H E W E B F O R WA R D • Awesome tooling and packaging • Hot code reload 20
  20. 20. R E A C T P U S H E D T H E W E B F O R WA R D Advanced application architectures 21
  21. 21. R E A C T R E P E R C U S S I O N • More Javascript oriented • Components as a Tree • Simpler Lifecycle • One way data flow • Functional Programming 22
  22. 22. R E A C T N AT I V E W H A T I S R E A C T N A T I V E ? 23
  23. 23. I N A G I A N T S H O U L D E R ’ S Why not apply this for mobile development ? 24
  24. 24. W H Y N O T N AT I V E ? • Native is hard • Platform specific code • Develop, Compile, Build, Test tedious lifecycle • Hard to find developers • Web developers are more easy to find • But native it’s a necessary evil 25
  25. 25. A LT E R N AT I V E S T O N AT I V E 26 Hybrid apps with Cordova
  26. 26. A LT E R N AT I V E S T O N AT I V E 27 Many plugins (!!!) Awesome frameworks
  27. 27. A LT E R N AT I V E S T O N AT I V E 28
  28. 28. S TAT E O F W E B V I E W S “The State of JavaScript on Android in 2015 is… poor” https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889/1 This is the benchmark most representative of Discourse performance, and the absolute best known Android score for this benchmark is right at ~400ms on a Samsung Galaxy S6. That doesn't seem too bad until you compare.. iPhone 5 → 340ms iPhone 5s → 175ms iPhone 6 → 140ms iPad Air 2 → 120ms iPhone 6s → 60-70ms 29
  29. 29. R E A C T N AT I V E • Created by Facebook • Public release on early 2015 • Only iOS first • Late 2015 • Android support 30
  30. 30. R E A C T N AT I V E A P P R O A C H • Swap Virtual DOM and DOM Elements with: • Native Views • No web views !!! 31
  31. 31. R E A C T N AT I V E A P P R O A C H Flexbox CSS Subset All implemented natively 32
  32. 32. R E A C T N AT I V E A P P R O A C H Dedicated Gestures API (PanResponder) no more “fastclick” 33
  33. 33. R E A C T N AT I V E A P P R O A C H Easy Animation API Based on Facebook’s Origami 34
  34. 34. R E A C T N AT I V E A P P R O A C H Some Web Polyfills Navigation, Timers, Fetch, RAF looks exactly the same 35
  35. 35. N AT I V E A P P R E A C T N AT I V E A P P R O A C H Thin React to Native Bridge 36 J AVA S C R I P T E N G I N E B Y P L AT F O R M R E A C T J S Y O U R A P P C O D E R E A C T N AT I V E J S L I B R A RY
  36. 36. N AT I V E A P P R E A C T N AT I V E A P P R O A C H 37 J AVA S C R I P T E N G I N E B Y P L AT F O R M R E A C T J S Y O U R A P P C O D E R E A C T N AT I V E J S L I B R A RY Y O U R N AT I V E A P P L I B Y O U R J S B R I D G E L I B
  37. 37. N a t i v e a p p R E A C T N AT I V E A P P R O A C H 38 J a v a s c r i p t e n g i n e B y p l a t f o r m Aw e s o m e B u t t o n . a n d ro i d . j s A w e s o m e B u tt o n . j s Aw e s o m e B u t t o n . i o s . j s
  38. 38. R E A C T N AT I V E E X T E N S I B I L I T Y Native Modules and Views can be marked as exported to be accessed on the JS side Must conform to Module or View contract on each platform 39
  39. 39. R E A C T N AT I V E T O O L S • ES 6 • FlowType (optional) • Some ES 7 • async / await • All backed by Babel 40
  40. 40. Inspector and Profiler Live / Hot Module Reload R E A C T N AT I V E T O O L S 41
  41. 41. R E A C T N AT I V E C O M P O N E N T S ActivityIndicatorIOS DatePickerIOS DrawerLayoutAndroid Image ListView MapView Modal Navigator NavigatorIOS PickerIOS Picker ProgressBarAndroid ProgressViewIOS RefreshControl ScrollView SegmentedControlIOS SliderIOS StatusBar Switch TabBarIOS TabBarIOS.Item Text TextInput ToolbarAndroid TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View ViewPagerAndroid WebView 42
  42. 42. R E A C T N AT I V E C O M P O N E N T S 43 ListView MapView Navigator ScrollView Text TextInput View WebView
  43. 43. R E A C T N AT I V E A P I S ActionSheetIOS Alert AlertIOS Animated AppRegistry AppStateIOS AppState AsyncStorage BackAndroid CameraRoll Clipboard DatePickerAndroid Dimensions IntentAndroid InteractionManager LayoutAnimation Linking LinkingIOS NativeMethodsMixin NetInfo PanResponder PixelRatio PushNotificationIOS StatusBarIOS StyleSheet TimePickerAndroid ToastAndroid VibrationIOS Vibration 44
  44. 44. R E A C T N AT I V E E C O S Y S T E M45
  45. 45. R E A C T N AT I V E A D O P T I O N 28.000+ 30.000 Github stars Backed by Facebook Version 0.21 0.24-rc Fast iterations 46
  46. 46. PA C K A G E S A N D C O M P O N E N T S https://js.coach 47
  47. 47. C O D E P U S H microsoft.github.io/code-push/ 48
  48. 48. 49
  49. 49. 50
  50. 50. R E A C T N AT I V E O N W I N D O W S 51 https://blogs.windows.com/buildingapps/2016/04/13/react-native-on-the-universal-windows-platform/
  51. 51. S H O W C A S E F 8 C O N F E R E N C E A P P 52 https://github.com/ fbsamples/f8app
  52. 52. S H O W C A S E 53
  53. 53. C H E C K I T O U T • Install NodeJS and NPM • Install React Native command line tools
 • For iOS development • Only on Mac and only need Xcode • For android dev • Install Android SDK and Genymotion (recommended) > npm install -g react-native-cli 54
  54. 54. C H E C K I T O U T • Then just create a project with
 
 
 • To run the iOS project • To run the Android project > react-native init AwesomeProject > react-native run-ios > react-native run-android 55
  55. 55. 56 DEMO May the demo gods be with us
  56. 56. G I F PA R T Y 57
  57. 57. G I F PA R T Y 58 • Giphy API • Redux Architecture • Navigation + ListView + CustomComponents • Tests with Chai + Mocha • All available on
 github.com/alvarowolfx/GifPartyReactNative
  58. 58. G I F PA R T Y 59 Let’s Organize the party Let’s Animate the party Let’s Make Our Own party
  59. 59. G I F PA R T Y 60
  60. 60. W H O ’ S G O N N A W I N ? 61
  61. 61. W H O ’ S G O N N A W I N ? R E A C T N AT I V E I O N I C & C O R D O VA P E R F O R M A N C E V E RY G O O D G O O D N AT I V E M O D U L E S G O O D G O O D S TA R T P R O J E C T V E RY G O O D P O O R LT S U P P O R T C U T T I N G E D G E V E RY G O O D C O M M U N I T Y P O O R V E RY G O O D E C O S Y S T E M P O O R V E RY G O O D B A C K E D B Y FA C E B O O K G O O G L E A N D I O N I C D E B U G G E R & P R O F I L E R V E RY G O O D P O O R D E V T O O L S G O O D G O O D 62
  62. 62. T H AT ’ S A L L F O L K S 63 DEVELOPING MOBILE APPS WITH REACT NATIVE

×