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
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
240
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
170
PRDの正しい使い方 ~AI時代にも効く思考・対話・成長ツールとして~
techtekt
PRO
0
470
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
260
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
170
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
3
580
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
440
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
260
モダンフロントエンド 開発研修
recruitengineers
PRO
10
6.2k
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
2k
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
1.1k
Language Update: Java
skrb
2
220
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Music & Morning Musume
bryan
46
6.8k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
How to Ace a Technical Interview
jacobian
279
23k
The Invisible Side of Design
smashingmag
301
51k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Agile that works and the tools we love
rasmusluckow
330
21k
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