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
320
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
96
ndb
spicyj
0
120
css
spicyj
2
760
Other Decks in Technology
See All in Technology
開発健全性の可視化と開発者体験の改善 ~ Compassでエンジニアに活力と生産性を ~
atlassianjapan
0
100
さくっと実践!Postmanを活用した高品質で持続可能なAPI管理
yokawasa
5
370
塩野義製薬様のAWS統合管理戦略:Organizations設計と運用の具体例
tkikuchi
0
330
40代後半で開発エンジニアからクラウドインフラエンジニアにキャリアチェンジし、生き残れる自信がようやく持てた話
iwamot
9
8.3k
生成AI、LLMの いまさら聞けないキホンのキ!/ Generative AI and LLM 101
gakumura
1
170
안드로이드 기술 이력서의 최소 조건
pluu
1
1.2k
生成AIの活用パターンと継続的評価
asei
6
660
Databricksワークショップ - 生成AIとDWH
taka_aki
2
4.4k
データ分析基盤のためにS3を深堀りする~アーキテクチャ設計の考え方のヒントに~
nrinetcom
PRO
1
790
Overview of file type identifiers
ange
0
150
AWS Step Functionsのタスク入出力に秩序を与えよう
haku__hime
0
140
インシデント対応の 実践と品質文化の醸成
____rina____
1
200
Featured
See All Featured
Speed Design
sergeychernyshev
23
550
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
4.9k
The Cult of Friendly URLs
andyhume
77
6k
Measuring & Analyzing Core Web Vitals
bluesmoon
0
9
A designer walks into a library…
pauljervisheath
202
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Ruby is Unlike a Banana
tanoku
96
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
650
Done Done
chrislema
181
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
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.