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

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