Smart Nano Stores, or how we made front-end simpler (for the FOF meetup in Lisbon)

Transcript

1. Smart 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. 7 Everything is built around frameworks but remains complex @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. 1. Move logic to stores outside of component 2. Make stores small and smart Let's go further! 30 @evilmartians
31. 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. 32 @evilmartians State Management in modern frameworks
33. 33 Smart Store Set value Get value @evilmartians
34. 34 Let's summarize! @evilmartians
35. 1. Move logic to stores outside of components. 35 Component Component Component Store Store @evilmartians
36. 2. Make stores smart. 36 Store Store Store Store @evilmartians Store Component Component
37. 3. Provide minimalism and simplicity. 37 Store One-line operations: • Create store • Get value • Set value @evilmartians Get value Set value
38. 38 ??? What state manager will solve all the problems? @evilmartians
39. 39 Nano Stores @evilmartians
40. Let's build a simple online catalog: 40 @evilmartians
41. 41 @evilmartians
42. 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
43. 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. 44 @evilmartians
45. Adding filtering using search input 45 @evilmartians
46. Creating atom store for search input: // core/state.ts import { atom } from 'nanostores'; export const $searchInput = atom<string>(''); 46 @evilmartians
47. 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
48. 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
49. 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. 50 @evilmartians
51. 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
52. ninaTorgunakova 52 @evilmartians Questions? github.com/nanostores