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
Unveiling Nano Stores
Search
Nina Torgunakova
September 23, 2023
Programming
0
750
Unveiling Nano Stores
Nina Torgunakova
September 23, 2023
Tweet
Share
More Decks by Nina Torgunakova
See All by Nina Torgunakova
Smart Nano Stores, or how we made front-end simpler (for the FOF meetup in Lisbon)
ninoid
1
520
Smart nano stores for state management, or how we made front-end simpler
ninoid
0
780
Умные nano stores, или как мы сделали веб-разработку проще
ninoid
0
930
Solving algorithms: beyond cramming for job interviews
ninoid
0
1.9k
Other Decks in Programming
See All in Programming
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
180
Discover Metal 4
rei315
2
110
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
520
CursorはMCPを使った方が良いぞ
taigakono
1
210
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
480
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
250
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
610
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
PicoRuby on Rails
makicamel
2
120
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
680
NPOでのDevinの活用
codeforeveryone
0
670
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Fireside Chat
paigeccino
37
3.5k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Raft: Consensus for Rubyists
vanstee
140
7k
Unsuck your backbone
ammeep
671
58k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Gamification - CAS2011
davidbonilla
81
5.3k
Transcript
Unveiling Nano Stores for state management 1 @evilmartians or how
we made front-end simpler
Nina Torgunakova Frontend Engineer 2 @evilmartians
3 @evilmartians What we had before
4 What we have today * Source: www.medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0/ @evilmartians
The modern Web Development World is becoming more and more
complex. Who suffers from it? 5 @evilmartians
1. Developers 6 @evilmartians
We need to do a lot of actions to make
something simple. 7 @evilmartians
2. Users 8 @evilmartians
The average size of web pages is constantly growing up
9 * Source: www.keycdn.com/support/the-growth-of-web-page-size @evilmartians
3. Business 10 @evilmartians
11 Often, to do the same amount of work, more
programmers are needed. Now Before @evilmartians
12 Result: the growing complexity of Web Development makes everyone
frustrated Users Developers Business @evilmartians
13 Let's try to find inspiration! @evilmartians
Fold knowledge into data, so program logic can be stupid
and robust. 14 Eric Raymond, “Rule of Representation” @evilmartians
15 Framework Logic UI Features Data @evilmartians
But what if we made a mistake? 16 @evilmartians
17
None
19 Data Logic UI Features @evilmartians Framework Logic UI Features
Data Framework
State Management 20 Application Data State @evilmartians
21 Use stores to move logic outside of components @evilmartians
Component Component Component Store Store
OK, any other ideas about the ideal process of state
management? 22 @evilmartians
Bad programmers worry about the code. Good programmers worry about
data structures and their relationships. 23 Linus Torvalds @evilmartians
24 Global State Any State Change All Components Call the
selector function Popular global state approach: @evilmartians
25 How about improving data structure and making it faster?
@evilmartians
26 Reactive programming approach: @evilmartians
27 Applying to State Management: Component Component Component Subscriber 1
Subscriber 2 Subscriber 3 @evilmartians Small Store Small Store Small Store
28 But what if some data depends on other data?
@evilmartians
29 Solution: Relationships between stores Store Store Store Store @evilmartians
Component Component
Perfection is achieved, not when there is nothing more to
add, but when there is nothing left to take away. 30 Antoine de Saint-Exupéry @evilmartians
31 @evilmartians State Management in modern frameworks
32 Smart Store Set value Get value @evilmartians
Everything should be made as simple as possible, but no
simpler. 33 Albert Einstein @evilmartians
We want some simple way; but not oversimplified. 34 @evilmartians
We need to consider many different challenges: - Synchronizing changes
between browser tabs - Implementing SPA navigation - Automatic translation of content - CRDT conflict resolution …and more… 35 @evilmartians
36 Let's summarize! @evilmartians
1. Move logic to stores outside of components. 37 Component
Component Component Store Store @evilmartians
2. Provide minimalism and simplicity. 38 Store One-line operations: •
Create store • Get value • Set value @evilmartians Get value Set value
3. Make stores smart. 39 Store Store Store Store @evilmartians
Store Component Component
4. Consider developer challenges. 40 SPA Navigation Smart data fetching
Automatic Translations Conflict resolution Synchronizing @evilmartians
41 ??? What state manager will solve all the problems?
@evilmartians
42 Nano Stores @evilmartians
Let's build a simple online catalog: 43 @evilmartians
44 @evilmartians
Creating atom store for products in catalog: // core/state.ts import
{ atom } from 'nanostores'; export const $products = atom<Product[]>([ { name: 'Nano Phone', price: 30 }, { name: 'Nano TV', price: 75 }, { name: 'Nano Laptop', price: 75 } ]); 45 @evilmartians
Using atom store: // components/Catalog.tsx import { useStore } from
'@nanostores/react'; import { $products } from 'core/state'; const Catalog = () => { const products = useStore($products); return <>{products.map((product) => <Card product={product} />)}</>; }; 46 @evilmartians
47 @evilmartians
Adding filtering using search input 48 @evilmartians
Creating atom store for search input: // core/state.ts import {
atom } from 'nanostores'; export const $searchInput = atom<string>(''); 49 @evilmartians
Using atom store for search input: // components/SearchBar.tsx import {
useStore } from '@nanostores/react'; import { $searchInput } from 'core/state'; const SearchBar = () => { const searchInput = useStore($searchInput); return <input onChange={(e) => $searchInput.set(e.target.value)} value={searchInput} />; }; 50 @evilmartians
Adding computed store to filter catalog: // core/state.ts import {
computed } from 'nanostores'; export const $filteredProducts = computed( [$searchInput, $products], (searchInput, products) => { return products.filter(product => product.name.includes(searchInput)); } ); 51 @evilmartians
Using computed store in components: // components/Catalog.tsx import { useStore
} from '@nanostores/react'; import { $filteredProducts } from 'core/state'; // Usage is exactly the same: const Catalog = () => { const filteredProducts = useStore($filteredProducts); return <>{filteredProducts.map((product) => <Card product={product} />)}</>; }; 52 @evilmartians
53 @evilmartians
So, what is next? 1. Try out a new approach
to state management in your own project. 2. See the power of simplicity! 54 @evilmartians github.com/nanostores
ninaTorgunakova 55 @evilmartians Questions? github.com/nanostores