react native - react(ive) way to build native mobile apps

15
act(ive) Way To Build Native Mobile Ap

Upload: jimit-shah

Post on 16-Jan-2017

212 views

Category:

Software


5 download

TRANSCRIPT

Page 1: React native - React(ive) Way To Build Native Mobile Apps

React(ive) Way To Build Native Mobile Apps

Page 2: React native - 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

Page 3: React native - React(ive) Way To Build Native Mobile Apps

React Native Architecture

React-Native architecture is like running an app inside an app

Page 4: React native - React(ive) Way To Build Native Mobile Apps

React Native Architecture

React Native is a wrapper which creates an asynchronous bridge between javascript interpreter running in thread and Native Platform API

Page 5: React native - React(ive) Way To Build Native Mobile Apps

React Native Architecture

React Native also creates worker thread if CPU intensive work like layout, image decoding etc is

required.

Page 6: React native - React(ive) Way To Build Native Mobile Apps

React Native ArchitectureLayout and Styling

• React Native uses css inside javascript for styling

And internet reacted like this……..

Page 7: React native - React(ive) Way To Build Native Mobile Apps

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

Page 8: React native - React(ive) Way To Build Native Mobile Apps

React Native ArchitectureLayout and Styling

React uses flexbox for layout

Calm Down

Page 9: React native - React(ive) Way To Build Native Mobile Apps

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

Page 10: React native - React(ive) Way To Build Native Mobile Apps

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

Page 11: React native - React(ive) Way To Build Native 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

Page 12: React native - React(ive) Way To Build Native Mobile Apps

Demo Time

Page 13: React native - React(ive) Way To Build Native Mobile Apps

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

Page 14: React native - React(ive) Way To Build Native Mobile Apps

Go build your next dream app with React Native and make world a better place

Page 15: React native - React(ive) Way To Build Native Mobile Apps

Thank You

Questions ?