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

Умные nano stores, или как мы сделали веб-разработку проще

Умные nano stores, или как мы сделали веб-разработку проще

Nina Torgunakova

August 31, 2023
Tweet

More Decks by Nina Torgunakova

Other Decks in Programming

Transcript

  1. Умные nano stores
    1
    @ninoid_
    или как мы сделали
    веб-разработку проще

    View full-size slide

  2. Нина Торгунакова
    2
    @ninoid_
    Frontend Engineer

    View full-size slide

  3. 3
    Что было раньше: HTML + CSS + JS
    @ninoid_

    View full-size slide

  4. 4
    Что у нас есть сейчас:
    * Source: www.medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0/ @ninoid_

    View full-size slide

  5. Нам до сих пор требуется
    много действий,
    чтобы сделать что-то простое.
    5
    @ninoid_

    View full-size slide

  6. 6
    Да и бизнесу зачастую приходится
    нанимать больше людей, чем раньше.
    @ninoid_

    View full-size slide

  7. Размер веб-страниц постоянно растет, пользователи страдают
    7
    * Source: www.keycdn.com/support/the-growth-of-web-page-size @ninoid_

    View full-size slide

  8. Современный мир веб-разработки
    становится все более сложным.
    8
    @ninoid_

    View full-size slide

  9. 9
    Попробуем понять,
    как упростить себе
    жизнь!
    @ninoid_

    View full-size slide

  10. Храните знания в данных
    так, чтобы логика
    программы была тупой и
    надёжной.
    10
    Эрик Рэймонд,
    “Правило представления”
    @ninoid_

    View full-size slide

  11. 11
    Фреймворк
    Логика
    UI
    Фичи
    Данные
    @ninoid_

    View full-size slide

  12. Но что, если мы допустили ошибку?
    12
    @ninoid_

    View full-size slide

  13. Мы тоже можем изменить нашу модель и
    хранить знания в данных, а не в компонентах
    фреймворка:
    15
    @ninoid_

    View full-size slide

  14. 16
    Данные
    Логика
    UI
    Фичи
    @ninoid_
    Фреймворк
    Логика
    UI
    Фичи
    Данные
    Фреймворк

    View full-size slide

  15. Стейт-менеджмент
    17
    Приложение
    Состояние
    @ninoid_

    View full-size slide

  16. 18
    Использовать сторы, чтобы хранить логику
    вне компонентов
    @ninoid_
    Компонент Компонент
    Компонент
    Стор Стор

    View full-size slide

  17. ОК, ещё идеи?
    19
    @ninoid_

    View full-size slide

  18. Плохие программисты
    думают о коде. Хорошие
    программисты думают о
    структурах данных и их
    взаимосвязях.
    20
    Линус Торвальдс
    @ninoid_

    View full-size slide

  19. 21
    Глобальное
    состояние
    Любое изменение
    состояния
    Все компоненты
    Вызов функции-селектора
    Популярный подход с глобальным состоянием:
    @ninoid_

    View full-size slide

  20. 22
    Паттерн реактивного программирования:
    @ninoid_

    View full-size slide

  21. 23
    Применяя к стейт-менеджменту:
    Компонент
    Компонент
    Компонент
    Подписчик 1
    Подписчик 2
    Подписчик 3
    @ninoid_
    Небольшой
    стор
    Небольшой
    стор
    Небольшой
    стор

    View full-size slide

  22. 24
    @ninoid_
    Небольшой
    стор
    Изменение
    состояния
    Подписанные
    компоненты
    Получение
    нового значения
    Небольшой
    стор
    Изменение
    состояния
    Subscribed
    components
    Получение
    нового значения
    Только подписанные компоненты получат
    изменения из нужных сторов:

    View full-size slide

  23. 25
    Но что, если есть данные, которые
    зависят от других данных?
    @ninoid_

    View full-size slide

  24. 26
    Решение: взаимоотношения между сторами
    Стор
    Стор Стор
    Стор
    @ninoid_

    View full-size slide

  25. Совершенство достигается
    не тогда когда уже
    ничего нельзя добавить,
    а тогда, когда ничего
    нельзя убрать.
    27
    Антуан де Сент-Экзюпери
    @ninoid_

    View full-size slide

  26. 28
    @ninoid_
    Популярный подход к стейт-менеджменту:

    View full-size slide

  27. 29
    Умный стор
    Установить значение Получить значение
    @ninoid_

    View full-size slide

  28. Всё должно быть изложено
    настолько просто,
    насколько это возможно,
    но не проще.
    30
    (этим человеком был
    Альберт Эйнштейн)
    @ninoid_

    View full-size slide

  29. Мы хотим простого пути,
    но не переупрощённого.
    31
    @ninoid_

    View full-size slide

  30. Нам нужно учитывать ряд челленджей.
    - Синхронизация изменений между вкладками браузера
    - Добавление навигации в SPA-приложение
    - Автоматический перевод контента на другой язык
    - Автоматическое разрешение конфликтов с помощью CRDT
    …и многое другое…
    32
    @ninoid_

    View full-size slide

  31. Без ментальной перегрузки для сложных случаев
    33
    Никакого бойлерплейта для простых случаев
    @ninoid_

    View full-size slide

  32. 34
    Подведём итоги!
    @ninoid_

    View full-size slide

  33. 1. Хранить логику вне компонентов, в сторах.
    35
    Компонент Компонент
    Компонент
    Стор Стор
    @ninoid_

    View full-size slide

  34. 2. Делать сторы умными.
    36
    Стор
    Стор
    Стор
    Стор
    @ninoid_
    Стор

    View full-size slide

  35. 3. Обеспечить минимализм и простоту
    37
    Стор
    Однострочные команды:
    ● Создание стора
    ● Получить значение
    ● Установить значение
    Получить значение
    Установить значение
    @ninoid_

    View full-size slide

  36. 4. Учитывать разные проблемы разработчиков.
    38
    Навигация в
    SPA-приложении
    Умный фетчинг
    данных
    Перевод на
    другой язык CRDT
    Синхронизация
    @ninoid_
    Ленивая загрузка

    View full-size slide

  37. 39
    ???
    Какой стейт-
    менеджер решит все
    наши проблемы?
    @ninoid_

    View full-size slide

  38. 40
    Nano Stores
    @ninoid_

    View full-size slide

  39. Так, и что же дальше?
    1. Попробуйте минималистичный стейт-
    менеджер в своём проекте.
    2. Почувствуйте силу простоты!
    41
    @ninoid_
    github.com/nanostores

    View full-size slide

  40. @ninoid_
    ninaTorgunakova
    42
    @ninoid_

    View full-size slide