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
160
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
410
Introduction to Elm
rogeriochaves
2
130
Playing with RxJS
rogeriochaves
0
92
Other Decks in Technology
See All in Technology
LLMの気持ちになってRAGのことを考えてみよう
john_smith
0
150
コンパウンド戦略に向けた技術選定とリアーキテクチャ
kworkdev
PRO
1
1.8k
Yahoo! JAPANトップページにおけるマイクロフロントエンド - 大規模組織におけるFE開発を加速させるには
lycorptech_jp
PRO
0
970
The Role of Developer Relations in AI Product Success.
giftojabu1
0
160
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
710
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
3
380
Chasing the White Whale of Open Source - ROI
mrbobbytables
0
130
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
280
Amazon Forecast亡き今、我々がマネージドサービスに頼らず時系列予測を実行する方法
sadynitro
0
190
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
170
4年で17倍に成長したエンジニア組織を支えるアーキテクチャの過去と未来
sansantech
PRO
1
2.4k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Designing for humans not robots
tammielis
250
25k
Practical Orchestrator
shlominoach
186
10k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
The World Runs on Bad Software
bkeepers
PRO
65
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Building Applications with DynamoDB
mza
90
6.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Being A Developer After 40
akosma
87
590k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
990
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.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