Видео курс по Svelte

1. Что такое Svelte и как он устроен?

В этом уроке проинициализируем default проект на Svelte и рассмотрим структуру default проекта. Смотреть на Rutube

2. Как устроен Компонент в Svelte?

В этом уроке рассмотрим компоненты Svelte, пропс (props, $$props, $$restProps, export let prop), реактивность SvelteJS, блоки script и style, изоляцию стилей и :global() Смотреть на Rutube

3. Жизненный цикл Svelte компонента

В этом видео рассматриваем методы жизненного цикла компонентов Svelte, а именно onMount, onDestroy, beforeUpdate, afterUpdate, а также функция tick. Смотреть на Rutube

4. HTML шаблоны в Svelte

В этом уроке рассмотрим cинтаксис HTML шаблонов Svelte, а именно if, each, await, key, а также html и debug. Смотреть на Rutube

5. Как работать с событиями в Svelte?

В этом уроке по Svelte рассматриваем работу с событиями в Svelte, а именно директиву on, модификаторы событий, переброс событий, createEventDispatcher и т.д. Смотреть на Rutube

6. Байндинги и Привязки - Svelte Bindings

В этом уроке рассмотрим привязки в Svelte, синтаксис и директиву bind:, привязки к компонентам и т.д. Смотреть на Rutube

7. Хранилище Svelte Store

В этом уроке рассмотрим store в Svelte и разновидности хранилищ: writable store (хранилище для записи), readable store (хранилище только для чтения), derived store (производные хранилища) и custom store (пользовательские хранилища). Смотреть на Rutube

8. Анимации и переходы в Svelte - Motion, Transition and Animation

В этом видео рассматриваем анимации в Svelte, а именно анимации значений (Svelte motion), анимации переходов (Svelte Transition), Svelte Animate, директивы transition, in, out и многое другое. Смотреть на Rutube

9. Действия и директива use - Svelte Actions

В этом видео рассматриваем Действия в Svelte, для чего они нужно и как ими пользоваться. Добавляем в проект директиву use, отправляем события из Действия и реализовываем функции действий - destroy и update. Смотреть на Rutube

10. Слоты - Svelte slots. Context Модуль - Svelte module context

В этом видео рассматриваем слоты в Svelte и работу с script c context="module". Смотреть на Rutube

11. API контекста - Svelte Context API

В этом видео рассматриваем возможности контекста Svelte, функции setContext, getContext и hasContext, а также применение CSS классов по условию. Смотреть на Rutube

12. Специальные элементы - Svelte Special elements

В этом видео рассматриваем специальные элементы в Svelte. Смотреть на Rutube Исходный код проекта

Независимые команды разработки

Если вы работаете в нескольких командах, организационные накладные расходы становятся значительными. Общение должно происходить хотя бы ежедневно. Согласование, необходимое для управления разработкой и развертыванием, становится невозможным. Благодаря микрофронтендам управление масштабируемостью с точки зрения ресурсов разработки становится намного проще. Как правило, каждая функция может быть разработана независимой командой. Каждая команда может автономно публиковать свой функционал без какого-либо согласования. Некоторые подходы к микрофронтендам требуют, по крайней мере, общей системы сборки или общего уровня (например, reverse proxy). Хотя такие вещи все еще можно решить заранее, они делают все решение более сложным, чтобы его можно было правильно настроить на начальном этапе. Поэтому рекомендуется искать решения, которые уже работают после первоначальной настройки.

Более быстрое время выхода на рынок (TTM, Time To Market)

Независимая природа микрофронтендов также влияет на время выхода отдельных функций на рынок. Пока монолит будет развиваться все медленнее и медленнее, микрофронтенд будет идти в ногу со временем. Естественно, здесь тоже потребуется рефакторинг и улучшение базовой технологии, однако темпы цикла, описанного ниже, для каждой новой фичи будут быстрее.

• начать новый проект
• разработать MVP
• зарелизить MVP
• пройтись по MVP (доработать и зарелизить)
• перейти в режим обслуживания

Первоначальный функционал может быть разработан и введен в действие в течение нескольких часов или дней, а не недель или месяцев. Более быстрый выход на рынок также возможен за счет совместного использования некоторых ресурсов и функций. Вместо того, чтобы разрабатывать новое приложение с нуля (включая такие вещи, как аутентификация, логирование и т. д.), все эти вещи должны быть предоставлены общим уровнем. Рекомендуется использовать подход оболочки приложения (shell), чтобы реализовать вещи, которые должны быть общими в компонентах.

