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
100
ndb
spicyj
0
120
css
spicyj
2
840
Other Decks in Technology
See All in Technology
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
180
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Connect 100+を支える技術
kanyamaguc
0
200
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
130
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
160
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
16k
PO初心者が考えた ”POらしさ”
nb_rady
0
210
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.6k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
150
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Making Projects Easy
brettharned
116
6.3k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Building Adaptive Systems
keathley
43
2.7k
The Language of Interfaces
destraynor
158
25k
Producing Creativity
orderedlist
PRO
346
40k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Become a Pro
speakerdeck
PRO
29
5.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
BBQ
matthewcrist
89
9.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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.