What's all the hype about React Native? What is it? How does it work? Why does it matter and what clues does it give us about the future of web development? Did you know there's a React Native for the Web? What's that all about? It can't be all good, what's wrong with it? Where should you go to find out more?

1. React Native
& the Future of Web Technology
Mark Wilcox - Senior Analyst & Technology Lead
VisionMobile

2. What’s all the hype about React Native?
React
0
10000
20000
30000
40000
50000
60000
1
21
41
61
81
101
121
141
161
181
201
221
241
261
281
301
321
341
361
381
401
421
441
461
481
501
521
541
561
581
601
621
641
661
681
701
721
741
761
781
801
821
841
861
881
901
921
941
961
981
1001
1021
1041
1061
1081
1101
1121
1141
1161
1181
1201
1221
1241
React Native
GitHub
Stars

3. What’s all the hype about React Native?
• React is the 6th most starred project on GitHub (~52k stars)
• React Native is the 14th most starred (~38k stars)
• React Native is the fastest growing open source project in
terms of both stars and contributors (>1000 in 18 months)
• Microsoft has made a port to the Universal Window Platform
• Canonical has made a port to Ubuntu
• Facebook just launched a version for Oculus VR

4. Is the hype justified?
• Facebook engineers in a Reddit AMA have
said they aim to replace native development
• A former Apple UIKit engineer has said he
believes Facebook’s model is much better

5. Can Facebook be trusted?
Closed

6. Can Facebook be trusted?
It’s all about incentives!

7. Facebook didn’t use Parse for their core apps
Their incentives were not aligned with Parse users

8. Facebook use React Native extensively in production
• They are deeply committed to React, it’s what most of their
web apps are built with
• React Native was used to build Facebook Ad Manager
• It was used for much of Facebook Groups
• Following the success of these early experiments, Facebook
is growing their React Native team and is deploying new
features with it on the main app and Instagram

9. Other established companies are using it too
Airbnb Baidu QQ
Soundcloud Discord USwitch

10. So what is React Native?
MyComponent = React.createClass({
render: function () {
return <div>
<span>Hello World</span>
</div>
}});
React on the web: Components

11. So what is React Native?
MyComponent = React.createClass({
render: function () {
return <View>
<Text>Hello World</Text>
</View>
}});
React Native: Components
Platform native UI
components

12. So what is React Native?
MyComponent = React.createClass({
onClick: function () { alert("You clicked me")},
render: function () {
return <div>
<span onClick={this.onClick}>Hello</span>
</div>
}});
React on the web: Events

13. So what is React Native?
MyComponent = React.createClass({
onPress: function () { console.log("You pressed me")},
render: function () {
return <View>
<TouchableHighlight onPress={this.onPress}>
<Text>Hello</Text>
</TouchableHighlight>
</View>
}});
React Native: Events
Platform native
touch event
handler

14. So what is React Native?
MyComponent = React.createClass({
render: function () {
return <div class={divClasses}>
<span class={spanClasses}>Hello</Text>
</div>
}});
React on the web: Styling
Classes defined
in external CSS
file

15. So what is React Native?
MyComponent = React.createClass({
render: function () {
return <View style={styles.container}>
<Text style={styles.myStyle}>Hello</Text>
</View>
}});
React Native: Styling (1/3)
Styles defined
in JavaScript

16. So what is React Native?
var styles = StyleSheet.create({
myStyle: { color: 'red', fontSize: 12},
anotherStyle: { color: 'yellow', padding: 10, marginTop: 5}
container: {flex: 1, flexDirection: 'row',
justifyContent: 'center'}
});
React Native: Styling (2/3)

17. So what is React Native?
React Native: Styling (3/3)
• No CSS files, styles are defined in JavaScript
• Usually defined in the same file as the component
• Layout only via a (large) subset of Flexbox

18. How does it work?
• JavaScript runs in JavaScriptCore on iOS and Android
• All JavaScript logic and layout runs on a background thread
• Calls to native methods are batched and sent over a bridge
to native code (Objective-C on iOS, C++/Java on Android)
• The main thread runs (almost) only native drawing code,
enabling smooth 60fps animations and scrolling
Native
(Obj-C or Java/C++)
JS VM Bridge

19. How does it work?
• There’s a good set of built-in components
• There’s a declarative animation framework in JavaScript
• Developers with native coding skills can create their own
native components (separate versions for iOS & Android)
• Native modules can also be created for accessing any
native API, or third party native library
• Community modules can be published on npm and
registered on https://react.parts

20. Why does it matter?
• Developers increasingly need to be able to work on multiple
platforms and form factors:
• There’s too much to learn
• Maintaining multiple codebases is complex and expensive
• Facebook’s solution to this for their own development teams
could work for everyone - “Learn once, write everywhere”
• Iteration speed is really important
• JavaScript is “special”…

21. JavaScript is “special”
"" == 0 //true - empty string is coerced to Number 0
0 == "0" //true - Number 0 is coerced to String "0"
"" == "0" //false - operands are both String so no coercion
0.1 + 0.2 === 0.3 //false
var a = 0 * 1; // This simple sum gives 0
var b = 0 * -1; // This simple sum gives -0
a === b; //true: 0 equals -0
1/a === 1/b; //false: Infinity does not equal -Infinity
for(var i=0; i<10; i++) {
console.log(i);
}
var i;
console.log(i); // 10Not this

22. JavaScript is “special”
• JavaScript, and transpiled to JavaScript languages, are the
only choice on the web
• JavaScript is one of very few languages you can run on
almost all platforms outside the browser
• JavaScript is the only language you can download to iOS
devices to update apps outside the App Store
• So… JavaScript is the best suited language for iterating
quickly across multiple platforms - good job it evolving now

23. The future of web technology?
• Some of the React Native team have described what they’re
doing as building polyfills for web standards that haven’t
been fully developed yet
• This fits with the way other areas of web technology evolve
now, like JavaScript itself and Babel, or TypeScript / Flow
• Despite suggestions that React and Web Components are
competitors, they are complementary and compatible
• If we could create low-level components for mobile web apps
that were not tied to the DOM, what would they look like?

24. React Native for Web!
• Wait! Surely we already have React for the web?
• The low-level building blocks for React & React Native apps
are different, so a implementing the React Native primitives
helps make code portable, but…
• Twitter engineers weren’t actively deploying React Native
apps when they created React Native for Web
• They found that React Native’s consistent approach to style,
animation, touch, viewport adaptation, accessibility, themes &
RTL layout helped solve problems in their web apps

25. What’s wrong with React Native?
• Nothing’s perfect
• React Native is not great for teams with no native developers
(or people willing to learn) yet
• React Native is still evolving very fast and it can be quite a lot
of effort to keep up with the latest changes
• There are lots of 3rd party modules of poor quality - it’s not
easy to tell until you start to use them, unless you’re an
experienced native developer
• There are issues with animations synced with system
animations (e.g. keyboard sliding in from the bottom)

26. Where to find out more
• https://facebook.github.io/react-native/
• http://www.reactnative.com
• https://www.smashingmagazine.com/2016/04/consider-react-
native-mobile-app/
• https://react.parts/native?search=tree

27. Questions?