More Related Content
Creating books app with react native
- 2. About Me Ali Hussein Al-Sa’o Sr. front end developer @MBC group. Total Experience of : 10 years in web development. [email protected] fb/ali.sa3o skype:ali.alsao
- 3. What this session covers 1. Originally , What is React. 2. What is React Native and the key charachtaristics 3. Installation guide and app initialization 4. Debugging with react native 5. Coding 6. Extras
- 4. Originally , What is React. “A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES” 1. Declarative/Functional : a state per component , UI update to this specific component 2. Component-Based : encapsulated components managing their own state. 3. Cross Platform : react is isomorphic . 4. Written with JS. 5. Works amazingly with JSX and ES6/ES7 6. Virtual DOM
- 5. Functional VS Imperative Defines States : Defines transitions
- 6. How Does This happen
- 9. Functional is a clear winner But react rewrites every time ! Virtual DOM ...anyone
- 10. What is React Native “React Native lets you build mobile apps using only JavaScript.” - Cross Platform Apps (iOS, Android). - React Native apps !=Hybrid apps. - Doesn’t run inside Webview. - Building block concept like swift / objective-C/ Java - Better and faster than Cordova , phoneGap or Ionic
- 11. What problems it made to solve . Live reload / hot reload- no constant rebuilding VS slow development cycle. . Downloads update OTA without resubmission VS slow deployment cycle. https://github.com/aerofs/react-native-auto-updater http://www.electrode.io/docs/electrode_react_native_over_the_air_electron.html https://apphub.io/ https://microsoft.github.io/code-push/ . Supports accessibility very easily : accessible={true} Instagram access. vid : https://www.youtube.com/watch?v=P1e7ZCKQfMA . Can use previously written native code and UI. https://facebook.github.io/react-native/docs/integration-with-existing-apps.html .Cheaper ; Shared skill set VS separate platform teams.
- 12. CHEAPER!!!
- 13. Among other hybrid frameworks -Virtual Dom VS Poor Webview performance. -Standard Native Views VS non Native Feel. -Single step debugging /Browser based VS Hard to debug /Poor tooling -Immutable views , Pure render functions , One way data flow VS Stateful ,Mutable UI
- 14. Requirements to get started. - Node js installed to run the bundler . - NPM is like RubyGems for Ruby, CocoaPods for iOS, Gradle/Maven for Java - Xcode , Android studio (Android SDK,Android NDK with ADB-android debug bridge). - Genymotion emulator if needed. - Terminal if you have unix shell , use gitbash , cygwin +cmder on windows. - Define ANDROID_HOME system variable in windows
- 15. Initilization - brew install node - brew install watchman - npm install -g react-native-cli - react-native init BookApp - use web player to play around : https://cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.9.1/index.html
- 16. Debugging with react native. - Use live reload + Hot reload - Debug JS with browser
- 17. Coding
- 18. Extras : - Who is using react Native : https://facebook.github.io/react-native/showcase.html - Kikstarters and generators: . Ignite : https://infinite.red/ignite . Native Base http://nativebase.io/ . UI Explorer : https://github.com/facebook/react-native/tree/master/Examples/UIExplorer . Pepperoni : http://getpepperoni.com/ - Nice to check : .React Native Package Manager : https://github.com/rnpm/rnpm .Decko IDE on MAC only : https://www.decosoftware.com/download . FastLane releasing tool : https://fastlane.tools/ . Easy grid: https://github.com/GeekyAnts/react-native-easy-grid - Cheat Sheets : .React Native Styling Cheat Sheet : https://github.com/vhpoet/react-native-styling-cheat-sheet .React Native Cheat Sheet : https://github.com/refinery29/react-native-cheat-sheet .React Native all you can sheet :http://rationalappdev.com/react-native-cheat-sheet/ .FlexBox cheat sheet : https://github.com/vhpoet/react-native-styling-cheat-sheet - Style Guidelines: .Proposed React Native style guid : https://github.com/team-oath/uncovery/wiki/React-Native-Style-Guide .AirBnB React/JSX style guide : https://github.com/airbnb/javascript/tree/master/react
- 19. React Native Learn Once , Write everywhere Thank You