Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React: What Lies Ahead
Search
spicyj
February 22, 2016
Technology
6
360
React: What Lies Ahead
React.js Conf 2016
spicyj
February 22, 2016
Tweet
Share
More Decks by spicyj
See All by spicyj
Creating interactive learning interfaces at Khan Academy
spicyj
0
110
Understanding state in React
spicyj
1
99
ndb
spicyj
0
120
css
spicyj
2
830
Other Decks in Technology
See All in Technology
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
2
5.5k
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
280
GitHub Copilot の概要
tomokusaba
1
150
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
4
280
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
5.9k
PO初心者が考えた ”POらしさ”
nb_rady
0
110
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
8.2k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
2.3k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
1
150
ハッカソン by 生成AIハッカソンvol.05
1ftseabass
PRO
0
160
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
320
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
150
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
How STYLIGHT went responsive
nonsquared
100
5.6k
Navigating Team Friction
lara
187
15k
Agile that works and the tools we love
rasmusluckow
329
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why Our Code Smells
bkeepers
PRO
337
57k
Designing Experiences People Love
moore
142
24k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
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 <Animated.View --style={{width:-this.state.width}}-/>- 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
None
None
Getting There
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
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.