Slide 1
Slide 1 text
React Native for
web and beyond
Nicolas Gallagher
@necolas
Slide 2
Slide 2 text
React Native for Web
Slide 3
Slide 3 text
11 August 2016
React Native for Web? Did
@horse_js come up with this?
Pete Cooper
@petecoop
Slide 4
Slide 4 text
21 October 2015
Last night I found React Native
for Web. It's either really strong
satire or I don't understand
anything anymore.
Phil Nash
@philnash
Slide 5
Slide 5 text
Clément Devos
@ClementDevos
react-native-web be like…
21 October 2016
Slide 6
Slide 6 text
It’s not that crazy. It works!
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
React Native for Web let me relaunch a
native app (6 months of work) on the web
in under a day
– David Ernst
“
Slide 9
Slide 9 text
Major League Soccer
matchcenter.mlssoccer.com
vv
Here's where our Kona coffee
beans are grown on the Big Island
in Hawaii. Feast your eyes!
The Barista Bar
@baristabar
Tweet
27 RETWEETS 73 LIKES
Promoted
Slide 10
Slide 10 text
Twitter Lite
mobile.twitter.com
vv
Here's where our Kona coffee
beans are grown on the Big Island
in Hawaii. Feast your eyes!
The Barista Bar
@baristabar
Tweet
27 RETWEETS 73 LIKES
Promoted
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
OK, but…
Slide 14
Slide 14 text
React: all about
components
Slide 15
Slide 15 text
Originally by Cristiano Rastelli
Separation of technologies Separation of concerns
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
React DOM: the web
is still difficult
Slide 18
Slide 18 text
Symptoms of an underpowered
UI technology…
Slide 19
Slide 19 text
1. Reliance on primitive
abstractions
Slide 20
Slide 20 text
Slide 21
Slide 21 text
2. No strict contract
Slide 22
Slide 22 text
Slide 23
Slide 23 text
3. A lot of time spent reinventing
expressive abstractions
Slide 24
Slide 24 text
• CSS frameworks
• Right-to-left layout
• Responding to gestures
• Responding to layout
• Text input
• Focus management
• …
Slide 25
Slide 25 text
CSS is particularly problematic
Slide 26
Slide 26 text
Problems with CSS at scale
1. No local variables
2. Implicit dependencies
3. No dead code elimination
4. No code minification
5. No sharing of constants
6. Non-deterministic resolution
7. No isolation
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
It’s not because people don’t
understand CSS
Slide 29
Slide 29 text
What about a web framework
without DOM and CSS?
Slide 30
Slide 30 text
React Native:
inspired by the web
Slide 31
Slide 31 text
React Native
StyleSheet
iOS Android
Slide 32
Slide 32 text
React Native has always been
a web framework
Slide 33
Slide 33 text
21 May 2016
the idea behind react native is
an experiment to figure out
"web: the good parts"
vjeux
@vjeux
Slide 34
Slide 34 text
21 May 2016
react native is basically a browser
that implements a subset of what
the web supports
vjeux
@vjeux
Slide 35
Slide 35 text
React Native is easier and
simpler than React DOM
Slide 36
Slide 36 text
I hope that there are plans for further
unifying React Native and React for mobile
web…React Native seems like a great
place to start.
– Jordan Walke (creator of React)
“
Slide 37
Slide 37 text
Web Native
React Native
React Native for Web
Slide 38
Slide 38 text
Bringing React Native
back to the web
Slide 39
Slide 39 text
React Native for Web
StyleSheet
Web
React DOM
CSS
Slide 40
Slide 40 text
StyleSheet: a subset of CSS
Slide 41
Slide 41 text
const styles = StyleSheet.create({
heading: {
color: '#fff',
fontSize: 16
},
text: {
marginTop: 20,
margin: 10
}
})
Slide 42
Slide 42 text
// static styles
// dynamic styles
// composing styles
Slide 43
Slide 43 text
const style = [
{
marginTop: 10
},
{
margin: 0
}
]
=> margin-top = 10px
.a {
margin-top: 10px;
}
.b {
margin: 0;
}
=> margin-top = 0px
React Native styles CSS
Slide 44
Slide 44 text
StyleSheet on the web
1. No CSS reset needed
2. Automatic vendor prefixes
3. Good runtime performance
4. Generates optimized CSS
5. Support for RTL layouts
6. Support for pre-rendering
7. No selectors or media queries
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
StyleSheet.create({
one: {
color: “#fff",
margin-left: 10
},
two: {
opacity: 0
},
three: {
color: “#fff",
opacity: 0
}
});
.rn-1qtguxu { color: #fff }
.rn-11wrixw { margin-left: 10px; }
.rn-1272l3b { opacity: 0; }
Source Generated
Slide 47
Slide 47 text
const Box = () =>
const styles =
StyleSheet.create({
box: {
margin: 0,
}
});
.rn-1mnahxq { margin-top: 0px; }
.rn-61z16t { margin-right: 0px; }
.rn-p1pxzi { margin-bottom: 0px; }
.rn-11wrixw { margin-left: 0px; }
Input Output
Slide 48
Slide 48 text
const Box = () =>
const styles =
StyleSheet.create({
box: {
margin: 0,
opacity: 0
}
});
.rn-1mnahxq { margin-top: 0px; }
.rn-61z16t { margin-right: 0px; }
.rn-p1pxzi { margin-bottom: 0px; }
.rn-11wrixw { margin-left: 0px; }
.rn-1272l3b { opacity: 0; }
Input Output
Slide 49
Slide 49 text
Before After
Ruleset size
Slide 50
Slide 50 text
Before After
Specificity graph
Slide 51
Slide 51 text
I18nManager.setPreferredLanguageRTL(true)
Slide 52
Slide 52 text
KB of CSS
0
25
50
75
100
Number of components
1 10 20 30 40 50
CSS Modules StyleSheet
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
:hover -> onMouse*()
@media -> matchMedia()
@supports -> CSS.supports()
Caveats
Slide 55
Slide 55 text
Accessibility
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
Interoperability and
escape hatches
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
// Video.web.js
import { createDOMElement }
from ‘react-native-web’
const Video = (props) =>
createDOMElement(‘video’, props);
Slide 64
Slide 64 text
// CustomButton.web.js
import { createDOMElement }
from ‘react-native-web’
import RaisedButton
from ‘material-ui/RaisedButton’
// wrap with RN prop interface
const CustomButton = (props) =>
createDOMElement(RaisedButton, props);
Slide 65
Slide 65 text
glitch.com/edit/#!/rnw
Slide 66
Slide 66 text
Universal
components
Slide 67
Slide 67 text
enabling technology (noun): An invention or innovation, that
can be applied to drive radical change in the capabilities of a
user or culture. Enabling technologies are characterized by
rapid development of subsequent derivative technologies,
often in diverse fields. Equipment and/or methodology that,
alone or in combination with associated technologies,
provides the means to increase performance and capabilities
of the user, product or process
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
React Platform
StyleSheet
iOS Android
Web
Sketch VR ……
Slide 72
Slide 72 text
glitch.com/edit/#!/rnw
npmjs.com/package/react-native-web
npmjs.com/package/react-primitives
npmjs.com/package/react-sketchapp