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
770
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
540
Smart nano stores for state management, or how we made front-end simpler
ninoid
0
800
Умные nano stores, или как мы сделали веб-разработку проще
ninoid
0
940
Solving algorithms: beyond cramming for job interviews
ninoid
0
2k
Other Decks in Programming
See All in Programming
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
AI Ramen Fight
yusukebe
0
120
リッチエディターを安全に開発・運用するために
unachang113
1
350
実践 Dev Containers × Claude Code
touyu
1
120
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
一人でAIプロダクトを作るならAIにはもっと働いてもらいたい / I want AI to work harder
rkaga
1
110
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
290
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
170
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
140
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
180
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Designing Experiences People Love
moore
142
24k
A better future with KSS
kneath
238
17k
Being A Developer After 40
akosma
90
590k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A Tale of Four Properties
chriscoyier
160
23k
Bash Introduction
62gerente
614
210k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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