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
Single State Atom apps
Search
Rogério Chaves
December 02, 2015
Technology
1
170
Single State Atom apps
If state is the root of all evil, why don't we put it right on the root?
I'll show 3 examples
Rogério Chaves
December 02, 2015
Tweet
Share
More Decks by Rogério Chaves
See All by Rogério Chaves
O problema das Fake News
rogeriochaves
1
150
A Brief History of Frontend
rogeriochaves
1
24
Implementando PWA em qualquer projeto
rogeriochaves
2
180
Microfrontends
rogeriochaves
2
130
Introducción a Elm
rogeriochaves
0
65
Immutable App Architecture
rogeriochaves
0
200
Faça programação funcional com JavaScript codando menos
rogeriochaves
4
400
Introduction to Elm
rogeriochaves
2
130
Playing with RxJS
rogeriochaves
0
91
Other Decks in Technology
See All in Technology
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
150
20240912 JJUGナイトセミナー
mii1004
0
140
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
140
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
240
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
340
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
330
eBPFのこれまでとこれから
yutarohayakawa
10
3.3k
グイグイ系QAマネージャーの仕事
sadonosake
0
360
JTCや セキュリティチェックリストが夢の跡
nikinusu
1
790
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
2
270
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Typedesign – Prime Four
hannesfritz
39
2.3k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Writing Fast Ruby
sferik
623
60k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
130
Infographics Made Easy
chrislema
239
18k
Producing Creativity
orderedlist
PRO
340
39k
Transcript
SINGLE STATE ATOM APPS
2 state = if
3 why don’t we put it right on the root?
THE IDEA 4 main <foo> <bar> <qux> state •State lives
on the root •Pass below only what matters •Components just render what it receives, no side-effects
5 BUT HOW DO WE UPDATE THE STATE?
REACT + CURSOR 6 or atom, or zipper
REACT + CURSOR 7 <List items={cursor.refine('items')} /> const List =
(props) => <ul> {props.items.map(ListItem)} </ul> const ListItem = (item) => <li> {item.refine('name').value} <NameInput name={item.refine('name')} /> </li> const NameInput = (props) => <input value={props.name.value} onChange={props.name.set} /> (not an actual implementation)
CLOJURESCRIPT + OM Single state atom 8
9 AWESOME DEMO https://youtu.be/5yHFTN-_mOo
10 TODOMVC EXAMPLE
REACT + REDUX 11 Reduce FTW R
WHAT IS A REDUCER? 12 const list = [1, 2,
3] list.reduce((accumulated, current) => { return accumulated + current }, 5) // 11
REDUX STRUCTURE 13 main <foo> <bar> <qux> state actions user
input reduce onChange
HOW REDUX WORKS 14 const state = { list: [{name:
"une"}, {name: "due"}] }; const actions = [{type: "ADD", name: "tre"}]; const reducer = (currentState, action) => { switch (action.type) { case "ADD": return { list: [...currentState.list, {name: action.name}) } default: return currentState; } } actions.reduce(reducer, state); /* { list: [{name: "une"}, {name: "due"}, {name: "tre"}] }; */
15 TODOMVC EXAMPLE
16 REDUX DEVTOOLS
ELM 17 The right way is the only way
18 EXAMPLE
ADVANTAGES 19 •Single source of truth •Deterministic state changes •Rationalise
about the rendered UI •State change timeline •Easier to debug •Hot reloading (example) •Fast rendering •Easier to implement optimistic updates •Easier to have an isomorphic app •Simple functions and data structures
20 WHY IS THIS HAPPENING ON FRONT-END?
21 EXAMPLES SOURCE CODE github.com/rogeriochaves/single-state-atom-apps
THANK YOU