Slide 1
Slide 1 text
Unveiling 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
We need to do a lot of actions
to make something simple.
7
@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
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
Slide 31
Slide 31 text
31
@evilmartians
State Management in modern frameworks
Slide 32
Slide 32 text
32
Smart Store
Set value Get value
@evilmartians
Slide 33
Slide 33 text
Everything should be made
as simple as possible,
but no simpler.
33
Albert Einstein
@evilmartians
Slide 34
Slide 34 text
We want some simple way;
but not oversimplified.
34
@evilmartians
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
36
Let's summarize!
@evilmartians
Slide 37
Slide 37 text
1. Move logic to stores outside of components.
37
Component Component
Component
Store Store
@evilmartians
Slide 38
Slide 38 text
2. Provide minimalism and simplicity.
38
Store
One-line operations:
● Create store
● Get value
● Set value
@evilmartians
Get value
Set value
Slide 39
Slide 39 text
3. Make stores smart.
39
Store
Store
Store
Store
@evilmartians
Store
Component
Component
Slide 40
Slide 40 text
4. Consider developer challenges.
40
SPA Navigation Smart data
fetching
Automatic
Translations
Conflict
resolution
Synchronizing
@evilmartians
Slide 41
Slide 41 text
41
???
What state manager
will solve all the
problems?
@evilmartians
Slide 42
Slide 42 text
42
Nano Stores
@evilmartians
Slide 43
Slide 43 text
Let's build a simple online catalog:
43
@evilmartians
Slide 44
Slide 44 text
44
@evilmartians
Slide 45
Slide 45 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 }
]);
45
@evilmartians
Slide 46
Slide 46 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) => )}>;
};
46
@evilmartians
Slide 47
Slide 47 text
47
@evilmartians
Slide 48
Slide 48 text
Adding filtering
using search input
48
@evilmartians
Slide 49
Slide 49 text
Creating atom store for search input:
// core/state.ts
import { atom } from 'nanostores';
export const $searchInput = atom('');
49
@evilmartians
Slide 50
Slide 50 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} />;
};
50
@evilmartians
Slide 51
Slide 51 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));
}
);
51
@evilmartians
Slide 52
Slide 52 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) => )}>;
};
52
@evilmartians
Slide 53
Slide 53 text
53
@evilmartians
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
ninaTorgunakova
55
@evilmartians
Questions?
github.com/nanostores