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
180
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
170
A Brief History of Frontend
rogeriochaves
1
43
Implementando PWA em qualquer projeto
rogeriochaves
2
200
Microfrontends
rogeriochaves
2
140
Introducción a Elm
rogeriochaves
0
71
Immutable App Architecture
rogeriochaves
0
210
Faça programação funcional com JavaScript codando menos
rogeriochaves
4
470
Introduction to Elm
rogeriochaves
2
140
Playing with RxJS
rogeriochaves
0
98
Other Decks in Technology
See All in Technology
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
120
いまさら聞けない ABテスト入門
skmr2348
1
220
KMP の Swift export
kokihirokawa
0
340
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
180
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
170
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
160
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
4
170
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
110
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
540
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
2
150
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
4k
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Music & Morning Musume
bryan
46
6.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Site-Speed That Sticks
csswizardry
11
890
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
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