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
160
Microfrontends
rogeriochaves
2
120
Introducción a Elm
rogeriochaves
0
63
Immutable App Architecture
rogeriochaves
0
200
Faça programação funcional com JavaScript codando menos
rogeriochaves
4
370
Introduction to Elm
rogeriochaves
2
120
Playing with RxJS
rogeriochaves
0
87
Other Decks in Technology
See All in Technology
ChatGPT for IT Service Management (IT Pro)
dahatake
2
150
強みを伸ばすキャリアデザイン
yug1224
0
200
反実仮想機械学習とは何か
usaito
PRO
7
2.2k
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
540
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
61
18k
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.5k
Oracle Cloud Infrastructure:2024年4月度サービス・アップデート
oracle4engineer
PRO
1
110
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
5.1k
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
220
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
660
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Producing Creativity
orderedlist
PRO
336
39k
Designing for Performance
lara
601
67k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Automating Front-end Workflow
addyosmani
1355
200k
Bash Introduction
62gerente
604
210k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
Agile that works and the tools we love
rasmusluckow
324
20k
Building Effective Engineering Teams - LeadDev
addyosmani
27
1.8k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Teambox: Starting and Learning
jrom
128
8.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
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