Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native for web and beyond

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.

Nicolas Gallagher

August 24, 2017
Tweet

More Decks by Nicolas Gallagher

Other Decks in Programming

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