Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Nina Torgunakova

November 09, 2023
Tweet

More Decks by Nina Torgunakova

Other Decks in Programming

Transcript

  1. Smart nano stores
    for state management
    1
    @evilmartians
    or how we made front-end simpler

    View full-size slide

  2. Nina Torgunakova
    Frontend Engineer
    2
    @evilmartians

    View full-size slide

  3. 3
    @evilmartians
    What we had before

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 1. Developers
    6
    @evilmartians

    View full-size slide

  7. 7
    Everything is built around
    frameworks but remains complex
    @evilmartians

    View full-size slide

  8. 2. Users
    8
    @evilmartians

    View full-size 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 full-size slide

  10. 3. Business
    10
    @evilmartians

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 15
    Framework
    Logic
    UI
    Features
    Data
    @evilmartians

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. State Management
    20
    Application
    Data State
    @evilmartians

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 26
    Reactive programming approach:
    @evilmartians

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 1. Move logic to stores outside of component
    2. Make stores small and smart
    Let's go further!
    30
    @evilmartians

    View full-size slide

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

    View full-size slide

  30. 32
    @evilmartians
    State Management in modern frameworks

    View full-size slide

  31. 33
    Smart Store
    Set value Get value
    @evilmartians

    View full-size slide

  32. 34
    Let's summarize!
    @evilmartians

    View full-size slide

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

    View full-size slide

  34. 2. Make stores smart.
    36
    Store
    Store
    Store
    Store
    @evilmartians
    Store
    Component
    Component

    View full-size slide

  35. 3. Provide minimalism and simplicity.
    37
    Store
    One-line operations:
    ● Create store
    ● Get value
    ● Set value
    @evilmartians
    Get value
    Set value

    View full-size slide

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

    View full-size slide

  37. 39
    Nano Stores
    @evilmartians

    View full-size slide

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

    View full-size slide

  39. 41
    @evilmartians

    View full-size slide

  40. 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 }
    ]);
    42
    @evilmartians

    View full-size slide

  41. 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) => )}>;
    };
    43
    @evilmartians

    View full-size slide

  42. 44
    @evilmartians

    View full-size slide

  43. Adding filtering
    using search input
    45
    @evilmartians

    View full-size slide

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

    View full-size slide

  45. 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} />;
    };
    47
    @evilmartians

    View full-size slide

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

    View full-size slide

  47. 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) => )}>;
    };
    49
    @evilmartians

    View full-size slide

  48. 50
    @evilmartians

    View full-size slide

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

    View full-size slide

  50. ninaTorgunakova
    52
    @evilmartians
    Questions?
    github.com/nanostores

    View full-size slide