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
460
Introduction to Elm
rogeriochaves
2
140
Playing with RxJS
rogeriochaves
0
97
Other Decks in Technology
See All in Technology
React Server ComponentsでAPI不要の開発体験
polidog
PRO
0
240
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
27
13k
Amazon Qで2Dゲームを作成してみた
siromi
0
140
Intro to Software Startups: Spring 2025
arnabdotorg
0
250
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
150
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
750
Rubyの国のPerlMonger
anatofuz
3
740
テストを実行してSorbetのsigを書こう!
sansantech
PRO
1
100
結局QUICで通信は速くなるの?
kota_yata
3
2k
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.8k
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
320
ファッションコーディネートアプリ「WEAR」における、Vertex AI Vector Searchを利用したレコメンド機能の開発・運用で得られたノウハウの紹介
zozotech
PRO
0
300
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Documentation Writing (for coders)
carmenintech
73
5k
A better future with KSS
kneath
239
17k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Invisible Side of Design
smashingmag
301
51k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.3k
Designing for Performance
lara
610
69k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fireside Chat
paigeccino
38
3.6k
Unsuck your backbone
ammeep
671
58k
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