Unveiling Nano Stores

Transcript

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