SlideShare a Scribd company logo
React Native
introduction
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
State
Your
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 changes
Animations
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

More Related Content

PDF
Intro To React Native
PDF
Introduction to react native
PDF
Getting Started with React Native (and should I use it at all?)
PDF
Introduction to React Native & Rendering Charts / Graphs
PPTX
React Native for ReactJS Devs
PDF
Introduction to React Native
PDF
When to (use / not use) React Native.
PPTX
Intro To React Native
Introduction to react native
Getting Started with React Native (and should I use it at all?)
Introduction to React Native & Rendering Charts / Graphs
React Native for ReactJS Devs
Introduction to React Native
When to (use / not use) React Native.

What's hot (20)

PDF
React-Native for multi-platform mobile applications @ Codemotion Rome 2017
PDF
React Native custom components
PDF
Some experiences building an Android app with React Native & Redux
PDF
A tour of React Native
PPTX
SONY BBS - React Native
PDF
React Native for multi-platform mobile applications - Matteo Manchi - Codemo...
PPTX
How native is React Native? | React Native vs Native App Development
PDF
Angular 2 overview
PPT
PDF
React Native - Getting Started
PDF
Introduction to React Native
PPTX
PPTX
PPTX
Introduction to angular 2
PDF
Getting Started with the Angular 2 CLI
PPTX
Angular 2
PDF
React vs angular (mobile first battle)
PDF
What is Angular version 4?
PDF
Angular 2 Essential Training
PDF
The Gist of React Native
React-Native for multi-platform mobile applications @ Codemotion Rome 2017
React Native custom components
Some experiences building an Android app with React Native & Redux
A tour of React Native
SONY BBS - React Native
React Native for multi-platform mobile applications - Matteo Manchi - Codemo...
How native is React Native? | React Native vs Native App Development
Angular 2 overview
React Native - Getting Started
Introduction to React Native
Introduction to angular 2
Getting Started with the Angular 2 CLI
Angular 2
React vs angular (mobile first battle)
What is Angular version 4?
Angular 2 Essential Training
The Gist of React Native
Ad

Viewers also liked (20)

PDF
Intro to react native
PPTX
React Native
PDF
React native - What, Why, How?
PDF
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
PDF
React Native 入門
PDF
Optimizing React Native views for pre-animation
PDF
Pieter De Baets - An introduction to React Native
PDF
Introduction to React Native & Redux
PDF
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
PDF
What's This React Native Thing I Keep Hearing About?
PDF
react-native
PDF
A Closer Look At React Native
PDF
Hardware Acceleration in WebKit
PDF
JavaScript, React Native and Performance at react-europe 2016
PDF
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
PDF
React Native Internals
PDF
An introduction to React.js
PDF
An Introduction to ReactJS
PDF
Understanding Webkit Rendering
PPTX
Reactjs
Intro to react native
React Native
React native - What, Why, How?
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native 入門
Optimizing React Native views for pre-animation
Pieter De Baets - An introduction to React Native
Introduction to React Native & Redux
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
What's This React Native Thing I Keep Hearing About?
react-native
A Closer Look At React Native
Hardware Acceleration in WebKit
JavaScript, React Native and Performance at react-europe 2016
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
React Native Internals
An introduction to React.js
An Introduction to ReactJS
Understanding Webkit Rendering
Reactjs
Ad

Similar to Introduction to React Native (20)

PPTX
React native introduction (Mobile Warsaw)
PDF
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
PDF
Introduzione a React Native - Facebook Developer Circle Rome
PPTX
future_of_react_native_in_2024.pptx
PDF
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
PDF
React native: building native iOS apps with javascript
PPTX
React native
PDF
future_of_react_native_in_2024.pdf
PDF
An Introduction to ReactNative
PPTX
9 reasons why programmers should learn react native
PDF
Build a real app with react native
PPTX
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
PDF
Developing Apps With React Native
PPTX
React Native - Build Native Mobile App
PPTX
Getting Started With React Native Presntation
PPTX
Session 01_02-Introduction to React Native .pptx
PDF
React js vs react native a comparative analysis
PPTX
A Guide to React Native App Development
PDF
"React Native" by Vanessa Leo e Roberto Brogi
PDF
What Is React Native? Guide to Mobile App Development
React native introduction (Mobile Warsaw)
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
Introduzione a React Native - Facebook Developer Circle Rome
future_of_react_native_in_2024.pptx
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
React native: building native iOS apps with javascript
React native
future_of_react_native_in_2024.pdf
An Introduction to ReactNative
9 reasons why programmers should learn react native
Build a real app with react native
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
Developing Apps With React Native
React Native - Build Native Mobile App
Getting Started With React Native Presntation
Session 01_02-Introduction to React Native .pptx
React js vs react native a comparative analysis
A Guide to React Native App Development
"React Native" by Vanessa Leo e Roberto Brogi
What Is React Native? Guide to Mobile App Development

Introduction to React Native

  • 2. About the author ● CTO @ Polidea ● Founder of Mobile Warsaw ● Founder and organizer of mceconf.com 2
  • 3. ● 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
  • 4. 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
  • 5. ● 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
  • 6. Components - fundamental building blocks ● state machine ● properties ● render method (JSX) ● flexbox css-like style ● composable 6
  • 8. Rethink established best practicesTM Component Example 8
  • 9. Everything* is javascript ● code is javascript ● styles are … javascript ● views are … javascript ● layout calculation is … javascript 9
  • 10. We all love Javascript 10
  • 11. 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
  • 12. 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]} />
  • 13. 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
  • 14. Why react is different? 14
  • 16. States and Virtual View Hierarchy Component State Your code Render (in javascript) View Virtual View Hierarchy Javascript objects Image Image Text React Build native views (native code) 16
  • 17. State changes Component State: {} Component State: {workshops: {...} } Update State Reconciliation Incremental changes Animations Javascript Native code 17
  • 18. Incremental updates / animations Update Create 18
  • 19. Is react fast (enough)? 19
  • 20. 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
  • 21. Animations ● LayoutAnimations - simple ● Animated - fine grained control ○ Value animations still in javascript ○ Will be native soon ○ Declarative 21
  • 24. 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
  • 25. ● 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
  • 26. Developer’s toolchain goodies ● Fast packager ● Verbose error diagnostic ● Element Inspections ● Profiling ● JS Tests ● Integration tests and Snapshot tests (iOS for now) ● UIExplorer 26
  • 33. Live AppStore application update - AppHub.io (iOS for now) 33
  • 34. Facebook goals (what they told) ● Learn once - write anywhere ● No “cross-platform app framework” ● Less complex apps with React 34
  • 35. ● 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
  • 36. 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