React: What Lies Ahead Ben Alpert 

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

UX: User Experience 

1. Animations Helpful for spatial reasoning - this.state-=-{width:-new-Animated.Value(0.0)};
 Animated
 --.spring(this.state.width,-{toValue:-120.0})
 --.start(); 

2. Gestures Maps: pan, pinch, tap, double tap,
 press and hold Can’t build this with browser events Goal: Simple component API,
 pure JS 

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 

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 

DX:
 Developer Experience 

Focusing on developer experience means devs can build apps faster and leads to higher-quality apps. 

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 

2. Devtools Inspector for Chrome/Firefox (react-devtools) 

2. Devtools Inspector for Chrome/Firefox (react-devtools) Hot loading (react-transform-hmr) IDE support (nuclide, deco) More like this, please! 

3. Data management React setState Flux/Redux Relay Goal: Combine best of three, with easy setup
 and code reuse 

No content

No content

Getting There 

React today 0.14 now, prod-ready and stable since 2013 React 15.0 RC next week DOM: Full SVG support, no text wrappers Internal refactors: No more React IDs, 10% faster 

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 

Help us keep building tools
 for making great apps. Thanks.