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
Smart Nano Stores, or how we made front-end sim...
Search
Nina Torgunakova
November 09, 2023
Programming
1
530
Smart Nano Stores, or how we made front-end simpler (for the FOF meetup in Lisbon)
Nina Torgunakova
November 09, 2023
Tweet
Share
More Decks by Nina Torgunakova
See All by Nina Torgunakova
Smart nano stores for state management, or how we made front-end simpler
ninoid
0
780
Unveiling Nano Stores
ninoid
0
760
Умные nano stores, или как мы сделали веб-разработку проще
ninoid
0
930
Solving algorithms: beyond cramming for job interviews
ninoid
0
1.9k
Other Decks in Programming
See All in Programming
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
GPUを計算資源として使おう!
primenumber
1
250
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
「App Intent」よくわからんけどすごい!
rinngo0302
1
100
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.7k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
620
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
410
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
ニーリーにおけるプロダクトエンジニア
nealle
0
950
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to Ace a Technical Interview
jacobian
278
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
What's in a price? How to price your products and services
michaelherold
246
12k
Adopting Sorbet at Scale
ufuk
77
9.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Faster Mobile Websites
deanohume
308
31k
Music & Morning Musume
bryan
46
6.7k
Transcript
Smart 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
7 Everything is built around frameworks but remains complex @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
1. Move logic to stores outside of component 2. Make
stores small and smart Let's go further! 30 @evilmartians
Perfection is achieved, not when there is nothing more to
add, but when there is nothing left to take away. 31 Antoine de Saint-Exupéry @evilmartians
32 @evilmartians State Management in modern frameworks
33 Smart Store Set value Get value @evilmartians
34 Let's summarize! @evilmartians
1. Move logic to stores outside of components. 35 Component
Component Component Store Store @evilmartians
2. Make stores smart. 36 Store Store Store Store @evilmartians
Store Component Component
3. Provide minimalism and simplicity. 37 Store One-line operations: •
Create store • Get value • Set value @evilmartians Get value Set value
38 ??? What state manager will solve all the problems?
@evilmartians
39 Nano Stores @evilmartians
Let's build a simple online catalog: 40 @evilmartians
41 @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 } ]); 42 @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} />)}</>; }; 43 @evilmartians
44 @evilmartians
Adding filtering using search input 45 @evilmartians
Creating atom store for search input: // core/state.ts import {
atom } from 'nanostores'; export const $searchInput = atom<string>(''); 46 @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} />; }; 47 @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)); } ); 48 @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} />)}</>; }; 49 @evilmartians
50 @evilmartians
So, what is next? 1. Try out a new approach
to state management in your own project. 2. See the power of simplicity! 51 @evilmartians github.com/nanostores
ninaTorgunakova 52 @evilmartians Questions? github.com/nanostores