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
370
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
100
ndb
spicyj
0
130
css
spicyj
2
850
Other Decks in Technology
See All in Technology
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
190
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
250
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
3
480
OSSで50の競合と戦うためにやったこと
yamadashy
3
990
組織全員で向き合うAI Readyなデータ利活用
gappy50
1
560
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
serverless team topology
_kensh
3
230
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
330
Retrospectiveを振り返ろう
nakasho
0
110
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
750
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
900
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
For a Future-Friendly Web
brad_frost
180
10k
Automating Front-end Workflow
addyosmani
1371
200k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Fireside Chat
paigeccino
41
3.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
It's Worth the Effort
3n
187
28k
We Have a Design System, Now What?
morganepeng
53
7.8k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Context Engineering - Making Every Token Count
addyosmani
8
300
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.