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. 11 August 2016 React Native for Web? Did @horse_js come

    up with this? Pete Cooper @petecoop
  2. 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
  3. React Native for Web let me relaunch a native app

    (6 months of work) on the web in under a day – David Ernst “
  4. 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
  5. 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
  6. • CSS frameworks • Right-to-left layout • Responding to gestures

    • Responding to layout • Text input • Focus management • …
  7. 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
  8. 21 May 2016 the idea behind react native is an

    experiment to figure out "web: the good parts" vjeux @vjeux
  9. 21 May 2016 react native is basically a browser that

    implements a subset of what the web supports vjeux @vjeux
  10. 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) “
  11. // static styles <View style={styles.view} /> // dynamic styles <View

    style={{ transform: [ { translateX } ] }} /> // composing styles <View style={[ styles.container, this.props.style ]} />
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. KB of CSS 0 25 50 75 100 Number of

    components 1 10 20 30 40 50 CSS Modules StyleSheet
  18. <View accessibilityTraits=“main”> => <main role=“main”> <Text accessibilityTraits=“link” href=“/”> => <a

    href=“/” role=“link”> <Touchable disabled={true}> => <div aria-disabled=“true” tabindex=“-1”>
  19. // 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);
  20. 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