Фича флаги (Feature Flags)

Замечательно иметь отдельные микрофронтенды, составляющие вместе одно приложение. Но довольно часто владельцы продуктов хотят выйти за рамки технической композиции: они хотят использовать модульность также и для бизнес-целей. Случалось ли вам когда-нибудь, что определенная функциональность должна быть доступна только определенным пользователям? Функции администратора должны быть доступны только администраторам. Хотя UI не следует использовать в качестве уровня защиты (эти проверки осуществляются на бэкэнде), мы также не хотим показывать вещи, которые нельзя (или не следует) использовать. Следовательно, мы добавим в наш код такие вещи, как:

if (hasFeature('foo')) {
  // ...
}

Это довольно плохой стиль. Наш код теперь полон вещей, которые, скорее всего, изменятся. Что, если foo верно для всех? Что делать, если функция деактивирована для всех? Что, если завтра появится новое условие, изменяющее некоторые части, чтобы также оценить, включена ли переменная bar? Поскольку у нас уже есть надлежащая модульность, довольно просто добавить фича флаги. Все, что нам нужно сделать, это ввести условный рендеринг модуля (или его загрузки) с помощью флагов. Никаких изменений кода на функциональном уровне модуля. Хотя подобные вещи могут работать и в классических монолитах, они требуют дополнительных усилий по реализации. С микрофронтендами архитектура уже полностью к этому готова.

Единая ответственность

Несмотря на то, что микросервисы не являются решением для всего, они преподносятся как таковые. Да, они, безусловно, являются хорошим решением во многих (или даже в большинстве) случаях, но очень часто монолит или другая форма сервис-ориентированной архитектуры может оказаться не менее хорошим решением. Тем не менее, наличие выделенного сервиса (с ответственной за него командой) в бэкенде — хорошее начало. Замена монолита различными микрофронтендами — это отличное продолжение, поскольку можно ввести дополнительное измерение для разделения команд.

Одна из возможностей — начать с фулстэк команд. Таким образом, команда, занимающаяся бэкэнд-модулем (микросервисом), также отвечает за фронтенд (микрофронтенд). Хотя с технической точки зрения сервис и его фронтенд определенно являются двумя разными вещами, с точки зрения бизнеса они связаны или даже являются одним целым. Наличие одной бизнес-возможности или функции от одной ответственной команды, безусловно, является преимуществом. Одна из проблем заключается в том, что типичный сценарий пользователя довольно часто затрагивает несколько бизнес-возможностей. Поэтому рекомендуется использовать фреймворк, который также позволяет динамически использовать компоненты из одного микрофронтенда в другом микрофронтенде. Связь должна быть слабой, чтобы по-прежнему можно было использовать фича флаги.

Свобода технологий

За последние два года фронтенд-технология в значительной степени стабилизировалась. Хотя и появляются новые подходы, например Svelte, которые бросают вызов таким библиотекам как React, но все же серьезных преимуществ они не предлагают. Часто существует несколько подходов и не существует универсального решения. В микрофронтенд приложениях все разные приложения могут работать вместе. Страница, написанная с помощью Angular, может использовать компонент из микрофронтенда React и наоборот. Модальное диалоговое окно для сохранения пользовательских данных может быть написано на Vue, а компонент под ним — на Svelte.

Проблема последовательного пользовательского опыта становится сложной. Возникает много вопросов. Среди наиболее важных из них:

• Мы разделяем только CSS?
• Как насчет поведения?
• Являются ли веб-компоненты решением для этого?

В результате свобода технологий всегда должна считаться наименьшей причиной для создания микрофронтендов. Рекомендуется вначале использовать чистый подход, но выбрать фреймворк, который, по крайней мере, поддерживает несколько фреймворков, в т.ч. стратегию их общения.

Итоги

Микрофронтенды — это не панацея. Они могут помочь и обеспечить ценность, когда обстоятельства благоприятны. Если ни одна из вышеперечисленных причин не имеет для вас никакого значения, велика вероятность, что вам не нужно внедрять микрофронтенд архитектуру.