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
37
Implementando PWA em qualquer projeto
rogeriochaves
2
190
Microfrontends
rogeriochaves
2
140
Introducción a Elm
rogeriochaves
0
69
Immutable App Architecture
rogeriochaves
0
210
Faça programação funcional com JavaScript codando menos
rogeriochaves
4
450
Introduction to Elm
rogeriochaves
2
140
Playing with RxJS
rogeriochaves
0
97
Other Decks in Technology
See All in Technology
原則から考える保守しやすいComposable関数設計
moriatsushi
3
500
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.4k
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.4k
エンジニア向け技術スタック情報
kauche
0
110
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
230
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
110
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
150
IIWレポートからみるID業界で話題のMCP
fujie
0
740
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
490
AIにどこまで任せる?実務で使える(かもしれない)AIエージェント設計の考え方
har1101
3
1.3k
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
140
2025/6/21 日本学術会議公開シンポジウム発表資料
keisuke198619
2
480
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
BBQ
matthewcrist
89
9.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Done Done
chrislema
184
16k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Become a Pro
speakerdeck
PRO
28
5.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Typedesign – Prime Four
hannesfritz
42
2.7k
4 Signs Your Business is Dying
shpigford
184
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
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