Upload
huqiu-liao
View
827
Download
0
Embed Size (px)
Citation preview
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