Slide 1
Slide 1 text
Smart nano stores
for state management
1
@evilmartians
or how we made front-end simpler
Slide 2
Slide 2 text
Nina Torgunakova
Frontend Engineer
2
@evilmartians
Slide 3
Slide 3 text
3
@evilmartians
What we had before
Slide 4
Slide 4 text
4
What we have today
* Source: www.medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0/
@evilmartians
Slide 5
Slide 5 text
The modern Web Development World is
becoming more and more complex.
Who suffers from it?
5
@evilmartians
Slide 6
Slide 6 text
1. Developers
6
@evilmartians
Slide 7
Slide 7 text
7
Everything is built around
frameworks but remains complex
@evilmartians
Slide 8
Slide 8 text
2. Users
8
@evilmartians
Slide 9
Slide 9 text
The average size of web pages is constantly growing up
9
* Source: www.keycdn.com/support/the-growth-of-web-page-size @evilmartians
Slide 10
Slide 10 text
3. Business
10
@evilmartians
Slide 11
Slide 11 text
11
Often, to do the same amount
of work, more programmers
are needed.
Now
Before
@evilmartians
Slide 12
Slide 12 text
12
Result: the growing complexity
of Web Development makes everyone
frustrated
Users Developers Business
@evilmartians
Slide 13
Slide 13 text
13
Let's try to find
inspiration!
@evilmartians
Slide 14
Slide 14 text
Fold knowledge into data,
so program logic can be
stupid and robust.
14
Eric Raymond,
“Rule of Representation”
@evilmartians
Slide 15
Slide 15 text
15
Framework
Logic
UI
Features
Data
@evilmartians
Slide 16
Slide 16 text
But what if we made a mistake?
16
@evilmartians
Slide 17
Slide 17 text
17
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
19
Data
Logic
UI Features
@evilmartians
Framework
Logic
UI
Features
Data
Framework
Slide 20
Slide 20 text
State Management
20
Application
Data State
@evilmartians
Slide 21
Slide 21 text
21
Use stores to move logic outside of components
@evilmartians
Component Component
Component
Store Store
Slide 22
Slide 22 text
OK, any other ideas about
the ideal process of state
management?
22
@evilmartians
Slide 23
Slide 23 text
Bad programmers worry
about the code. Good
programmers worry about
data structures and
their relationships.
23
Linus Torvalds
@evilmartians
Slide 24
Slide 24 text
24
Global State Any State Change
All Components
Call the selector function
Popular global state approach:
@evilmartians
Slide 25
Slide 25 text
25
How about improving data structure
and making it faster?
@evilmartians
Slide 26
Slide 26 text
26
Reactive programming approach:
@evilmartians
Slide 27
Slide 27 text
27
Applying to State Management:
Component
Component
Component
Subscriber 1
Subscriber 2
Subscriber 3
@evilmartians
Small
Store
Small
Store
Small
Store
Slide 28
Slide 28 text
28
But what if some data depends on
other data?
@evilmartians
Slide 29
Slide 29 text
29
Solution: Relationships between stores
Store
Store Store
Store
@evilmartians
Component
Component
Slide 30
Slide 30 text
1. Move logic to stores outside of component
2. Make stores small and smart
Let's go further!
30
@evilmartians
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
32
@evilmartians
State Management in modern frameworks
Slide 33
Slide 33 text
33
Smart Store
Set value Get value
@evilmartians
Slide 34
Slide 34 text
34
Let's summarize!
@evilmartians
Slide 35
Slide 35 text
1. Move logic to stores outside of components.
35
Component Component
Component
Store Store
@evilmartians
Slide 36
Slide 36 text
2. Make stores smart.
36
Store
Store
Store
Store
@evilmartians
Store
Component
Component
Slide 37
Slide 37 text
3. Provide minimalism and simplicity.
37
Store
One-line operations:
● Create store
● Get value
● Set value
@evilmartians
Get value
Set value
Slide 38
Slide 38 text
38
???
What state manager
will solve all the
problems?
@evilmartians
Slide 39
Slide 39 text
39
Nano Stores
@evilmartians
Slide 40
Slide 40 text
Let's build a simple online catalog:
40
@evilmartians
Slide 41
Slide 41 text
41
@evilmartians
Slide 42
Slide 42 text
Creating atom store for products in catalog:
// core/state.ts
import { atom } from 'nanostores';
export const $products = atom([
{ name: 'Nano Phone', price: 30 },
{ name: 'Nano TV', price: 75 },
{ name: 'Nano Laptop', price: 75 }
]);
42
@evilmartians
Slide 43
Slide 43 text
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) => )}>;
};
43
@evilmartians
Slide 44
Slide 44 text
44
@evilmartians
Slide 45
Slide 45 text
Adding filtering
using search input
45
@evilmartians
Slide 46
Slide 46 text
Creating atom store for search input:
// core/state.ts
import { atom } from 'nanostores';
export const $searchInput = atom('');
46
@evilmartians
Slide 47
Slide 47 text
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 $searchInput.set(e.target.value)} value={searchInput} />;
};
47
@evilmartians
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
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) => )}>;
};
49
@evilmartians
Slide 50
Slide 50 text
50
@evilmartians
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
ninaTorgunakova
52
@evilmartians
Questions?
github.com/nanostores