Unveiling Nano Stores

Transcript

1. Unveiling Nano Stores
   for state management
   1
   @evilmartians
   or how we made front-end simpler
   

   View Slide

2. Nina Torgunakova
   Frontend Engineer
   2
   @evilmartians
   

   View Slide

3. 3
   @evilmartians
   What we had before
   

   View Slide

4. 4
   What we have today
   * Source: www.medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0/
   @evilmartians
   

   View Slide

5. The modern Web Development World is
   becoming more and more complex.
   Who suffers from it?
   5
   @evilmartians
   

   View Slide

6. 1. Developers
   6
   @evilmartians
   

   View Slide

7. We need to do a lot of actions
   to make something simple.
   7
   @evilmartians
   

   View Slide

8. 2. Users
   8
   @evilmartians
   

   View Slide

9. The average size of web pages is constantly growing up
   9
   * Source: www.keycdn.com/support/the-growth-of-web-page-size @evilmartians
   

   View Slide

10. 3. Business
    10
    @evilmartians
    

    View Slide

11. 11
    Often, to do the same amount
    of work, more programmers
    are needed.
    Now
    Before
    @evilmartians
    

    View Slide

12. 12
    Result: the growing complexity
    of Web Development makes everyone
    frustrated
    Users Developers Business
    @evilmartians
    

    View Slide

13. 13
    Let's try to find
    inspiration!
    @evilmartians
    

    View Slide

14. Fold knowledge into data,
    so program logic can be
    stupid and robust.
    14
    Eric Raymond,
    “Rule of Representation”
    @evilmartians
    

    View Slide

15. 15
    Framework
    Logic
    UI
    Features
    Data
    @evilmartians
    

    View Slide

16. But what if we made a mistake?
    16
    @evilmartians
    

    View Slide

17. View Slide

18. View Slide

19. 19
    Data
    Logic
    UI
    Features
    @evilmartians
    Framework
    Logic
    UI
    Features
    Data
    Framework
    

    View Slide

20. State Management
    20
    Application
    Data State
    @evilmartians
    

    View Slide

21. 21
    Use stores to move logic outside of components
    @evilmartians
    Component Component
    Component
    Store Store
    

    View Slide

22. OK, any other ideas about
    the ideal process of state
    management?
    22
    @evilmartians
    

    View Slide

23. Bad programmers worry
    about the code. Good
    programmers worry about
    data structures and
    their relationships.
    23
    Linus Torvalds
    @evilmartians
    

    View Slide

24. 24
    Global State Any State Change
    All Components
    Call the selector function
    Popular global state approach:
    @evilmartians
    

    View Slide

25. 25
    How about improving data structure
    and making it faster?
    @evilmartians
    

    View Slide

26. 26
    Reactive programming approach:
    @evilmartians
    

    View Slide

27. 27
    Applying to State Management:
    Component
    Component
    Component
    Subscriber 1
    Subscriber 2
    Subscriber 3
    @evilmartians
    Small
    Store
    Small
    Store
    Small
    Store
    

    View Slide

28. 28
    But what if some data depends on
    other data?
    @evilmartians
    

    View Slide

29. 29
    Solution: Relationships between stores
    Store
    Store Store
    Store
    @evilmartians
    Component
    Component
    

    View Slide

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
    

    View Slide

31. 31
    @evilmartians
    State Management in modern frameworks
    

    View Slide

32. 32
    Smart Store
    Set value Get value
    @evilmartians
    

    View Slide

33. Everything should be made
    as simple as possible,
    but no simpler.
    33
    Albert Einstein
    @evilmartians
    

    View Slide

34. We want some simple way;
    but not oversimplified.
    34
    @evilmartians
    

    View Slide

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
    

    View Slide

36. 36
    Let's summarize!
    @evilmartians
    

    View Slide

37. 1. Move logic to stores outside of components.
    37
    Component Component
    Component
    Store Store
    @evilmartians
    

    View Slide

38. 2. Provide minimalism and simplicity.
    38
    Store
    One-line operations:
    ● Create store
    ● Get value
    ● Set value
    @evilmartians
    Get value
    Set value
    

    View Slide

39. 3. Make stores smart.
    39
    Store
    Store
    Store
    Store
    @evilmartians
    Store
    Component
    Component
    

    View Slide

40. 4. Consider developer challenges.
    40
    SPA Navigation Smart data
    fetching
    Automatic
    Translations
    Conflict
    resolution
    Synchronizing
    @evilmartians
    

    View Slide

41. 41
    ???
    What state manager
    will solve all the
    problems?
    @evilmartians
    

    View Slide

42. 42
    Nano Stores
    @evilmartians
    

    View Slide

43. Let's build a simple online catalog:
    43
    @evilmartians
    

    View Slide

44. 44
    @evilmartians
    

    View Slide

45. 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
    

    View Slide

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) => )}>;
    };
    46
    @evilmartians
    

    View Slide

47. 47
    @evilmartians
    

    View Slide

48. Adding filtering
    using search input
    48
    @evilmartians
    

    View Slide

49. Creating atom store for search input:
    // core/state.ts
    import { atom } from 'nanostores';
    export const $searchInput = atom('');
    49
    @evilmartians
    

    View Slide

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 $searchInput.set(e.target.value)} value={searchInput} />;
    };
    50
    @evilmartians
    

    View Slide

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
    

    View Slide

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) => )}>;
    };
    52
    @evilmartians
    

    View Slide

53. 53
    @evilmartians
    

    View Slide

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
    

    View Slide

55. ninaTorgunakova
    55
    @evilmartians
    Questions?
    github.com/nanostores
    

    View Slide