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
40
Implementando PWA em qualquer projeto
rogeriochaves
2
190
Microfrontends
rogeriochaves
2
140
Introducción a Elm
rogeriochaves
0
70
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
97
Other Decks in Technology
See All in Technology
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
6
1.8k
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
3
580
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
240
Browser
recruitengineers
PRO
8
2.2k
AWSで推進するデータマネジメント
kawanago
0
870
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
440
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
290
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
150
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
130
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
32
12k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
How GitHub (no longer) Works
holman
315
140k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
For a Future-Friendly Web
brad_frost
179
9.9k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Statistics for Hackers
jakevdp
799
220k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
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