React Native

React Native for Android廖祜秋

唯有钱与美酒不可辜负

Make it better.

质有高低，境界不同。

Thanks.

廖祜秋 liaohuqiu_秋百万

Not only for Android.

Let’s start again.

React Native廖祜秋

A month ago …

Survey

• Node.js / NPM

• JavaScript

• React Native

• React

Content

• React && React Native

• Thinking

• Performance

• JavaScript

• Deep into React Native

• Quick Start

• Hot Deployment

• Why React Native

JavaScript Environment

• JSC: iOS simulators and devices

• V8: Chrome debugging / Debug Server

• JSC: Android emulators and devices

ES6

JSX Synax

• Looks similar to XML

• A JavaScript syntax extension

• NOT a part of the ECMAScript spec

JSX Synax

https://facebook.github.io/jsx/

Node.js / NPM

Full stack development

React

• Declarative

• Virtual DOM

• Simple: state / render

Render

• Data changed: setState()

• Initialized: getIinitialState()

JavaScript & React

React Native

Quick Start

Quick Start

Debug Server

Run Demo

• Android …

• iOS: open project in Xcode, then run

Run Demo for Android

• devices: 5.0 above, adb reverse port

• simulators

• devices: set Debug server

Deliver Package

• Android: gradle plugin

• iOS / Android: react-native bundle(since 0.12.0)

Examples

Why React Native

Why React Native

• Acceptable performance

• Native look and feel

• Code reuse

• Fast development

• Fast deployment (Still some way to go for Android)

Deep into React Native

Deep into React Native

• JavaScriptModule

• ReactBridge

• NativeModule

• Native UI Components

ReactBridge

ReactBridge

• callFunction(int moduleId, int methodId, NativeArray arguments)

• setGlobalVariable(String propertyName, String data)

Module tables

• NativeModule

• JavaScriptModule

JavaScriptModule

NativeModule

NativeModule

Module tables

• From JS to Native: MessageQueue

• From Native to JS

• Send touch event to JS, JS process UI

Reuse of current code

• Module

• UI

Hot Deployment

Update React Native apps, instantly.Only for iOS currently.

Android ?

Performance

A compelling reason for using React Native instead of WebView-based tools is to achieve 60 FPS and a native look & feel to your apps.

Performance

Sources of performance problems.

Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time

• Development mode (dev=true)

• Slow navigator transitions

• ListView initial rendering is too slow or scroll performance is bad for large lists

Considerations

• Test on both platforms

• Prone to human error

• Inevitable consequence

Working across separate iOS and Android code repositories is difficult.

Even with lots of tools and automation.

Code repositories

What do we have?

WeApp

WeApp

• CSS

• iOS and Android implementation

• Testing

What we learn?

Shipped native app on two platforms, with native look and feel.

What we learn

3 -> 7

What we learn

Not all of the engineers were familiar with React when they joined the team.

Yet they built an iOS app with native look and feel in just five months.

What we learn

And after an additional three months, we released the Android version of the app.

What we learn

What we learn

• Product engineer: full stack

• Creativity

• Smart and hard working

Q & A

What we learn

廖祜秋 liaohuqiu_秋百万Q & A