Creating books app with react native

Creating books app with react native

• 2.
  About Me Ali HusseinAl-Sa’o Sr. front end developer @MBC group. Total Experience of : 10 years in web development. ali.alsao@gmail.com fb/ali.sa3o skype:ali.alsao
• 3.
  What this sessioncovers 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 , Whatis 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 DefinesStates : Defines transitions
• 6.
  How Does Thishappen
• 7.
  Imperative / Transitions
• 8.
  Functional/Stateful
• 9.
  Functional is aclear winner But react rewrites every time ! Virtual DOM ...anyone
• 10.
  What is ReactNative “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 itmade 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 hybridframeworks -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 getstarted. - 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 installnode - 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 reactnative. - Use live reload + Hot reload - Debug JS with browser
• 17.
  Coding
• 18.
  Extras : - Whois 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