introduction to react native
TRANSCRIPT
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
