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
150
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
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
2.6k
AWS⼊社という選択肢、⾒えていますか
iwamot
2
1.1k
Windows Autopilot Deployment by OSD Guy
tamaiyutaro
0
290
FOSS4G 2024 Japan コアデイ 一般発表25 PythonでPLATEAUのデータを手軽に扱ってみる
ra0kley
1
120
TinyGoを使ったVSCode拡張機能実装
askua
2
200
プロポーザルのつくり方 〜個人技編〜 / How to come up with proposals
ohbarye
4
300
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.6k
軽量DDDはもういらない! スタイルガイド本で OOPの実装パターンを学ぼう
panda_program
29
11k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
Amazon CloudWatch Network Monitor 導入ガイド_デモ説明付き
yukimmmm
0
150
Redmine 6.0 新機能評価ガイド
vividtone
0
170
Featured
See All Featured
Docker and Python
trallard
40
3.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Teambox: Starting and Learning
jrom
133
8.8k
Agile that works and the tools we love
rasmusluckow
327
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
4 Signs Your Business is Dying
shpigford
180
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
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