Post on 16-Jan-2017
transcript
React(ive) Way To Build Native Mobile Apps
Some Background on React Native• Open Sourced by Facebook in March 2015• Initially was available on iOS only, Later
launched on android• Over 30+ Stars and 600+ contributors on
github• Currently the fastest growing mobile app
platform (even more popular than swift)• Native approach results into much powerful
performance than hybrid framework like ionic• Supports android >4.1 and iOS >7• Companies are already using it in production
React Native Architecture
React-Native architecture is like running an app inside an app
React Native Architecture
React Native is a wrapper which creates an asynchronous bridge between javascript interpreter running in thread and Native Platform API
React Native Architecture
React Native also creates worker thread if CPU intensive work like layout, image decoding etc is
required.
React Native ArchitectureLayout and Styling
• React Native uses css inside javascript for styling
And internet reacted like this……..
React Native ArchitectureLayout and Styling
There are several issues with CSS
• Global Namespace• Dead Code• Non-deterministic Resolution
Thats why CSS in Javascript
• All styles are local variables in javascript
• No dead code• Deterministic Resolution because of
local scope
React Native ArchitectureLayout and Styling
React uses flexbox for layout
Calm Down
React Native Architecture
css-layoutReimplementation of CSS layout using pure JavaScript
https://github.com/facebook/css-layout
• Implementation of Flexbox into pure javascript
• Transpiled version available in Java, c# and C
• For react native, It provides the required layout parameter like Height, Width to native platform using the async bridge
Benefits of Architecture• Truly native performance• Threads can take benefits of multi core CPU• Uses the react’s battle proven virtual DOM but
instead of updating browser DOM it updates native component if change is detected.
• Abstracts away the layout from native to CSS Flexbox Layout
• Super fast turn around time• If are familiar with react then you can leverage
that to make mobile apps
To Get StartedYou will Need
• OS X if you are developing for iOS• Node 4.0 (or) greater• watchman and flow tool from facebook
Quick Start Guide• “npm install -g react-native-cli”• “react-native init MyBrandNewApp” to start new
app• Open the Xcode project in Xcode and run from
there for iOS• “react-native run-android” for running android
version
Demo Time
Cautions• React Native is cutting edge technology and
There’s nothing similar to like this in market. So it might break for some edge cases.
• There might not be all native modules available but eco system is growing and its growing super fast.
• The same code might not work across both android and iOS. Some tweaking might be required because of native implementation
Go build your next dream app with React Native and make world a better place
Thank You
Questions ?