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

Transcript

1. Умные nano stores 1 @ninoid_ или как мы сделали веб-разработку проще
2. Нина Торгунакова 2 @ninoid_ Frontend Engineer
3. 3 Что было раньше: HTML + CSS + JS @ninoid_
4. 4 Что у нас есть сейчас: * Source: www.medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0/ @ninoid_
5. Нам до сих пор требуется много действий, чтобы сделать что-то простое. 5 @ninoid_
6. 6 Да и бизнесу зачастую приходится нанимать больше людей, чем раньше. @ninoid_
7. Размер веб-страниц постоянно растет, пользователи страдают 7 * Source: www.keycdn.com/support/the-growth-of-web-page-size @ninoid_
8. Современный мир веб-разработки становится все более сложным. 8 @ninoid_
9. 9 Попробуем понять, как упростить себе жизнь! @ninoid_
10. Храните знания в данных так, чтобы логика программы была тупой и надёжной. 10 Эрик Рэймонд, “Правило представления” @ninoid_
11. 11 Фреймворк Логика UI Фичи Данные @ninoid_
12. Но что, если мы допустили ошибку? 12 @ninoid_
15. Мы тоже можем изменить нашу модель и хранить знания в данных, а не в компонентах фреймворка: 15 @ninoid_
16. 16 Данные Логика UI Фичи @ninoid_ Фреймворк Логика UI Фичи Данные Фреймворк
17. Стейт-менеджмент 17 Приложение Состояние @ninoid_
18. 18 Использовать сторы, чтобы хранить логику вне компонентов @ninoid_ Компонент Компонент Компонент Стор Стор
19. ОК, ещё идеи? 19 @ninoid_
20. Плохие программисты думают о коде. Хорошие программисты думают о структурах данных и их взаимосвязях. 20 Линус Торвальдс @ninoid_
21. 21 Глобальное состояние Любое изменение состояния Все компоненты Вызов функции-селектора Популярный подход с глобальным состоянием: @ninoid_
22. 22 Паттерн реактивного программирования: @ninoid_
23. 23 Применяя к стейт-менеджменту: Компонент Компонент Компонент Подписчик 1 Подписчик 2 Подписчик 3 @ninoid_ Небольшой стор Небольшой стор Небольшой стор
24. 24 @ninoid_ Небольшой стор Изменение состояния Подписанные компоненты Получение нового значения Небольшой стор Изменение состояния Subscribed components Получение нового значения Только подписанные компоненты получат изменения из нужных сторов:
25. 25 Но что, если есть данные, которые зависят от других данных? @ninoid_
26. 26 Решение: взаимоотношения между сторами Стор Стор Стор Стор @ninoid_
27. Совершенство достигается не тогда когда уже ничего нельзя добавить, а тогда, когда ничего нельзя убрать. 27 Антуан де Сент-Экзюпери @ninoid_
28. 28 @ninoid_ Популярный подход к стейт-менеджменту:
29. 29 Умный стор Установить значение Получить значение @ninoid_
30. Всё должно быть изложено настолько просто, насколько это возможно, но не проще. 30 (этим человеком был Альберт Эйнштейн) @ninoid_
31. Мы хотим простого пути, но не переупрощённого. 31 @ninoid_
32. Нам нужно учитывать ряд челленджей. - Синхронизация изменений между вкладками браузера - Добавление навигации в SPA-приложение - Автоматический перевод контента на другой язык - Автоматическое разрешение конфликтов с помощью CRDT …и многое другое… 32 @ninoid_
33. Без ментальной перегрузки для сложных случаев 33 Никакого бойлерплейта для простых случаев @ninoid_
34. 34 Подведём итоги! @ninoid_
35. 1. Хранить логику вне компонентов, в сторах. 35 Компонент Компонент Компонент Стор Стор @ninoid_
36. 2. Делать сторы умными. 36 Стор Стор Стор Стор @ninoid_ Стор
37. 3. Обеспечить минимализм и простоту 37 Стор Однострочные команды: • Создание стора • Получить значение • Установить значение Получить значение Установить значение @ninoid_
38. 4. Учитывать разные проблемы разработчиков. 38 Навигация в SPA-приложении Умный фетчинг данных Перевод на другой язык CRDT Синхронизация @ninoid_ Ленивая загрузка
39. 39 ??? Какой стейт- менеджер решит все наши проблемы? @ninoid_
40. 40 Nano Stores @ninoid_
41. Так, и что же дальше? 1. Попробуйте минималистичный стейт- менеджер в своём проекте. 2. Почувствуйте силу простоты! 41 @ninoid_ github.com/nanostores
42. @ninoid_ ninaTorgunakova 42 @ninoid_