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
33
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
85
Universal Applications
stopachka
0
55
Engineering Growth
stopachka
0
42
Universal Applications
stopachka
1
67
ES2015
stopachka
0
48
Other Decks in Technology
See All in Technology
One engineer company with Ruby on Rails
rstankov
2
390
ServiceNow Knowledge Learning Rise up
manarobot
0
220
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
3
560
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
6
1.3k
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.4k
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
170
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
210
JAWS-UG Bedrock Claude Night
yamahiro
3
670
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
6
3.2k
require(ESM)とECMAScript仕様
uhyo
4
910
JSON攻略法.pdf
miyakemito
8
5.2k
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
1
590
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
Web development in the modern age
philhawksworth
203
10k
Facilitating Awesome Meetings
lara
43
5.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
4
3.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
GitHub's CSS Performance
jonrohan
1025
450k
In The Pink: A Labor of Love
frogandcode
138
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Mobile First: as difficult as doing things right
swwweet
217
8.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