REACT NATIVEMobile Talks 2016Julia Vishnevsky

AGENDA➤ ReactJs➤ Intro to React Native➤ Native VS React➤ Pros & Cons➤ Demo➤ Android

REACT.JS➤ JavaScript library for creating user interfaces ➤ Open source➤ Maintained by Facebook, Instagram and the

community➤ Expresses the state of your data➤ Similar in concept to Angular.Js & Knockout.Js

REACT NATIVE➤ A framework ➤ Lets you build native iOS applications with JavaScript➤ "Learn once, write anywhere”➤ Wraps existing native UI controls➤ Implements the UI via JSX

JSX➤ Enhanced JS semantics➤ XML-like syntax➤ Requires a “Transpiler”➤ JSX is optional for using React

WHY NATIVE DEVELOPMENT IS HARDER THAN WEB➤ Learning curve➤ Slow development cycle➤ Slow deployment cycle➤ Harder to debug➤ Separate platform teams to build the same product

REACT COME UP WITH A SOLUTIONProblem Solution

Development cycle Instant reload No compilation

Deployment cycle Downloads updates OTA without resubmission

Learning Curve Consistant tooling & APIs

Separate platform teams Shared skill-set

Hard to debug Browser based debugging tools

PROS➤ Native experience & performance➤ Consistent with the platform➤ Complex gestures & animations➤ Leverage your existing skills➤ Code sharing➤ Extensible➤ Can work with existing applications

CONS & LIMITATIONS ➤ You need a Mac➤ Custom controls require implementation➤ CSS support➤ Abstraction

PREREQUISITES➤ Mac & Xcode➤ Js IDE➤ Homebrew➤ Watchman➤ React native CLI

Now you can init a new React project using the CLI

COMPONENTS➤ React Native components are wrappers around native

UI components

React Web

View Div

Text Span

Image Img

TextInput Input

COMPONENTSvar React = require('react-native');var { Image, Text View} = React;

var MyCell = React.createClass({ render: function() { return

( <View> <Image source={getImageSource()} /> <Text numberOfLines={2}> Some Text </Text></View>)

}});

DEMO➤ Compilation➤ Live reload trigger➤ Debug

RESOURCES➤ https://github.com/facebook/react-native.git➤ Example projects➤ Documentation➤ Tutorials

ANDROID➤ Up to 90% code reuse between iOS and Android➤ Fairly new