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
OpenJDKエコシステムと開発中の機能を紹介 2025夏版
chiroito
1
1.1k
Digitization部 紹介資料
sansan33
PRO
1
4k
Flutterアプリを⾃然⾔語で操作する
yukisakai1225
0
210
AIエージェントのフレームワークを見るときの個人的注目ポイント
os1ma
1
320
プロジェクトマネージャーに最後まで残るたった一つの仕事は交渉
ichimichi
1
180
入門 ESlint Typegen #TSKaigi #TSKaigi2025_kataritai
bengo4com
0
2k
Two-Tower モデルで実現する 検索リランキング / Shibuya_AI_2
visional_engineering_and_design
2
130
障害を回避するHttpClient再入門 / Avoiding Failures HttpClient Reintroduction
uskey512
1
450
データベースの引越しを Ora2Pg でスマートにやろう
jri_narita
0
180
「伝える」を加速させるCursor術
naomix
0
320
Tenstorrent HW/SW 概要説明
tenstorrent_japan
0
250
Information Architecture Recommoning: How Standardization Enables Differentiation
angioia
0
170
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Become a Pro
speakerdeck
PRO
28
5.4k
Navigating Team Friction
lara
186
15k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Designing Experiences People Love
moore
142
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Agile that works and the tools we love
rasmusluckow
329
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
770
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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.