$30 off During Our Annual Pro Sale. View Details »

Unveiling Nano Stores

Unveiling Nano Stores

Nina Torgunakova

September 23, 2023
Tweet

More Decks by Nina Torgunakova

Other Decks in Programming

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