React Nativeintroduction

1

About the author

● CTO @ Polidea

● Founder of Mobile Warsaw

● Founder and organizer of mceconf.com

2

● not a Hybrid App framework

● no HTML/DOM, CSS*

● no cross-platform app tool

● no application architecture framework

● no, you cannot use jquery plugins with it*

What RN is not

3

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

What RN is

Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.

4

● native UI components● fully asynchronous UI● no two-way data-binding● no application architecture lock-in● great for modern patterns

○ CQRS (Domain Driven Design and Event Sourcing)○ Flux (Facebook pattern)

No architecture lock-in

5

Components - fundamental building blocks

● state machine

● properties

● render method (JSX)

● flexbox css-like style

● composable

6

Component demo

7

Rethink established best practicesTM

Component Example

8

Everything* is javascript

● code is javascript

● styles are … javascript

● views are … javascript

● layout calculation is … javascript

9

We all love Javascript

10

JSX example

var app = <Nav color="blue"> <Profile>click</Profile> </Nav>

var Nav, Profile;var app = React.createElement( Nav, {color:"blue"}, React.createElement(Profile, null, "click"));

11

Styles example

var styles = StyleSheet.create({

base: {

width: 38,

height: 38,

},

bckg: {

backgroundColor: '#222222',

},

active: {

borderWidth: 2,

borderColor: '#00ff00',

},

});

12

<Text style={styles.base} />

<View style={styles.bckg} />

<View style={[styles.base, styles.bckg]} />

<View style={[styles.base,

this.state.active && styles.active]} />

Not your grand-father’s javascript

● use ‘strict’

● Runtime: JavascriptCore/V8

● Node 4.0.0 : Node.js + io.js converged

● (some) ES6 + ES7: Babel transpiler

● @flow - compile time - static type check

13

Why react is different?

14

Application demo

15

States and Virtual View Hierarchy

Component

StateYour code

Render(in javascript)

View

Virtual View Hierarchy Javascript objects

Image

Image

Text

React

Build native views(native code)

16

State changes

Component

State: {}

Component

State: {workshops: {...} }Update State

Reconciliation

Incremental changesAnimations

Javascript

Native code

17

Incremental updates / animations

Update

Create

18

Is react fast (enough)?

19

Native/Javascript bridge

● Javascript runs in non-UI thread● Asynchronous, serializable communication● Batching requests● Lots of optimisations● More potential optimisations in the future● Flexible threading model

20

Animations

● LayoutAnimations - simple

● Animated - fine grained control ○ Value animations still in javascript

○ Will be native soon

○ Declarative

21

Animation example

22

Developers first

23

Integration with native code

● Native APIs: iOS/Android

● Native UI components: iOS/Android

● Direct Properties access: iOS/Android (?)

● Embed RN view in Native app: iOS for now

24

● Intellij Idea/Webstorm with JSX Harmony

● Live Reloads

● Support for debugging via Chrome tools

● React Chrome extension

● Modify code in debugger

Developer’s toolchain - web-developer’s like

25

Developer’s toolchain goodies

● Fast packager● Verbose error diagnostic● Element Inspections● Profiling● JS Tests● Integration tests and Snapshot tests (iOS for now)● UIExplorer

26

Deployment options

27

Internal Architecture

28

Standalone app

29

Development

30

Debugging

31

Remote server

32

Live AppStore application update - AppHub.io (iOS for now)

33

Facebook goals (what they told)

● Learn once - write anywhere

● No “cross-platform app framework”

● Less complex apps with React

34

● A lot of common code shared

● Reuse of existing libraries

● Built-in cross-platform support (soon)

● Dynamic app updates (A/B testing)

Facebook achievements

35

Is it ready yet?

● Still changing fast● Some small issues with performance● Needs verification with big application● (but Facebook made AdsManager)● Some components are beta● A number of community components● Slowly growing community ● “Distributed” documentation

36

37

polidea.com, jarek.potiuk@polidea.com, jobs@polidea.com

Q & A