React Native& the Future of Web Technology

Mark Wilcox - Senior Analyst & Technology Lead VisionMobile

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

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

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

Can Facebook be trusted?

Closed

Can Facebook be trusted?

It’s all about incentives!

Facebook didn’t use Parse for their core apps

Their incentives were not aligned with Parse users

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

Other established companies are using it too

Airbnb Baidu QQ

Soundcloud Discord USwitch

So what is React Native?

MyComponent = React.createClass({

render: function () {

return <div>

<span>Hello World</span>

</div>

}});

React on the web: Components

So what is React Native?

MyComponent = React.createClass({

render: function () {

return <View>

<Text>Hello World</Text>

</View>

}});

React Native: Components

Platform native UI components

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

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

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

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

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)

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

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

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

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”…

JavaScript is “special”

"" == 0 //true - empty string is coerced to Number 00 == "0" //true - Number 0 is coerced to String "0""" == "0" //false - operands are both String so no coercion

0.1 + 0.2 === 0.3 //falsevar a = 0 * 1; // This simple sum gives 0var b = 0 * -1; // This simple sum gives -0a === b; //true: 0 equals -01/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 th

is

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

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?

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

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)

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

Questions?