About Me

Ali Hussein Al-Sa’o

Sr. front end developer @MBC group.

Total Experience of : 10 years in web development.

ali.alsao@gmail.comfb/ali.sa3oskype:ali.alsao

What this session covers

1. Originally , What is React.2. What is React Native and the key charachtaristics 3. Installation guide and app initialization4. Debugging with react native5. Coding6. Extras

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/ES76. Virtual DOM

Functional VS Imperative

Defines States : Defines transitions

How Does This happen

Imperative / Transitions

Functional/Stateful

Functional is a clear winner

But react rewrites every time !

Virtual DOM ...anyone

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

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-updaterhttp://www.electrode.io/docs/electrode_react_native_over_the_air_electron.htmlhttps://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.

CHEAPER!!!

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

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

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

Debugging with react native.

- Use live reload + Hot reload- Debug JS with browser

Coding

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

React NativeLearn Once , Write everywhere

Thank You