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
ES2015 & React
Search
Stepan Parunashvili
December 18, 2015
Technology
0
44
ES2015 & React
Talk on ES2015, and react at futureadvisor
Stepan Parunashvili
December 18, 2015
Tweet
Share
More Decks by Stepan Parunashvili
See All by Stepan Parunashvili
Scaling React Applications
stopachka
2
93
Universal Applications
stopachka
0
70
Engineering Growth
stopachka
0
49
Universal Applications
stopachka
1
77
ES2015
stopachka
0
55
Other Decks in Technology
See All in Technology
Snowflake Intelligenceで実現できるノーコードAI活用
takumimukaiyama
1
210
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.4k
本部長の代わりに提案書レビュー! KDDI営業が毎日使うAIエージェント「A-BOSS」開発秘話
minorun365
PRO
13
1.6k
OpenTelemetry Collector internals
ymotongpoo
5
530
データ戦略部門 紹介資料
sansan33
PRO
1
3.2k
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
170
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
4
1.5k
堅牢な認証基盤の実現 TypeScriptで代数的データ型を活用する
kakehashi
PRO
2
210
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
belongadmin
2
140
Copilot Agentを普段使いしてわかった、バックエンド開発で使えるTips
ykagano
0
330
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
280
(新URLに移行しました)FASTと向き合うことで見えた、大規模アジャイルの難しさと楽しさ
wooootack
0
680
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
50
8.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
YesSQL, Process and Tooling at Scale
rocio
172
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
910
Making the Leap to Tech Lead
cromwellryan
134
9.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Git: the NoSQL Database
bkeepers
PRO
430
65k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Transcript
() => <React /> Stepan Parunashvili 1
2
No more waiting 3
Babel $ npm install -g babel-cli 4
ES2015 5
Arrow Functions () => 6
7
8
9
10
11
Classes class Component {} 12
13
14
15
16
Modules import User from 'user' 17
18
19
Larger Standard Library Map, Set, WeakMap, Promise... 20
Smarter Object Expressions {users} 21
22
23
24
25
26
Destructuring in arguments ({name, friends}) => console.log(name, friends) 27
28
29
30
31
Default Arguments (name = 'Bob') => console.log(name) 32
33
34
Template Strings `hello ${name}` 35
36
37
More destructuring var [first, ...rest] = users 38
39
40
41
42
43
Splat addFriends(...friends) 44
45
46
47
48
49
Block scoping: let & const let i = 0; 50
51
52
53
54
55
56
Symbols Iterators Generators 57
Async / Await var users = await getUsers(); 58
59
60
61
62
63
<React /> 64
65
Declarative > Imperative {opened ? <FriendList /> : null} 66
67
68
69
70
71
72
increment append, decrement, replace 73
Now... 74
75
76
77
78
79
Instead... 80
(data) => markup 81
82
83
84
85
Composability friends.map(friend => <Info friend={friend} />) 86
87
88
89 http://handlebarsjs.com/expressions.html
90
Separation of Concerns? 91
Coupling vs Cohesion 92
Cohesion <button onClick={this._handleClick}>Click me</button> 93
94
95
ui logic + markup are cohesive 96
97
Unit testing 98
Reusability 99
100
101
But, large apps are large 102
Keep components small 103
Keep state in a single place 104
Optimize last 105
Use Immutable Data Structures 106
107
108
109
110
111
112
There's more 113
flow redux hot reloading 114
thank you :) 115