React Native for web and beyond

React Native is transforming from a React framework for building native mobile apps, into a framework for creating components that can also render to the web, to VR, and even previously ignored targets such as design tools. This has the potential to profoundly change how we design and develop React apps.

Transcript

1. React Native for
 web and beyond Nicolas Gallagher @necolas
2. React Native for Web
3. 11 August 2016 React Native for Web? Did @horse_js come up with this? Pete Cooper @petecoop
4. 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
5. Clément Devos @ClementDevos react-native-web be like… 21 October 2016
6. It’s not that crazy. It works!
8. React Native for Web let me relaunch a native app (6 months of work) on the web in under a day – David Ernst “
9. 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
10. 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
13. OK, but…
14. React: all about components
15. Originally by Cristiano Rastelli Separation of technologies Separation of concerns
17. React DOM: the web is still difficult
18. Symptoms of an underpowered UI technology…
19. 1. Reliance on primitive abstractions
20. <div> <span> <img> <input> <button>
21. 2. No strict contract
22. <div class=“could-do-anything”>
23. 3. A lot of time spent reinventing expressive abstractions
24. • CSS frameworks • Right-to-left layout • Responding to gestures • Responding to layout • Text input • Focus management • …
25. CSS is particularly problematic
26. 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
28. It’s not because people don’t understand CSS
29. What about a web framework without DOM and CSS?
30. React Native: inspired by the web
31. React Native StyleSheet <View> <Text> iOS Android
32. React Native has always been a web framework
33. 21 May 2016 the idea behind react native is an experiment to figure out "web: the good parts" vjeux @vjeux
34. 21 May 2016 react native is basically a browser that implements a subset of what the web supports vjeux @vjeux
35. React Native is easier and simpler than React DOM
36. 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) “
37. Web Native React Native React Native for Web
38. Bringing React Native back to the web
39. React Native for Web StyleSheet <View> <Text> Web React DOM CSS <div> <span>
40. StyleSheet: a subset of CSS
41. const styles = StyleSheet.create({ heading: { color: '#fff', fontSize: 16 }, text: { marginTop: 20, margin: 10 } })
42. // static styles <View style={styles.view} /> // dynamic styles <View style={{ transform: [ { translateX } ] }} /> // composing styles <View style={[ styles.container, this.props.style ]} />
43. const style = [ { marginTop: 10 }, { margin: 0 } ] => margin-top = 10px <style> .a { margin-top: 10px; } .b { margin: 0; } </style> => margin-top = 0px React Native styles CSS
44. 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
46. StyleSheet.create({ one: { color: “#fff", margin-left: 10 }, two: { opacity: 0 }, three: { color: “#fff", opacity: 0 } }); <style> .rn-1qtguxu { color: #fff } .rn-11wrixw { margin-left: 10px; } .rn-1272l3b { opacity: 0; } </style> Source Generated
47. const Box = () => <View style={styles.box} /> const styles = StyleSheet.create({ box: { margin: 0, } }); <style> .rn-1mnahxq { margin-top: 0px; } .rn-61z16t { margin-right: 0px; } .rn-p1pxzi { margin-bottom: 0px; } .rn-11wrixw { margin-left: 0px; } </style> <div class="rn-156q2ks rn-61z16t rn-p1pxzi rn-11wrixw"> Input Output
48. const Box = () => <View style={styles.box} /> const styles = StyleSheet.create({ box: { margin: 0, opacity: 0 } }); <style> .rn-1mnahxq { margin-top: 0px; } .rn-61z16t { margin-right: 0px; } .rn-p1pxzi { margin-bottom: 0px; } .rn-11wrixw { margin-left: 0px; } .rn-1272l3b { opacity: 0; } </style> <div class="rn-156q2ks rn-61z16t rn-p1pxzi rn-11wrixw rn-1272l3b"> Input Output
49. Before After Ruleset size
50. Before After Specificity graph
51. I18nManager.setPreferredLanguageRTL(true)
52. KB of CSS 0 25 50 75 100 Number of components 1 10 20 30 40 50 CSS Modules StyleSheet
54. :hover -> onMouse*() @media -> matchMedia() @supports -> CSS.supports() Caveats
55. Accessibility
56. <View accessibilityTraits=“main”> => <main role=“main”> <Text accessibilityTraits=“link” href=“/”> => <a href=“/” role=“link”> <Touchable disabled={true}> => <div aria-disabled=“true” tabindex=“-1”>
59. Interoperability and escape hatches
63. // Video.web.js import { createDOMElement } from ‘react-native-web’ const Video = (props) => createDOMElement(‘video’, props);
64. // 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);
65. glitch.com/edit/#!/rnw
66. Universal components
67. 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
71. React Platform StyleSheet <View> <Text> iOS Android Web Sketch VR ……
72. glitch.com/edit/#!/rnw npmjs.com/package/react-native-web npmjs.com/package/react-primitives npmjs.com/package/react-sketchapp