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.

992c9c162c4c62ec0e2621b4f2206533?s=128

Nicolas Gallagher

August 24, 2017
Tweet

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!

  7. None
  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
  11. None
  12. None
  13. OK, but…

  14. React: all about components

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

  16. None
  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
  27. None
  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
  45. None
  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
  53. None
  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”>
  57. None
  58. None
  59. Interoperability and escape hatches

  60. None
  61. None
  62. None
  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
  68. None
  69. None
  70. None
  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