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
   

   View Slide

2. React Native for Web
   

   View Slide

3. 11 August 2016
   React Native for Web? Did
   @horse_js come up with this?
   Pete Cooper
   @petecoop
   

   View Slide

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
   

   View Slide

5. Clément Devos
   @ClementDevos
   react-native-web be like…
   21 October 2016
   

   View Slide

6. It’s not that crazy. It works!
   

   View Slide

7. View Slide

8. React Native for Web let me relaunch a
   native app (6 months of work) on the web
   in under a day
   – David Ernst
   “
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. View Slide

12. View Slide

13. OK, but…
    

    View Slide

14. React: all about
    components
    

    View Slide

15. Originally by Cristiano Rastelli
    Separation of technologies Separation of concerns
    

    View Slide

16. View Slide

17. React DOM: the web
    is still difficult
    

    View Slide

18. Symptoms of an underpowered
    UI technology…
    

    View Slide

19. 1. Reliance on primitive
    abstractions
    

    View Slide

20. 
    
    
    
    
    

    View Slide

21. 2. No strict contract
    

    View Slide

22. 
    

    View Slide

23. 3. A lot of time spent reinventing
    expressive abstractions
    

    View Slide

24. • CSS frameworks
    
    • Right-to-left layout
    
    • Responding to gestures
    
    • Responding to layout
    
    • Text input
    
    • Focus management
    
    • …
    

    View Slide

25. CSS is particularly problematic
    

    View Slide

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
    

    View Slide

27. View Slide

28. It’s not because people don’t
    understand CSS
    

    View Slide

29. What about a web framework
    without DOM and CSS?
    

    View Slide

30. React Native:
    inspired by the web
    

    View Slide

31. React Native
    StyleSheet
    
    
    iOS Android
    

    View Slide

32. React Native has always been
    a web framework
    

    View Slide

33. 21 May 2016
    the idea behind react native is
    an experiment to figure out
    "web: the good parts"
    vjeux
    @vjeux
    

    View Slide

34. 21 May 2016
    react native is basically a browser
    that implements a subset of what
    the web supports
    vjeux
    @vjeux
    

    View Slide

35. React Native is easier and
    simpler than React DOM
    

    View Slide

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)
    “
    

    View Slide

37. Web Native
    React Native
    React Native for Web
    

    View Slide

38. Bringing React Native
    back to the web
    

    View Slide

39. React Native for Web
    StyleSheet
    
    
    Web
    React DOM
    CSS
    
    
    

    View Slide

40. StyleSheet: a subset of CSS
    

    View Slide

41. const styles = StyleSheet.create({
    heading: {
    color: '#fff',
    fontSize: 16
    },
    text: {
    marginTop: 20,
    margin: 10
    }
    })
    

    View Slide

42. // static styles
    
    // dynamic styles
    transform: [ { translateX } ]
    }} />
    // composing styles
    styles.container, this.props.style
    ]} />
    

    View Slide

43. const style = [
    {
    marginTop: 10
    },
    {
    margin: 0
    }
    ]
    => margin-top = 10px
    <br/>.a {<br/>margin-top: 10px;<br/>}<br/>.b {<br/>margin: 0;<br/>}<br/>
    => margin-top = 0px
    React Native styles CSS
    

    View Slide

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
    

    View Slide

45. View Slide

46. StyleSheet.create({
    one: {
    color: “#fff",
    margin-left: 10
    },
    two: {
    opacity: 0
    },
    three: {
    color: “#fff",
    opacity: 0
    }
    });
    <br/>.rn-1qtguxu { color: #fff }<br/>.rn-11wrixw { margin-left: 10px; }<br/>.rn-1272l3b { opacity: 0; }<br/>
    Source Generated
    

    View Slide

47. const Box = () =>
    
    const styles =
    StyleSheet.create({
    box: {
    margin: 0,
    }
    });
    <br/>.rn-1mnahxq { margin-top: 0px; }<br/>.rn-61z16t { margin-right: 0px; }<br/>.rn-p1pxzi { margin-bottom: 0px; }<br/>.rn-11wrixw { margin-left: 0px; }<br/>
    
    Input Output
    

    View Slide

48. const Box = () =>
    
    const styles =
    StyleSheet.create({
    box: {
    margin: 0,
    opacity: 0
    }
    });
    <br/>.rn-1mnahxq { margin-top: 0px; }<br/>.rn-61z16t { margin-right: 0px; }<br/>.rn-p1pxzi { margin-bottom: 0px; }<br/>.rn-11wrixw { margin-left: 0px; }<br/>.rn-1272l3b { opacity: 0; }<br/>
    
    Input Output
    

    View Slide

49. Before After
    Ruleset size
    

    View Slide

50. Before After
    Specificity graph
    

    View Slide

51. I18nManager.setPreferredLanguageRTL(true)
    

    View Slide

52. KB of CSS
    0
    25
    50
    75
    100
    Number of components
    1 10 20 30 40 50
    CSS Modules StyleSheet
    

    View Slide

53. View Slide

54. :hover -> onMouse*()
    @media -> matchMedia()
    @supports -> CSS.supports()
    Caveats
    

    View Slide

55. Accessibility
    

    View Slide

56. =>
    
    =>
    
    =>
    
    

    View Slide

57. View Slide

58. View Slide

59. Interoperability and
    escape hatches
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. // Video.web.js
    import { createDOMElement }
    from ‘react-native-web’
    const Video = (props) =>
    createDOMElement(‘video’, props);
    

    View Slide

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);
    

    View Slide

65. glitch.com/edit/#!/rnw
    

    View Slide

66. Universal
    components
    

    View Slide

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
    

    View Slide

68. View Slide

69. View Slide

70. View Slide

71. React Platform
    StyleSheet
    
    
    iOS Android
    Web
    Sketch VR ……
    

    View Slide

72. glitch.com/edit/#!/rnw
    npmjs.com/package/react-native-web
    npmjs.com/package/react-primitives
    npmjs.com/package/react-sketchapp
    

    View Slide