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
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.9k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
440
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
AWS認定を取る中で感じたこと
siromi
1
190
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
510
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.8k
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
150
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Navigating Team Friction
lara
187
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building an army of robots
kneath
306
45k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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.