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

React Native for Mobile App Development

React Native for Mobile App Development

React Native bring web development environment to mobile app development. At the end of the talk there is a coding tutorial that you can access at https://github.com/sonnylazuardi/karejo-app #ReactNative #JakartaJS

C918bcbfa8df32567636c2d125a34fa1?s=128

Sonny Lazuardi

October 21, 2015
Tweet

Transcript

  1. React Native for mobile app development JS JakartaJS Oct 21st

    2015
  2. Sonny Lazuardi Frontend Engineer @ @sonnylazuardi sonnylab.com github.com/sonnylazuardi

  3. BACKGROUND

  4. MOBILE APP DEVELOPMENT IS HARD No Code Sharing Low Iteration

    Speed Hard To Scale https://speakerdeck.com/frantic/react-native-tutorial-nyc-15
  5. WEB APP DEVELOPMENT IS EASY R

  6. HYBRID APP

  7. Zuckerberg admits fault in Facebook's HTML5 focus, pledges native Android

    app 2012 2015 Facebook Ads Manager using React Native
  8. NATIVE APPS WHY ARE GREAT? Complex Gestures & Smooth Animations

    Fast, Responsive Consistent With the platform https://speakerdeck.com/frantic/react-native-tutorial-nyc-15
  9. REACT.JS

  10. REACT.JS JS LIBRARY FOR BUILDING USER INTERFACE

  11. https://speakerdeck.com/pedronauck/reactjs-keep-simple-everything-can-be-a-component

  12. FEATURES JUST THE UI 1 2 3 VIRTUAL DOM DATA

    FLOW
  13. JUST THE UI 1 LIBRARY != FRAMEWORK COMPONENT BASED <Image

    /> <Feed /> <Header/> <Caption />
  14. https://speakerdeck.com/pedronauck/reactjs-keep-simple-everything-can-be-a-component 2

  15. JAVASCRIPT IS FAST THE DOM IS SLOW

  16. UNIDIRECTIONAL DATA FLOW PROPS VS STATE 3

  17. REACT NATIVE

  18. DOM

  19. UIKIT

  20. REACT NATIVE WRITE ONCE RUN ANYWHERE

  21. REACT NATIVE LEARN ONCE WRITE ANYWHERE

  22. REACT NATIVE COMPONENT <div> <View> Browser DOM Native Component <img>

    <Image> <span> <Text> <ScrollView> <MapView> <TabBar>
  23. REACT NATIVE STYLING

  24. REACT NATIVE SETUP • Requirements • OSX • Node 4.0

    or newer • Watchman • Installing React Native CLI npm install –g react-native-cli • Starting React Native Project react-native init ProjectName
  25. ANDROID SETUP • Install JDK • Install Android SDK brew

    install android-sdk • Add Android SDK path to your ~/.bashrc, ~/.zshrc export ANDROID_HOME=/usr/local/opt/android- sdk
  26. LET’S CODE https://github.com/sonnylazuardi/karejo-app