React: What Lies Ahead

React.js Conf 2016

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
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.