В мире JS-фреймворков появился новый игрок - Svelte. Как следует из названия, Svelte худощавый, чрезвычайно худощавый. Фактически, принцип действия Svelte, заключающийся в компиляции кода в (идеальный) ванильный js на этапе сборки, а не его интерпретации на этапе выполнения, имел людей, описывающих его как не-фреймворк, а его собственный создатель называет это языком, а не рамки. В частности, созданный для описания реактивных пользовательских интерфейсов.
Я начал экспериментировать со Svelte и до сих пор получаю удовольствие. Учебник, предложенный создателем Ричем Харрисом, функционирует как очень приятное введение. После его завершения я начал задаваться вопросом, как Акита, решение для управления состоянием, которое мы создали здесь, в Datorama, будет работать вместе со Svelte.
Svelte + Akita = отличное комбо
Если вы уже знакомы со Svelte, вы можете спросить себя, зачем вообще требуется дополнительное управление состоянием, поскольку Svelte имеет встроенную функциональность реактивного хранилища. Если у вас небольшое приложение, вы, вероятно, сможете обойтись без использования только Svelte API. Однако для более крупных и сложных приложений требуется полноценное решение для управления состоянием. Это похоже на то, как нам нужен Redux, когда у нас есть React Context API.
Замечание об архитектуре Акиты:
Два основных компонента Akita - это магазин и запрос. Вы можете представить себе хранилище как таблицу, содержащую данные в базе данных, и вы можете выполнять с ней различные действия, такие как вставка, обновление и т. Д. Мой компонент svelte будет реактивно получать данные из запроса. И поскольку я хочу, чтобы он не зависел от источника данных, я не буду импортировать хранилище внутри компонента; Вместо этого я создам службу, с которой будет работать компонент.
Как видите, Akita определяет строгий шаблон для управления данными вашего состояния. Он поставляется с мощным управлением сущностями, надежным набором плагинов и инструментов для разработки, а также собственным кликом. Svelte и Akita - отличная естественная комбинация, потому что запросы Akita могут возвращать наблюдаемые, которые Svelte поддерживает из коробки. Итак, вот один пример того, как их можно использовать в тандеме:
Включение Акиты
Чтобы добавить Akita в свое стройное приложение, я устанавливаю его и его cli через npm. Я начинаю со свежего семени Svelte и продолжаю создавать традиционное приложение TODO с использованием Svelte и Akita.
Магазин TODO Entity
Поскольку мы имеем дело с элементами TODO, я решил создать Entity Store в Akita. Вы можете думать о хранилище сущностей как о таблице в базе данных, где каждая строка представляет собой сущность. Для этого я использую Akita CLI.
В самом магазине есть все встроенные методы, которые мне нужны для выполнения операций CRUD с моими объектами.
В дополнение к этим методам я добавляю параметр фильтра при создании магазина, представляющий данные состояния пользовательского интерфейса, используемые для фильтрации отображения элементов TODO.
Сервис TODO
Далее я создам вышеупомянутый сервис:
Он содержит все методы, которые мне понадобятся для обновления / чтения с сервера и магазина.
Запрос сущности TODO
Встроенные методы Akita Entity Query можно разделить на два типа. Метод, который начинается с select, для которого вы получаете наблюдаемый объект для запрошенных данных, и методы, которые начинаются с get, в котором вы напрямую получаете запрошенные данные. Важно подчеркнуть, что подписка не будет активирована, если запрошенное вами значение не будет изменено по ссылке. К ним я добавляю следующие методы:
Я использую combineLatest, чтобы подписаться на магазин, получить последнюю версию списка TODO и отфильтровать его в соответствии с последним выбранным фильтром.
Следующим шагом будет создание компонентов Svelte, которые взаимодействуют с магазином Akita Entity:
Компонент фильтра
Исключительная ответственность этого компонента состоит в том, чтобы позволить пользователям определять критерии, по которым они фильтруют список TODO:
Компонент Add TODO
Этот компонент отвечает за отправку события todo с целью добавления TODO:
Компонент TODO
Он используется для отображения одного элемента TODO вместе с кнопкой для его удаления и флажком для переключения его статуса «завершено»:
Соединение точек
Наконец, компонент TODOs будет использовать все ранее упомянутые компоненты вместе с запросом и сервисом, которые я создал, для управления моим списком:
Конечный результат
Прежде чем мы закончим, я хотел бы добавить последний лакомый кусочек: еще одна вещь, которую вы можете получить от Akita из коробки, - это возможность сохранять состояние через локальное хранилище. Я просто добавляю в основной JS файл:
И вуаля, теперь ваше состояние стойкое!
Вы можете найти все файлы для этого примера здесь.
Подводя итог: И Akita, и Svelte предлагают умеренную кривую обучения и позволяют легко создавать невероятно компактные приложения с суперэффективным управлением состоянием из коробки. Я рекомендую вам попробовать оба, вместе или по отдельности 👯♀️
Вот еще несколько статей об аките:
Подпишитесь на меня на Medium, чтобы узнать больше о Svelte, Akita, JS!
