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

React: What Lies Ahead

5a6ea2485c7fc9b8eb0867ba6a3d40af?s=47 spicyj
February 22, 2016

React: What Lies Ahead

React.js Conf 2016

5a6ea2485c7fc9b8eb0867ba6a3d40af?s=128

spicyj

February 22, 2016
Tweet

Transcript

  1. React: What Lies Ahead Ben Alpert

  2. How can React help make
 great apps? UX and DX.

  3. UX: User Experience

  4. 1. Animations Helpful for spatial reasoning <Animated.View
 --style={{width:-this.state.width}}-/>- this.state-=-{width:-new-Animated.Value(0.0)};
 Animated


    --.spring(this.state.width,-{toValue:-120.0})
 --.start();
  5. 2. Gestures Maps: pan, pinch, tap, double tap,
 press and

    hold Can’t build this with browser events Goal: Simple component API,
 pure JS
  6. 3. Performance: Making lists fast Windowing: Only render what’s on

    screen Render in chunks: Break up rendering to avoid jank Layout: Avoid unnecessary reflows
  7. What if layout was done in React? Layout information available

    in render() Avoids unnecessary reflows Makes windowing simpler Skip creation of layout-only views Easily build new layout primitives
  8. DX:
 Developer Experience

  9. Focusing on developer experience means devs can build apps faster

    and leads to higher-quality apps.
  10. 1. New project experience Need to set up node, npm,

    gulp, webpack, babel $-vim-app.js
 $-react-run-GGplatform=web-app.js- Goal: Quickly prototype with one file, then
 grow app slowly over time
  11. 2. Devtools Inspector for Chrome/Firefox (react-devtools)

  12. 2. Devtools Inspector for Chrome/Firefox (react-devtools) Hot loading (react-transform-hmr) IDE

    support (nuclide, deco) More like this, please!
  13. 3. Data management React setState Flux/Redux Relay Goal: Combine best

    of three, with easy setup
 and code reuse
  14. None
  15. None
  16. Getting There

  17. React today 0.14 now, prod-ready and stable since 2013 React

    15.0 RC next week DOM: Full SVG support, no <span> text wrappers Internal refactors: No more React IDs, 10% faster
  18. React is a growing community 300 react, 600 react-native committers

    in 2015 36,000 GitHub stars 225,000 Chrome users with react-devtools installed Projects: redux, material-ui, react-router, enzyme
  19. Help us keep building tools
 for making great apps. Thanks.