- PVSM.RU - https://www.pvsm.ru -
Фабрика виджетов — способ организации клиентского кода, который отлично вписывается в архитектуру multi-page application (MPA).
В статье будет рассмотрено архитектурное решение, которое позволит оптимизировать загрузку скриптов, разделить код на виджеты и упростит передачу данных на клиент со страницы (при серверном рендеринге).
Виджетами будут называться компоненты (или контейнеры компонентов), точкой инициализации которых будет DOM. И в которые можно будет передать данные из шаблона.
А сейчас обо всем последовательно.
На странице размещаются информация о вызываемых виджетах (имя виджета, данные для него).
Логика реализации будет в основном и единственном подключаемом бандле, состоящем из:
Здесь и далее под common-виджетами будут пониматься те виджеты, которые чаще всего необходимы в приложении, например: навигация, поиск.
Здесь и далее под lazy-виджетами будут пониматься те виджеты, которые нужны в редких случаях. Забегая вперёд, такие виджеты будут загружаться динамически, например: галерея, маркетинговые окна.
Чтобы лучше понять концепцию, разберем пример реализации.
Сама реализация архитектуры довольно проста, с ее вариантом можно ознакомиться на гитхабе [1]. В ее основу лег Webpack и его динамический импорт [2].
Далее пробежимся по основным логическим пунктам:
<script type="application/widget+json">
{
"widget": "TesLazyWidget",
"data": {
"1": 1
}
}
</script>
initWidgets($('script[type="application/widget+json"]'));
data = $.parseJSON(script.innerHTML);
widget = new Widget(data);
loaderWidget().then(createWidget);
for (let i = 0; i < this.widgets.length; i++) {
this.widgets[i].start();
}
const widget = new Widget(data);
widget.start();
Реализация схематично.
Основной бандл содержит только критические скрипты, основная функциональность. Дополнительная логика будет загружена динамически. В таком бандле будет высокий процент покрытия кода (code coverage). Это уменьшает его размер страницы, и как следствие повышает производительность.
Например, сразу загрузится меню и информация о пользователе, а динамически загрузится рекламное предложение, галерея картинок и дополнительные визуальные эффекты.
Нет необходимости создавать и настраивать роуты и загружать нужные скрипты в зависимости от урлов или шаблонов. Не нужно поддерживать сложные зависимости, а следовательно уменьшается риск ошибки.
Просто отрендерив JSON на странице, уже на этапе разбора данные попадают на клиент, без необходимости дополнительных AJAX-запросов.
<script type="application/widget+json">
{ "widget": "ActionBar"
, "data": {
"isPublic": true,
"id": "{{ id }}",
"items" : [{
"title": "Edit",
"iconLeft": "edit"
}]
}
}
</script>
Переиспользовать виджет? Легко! Например, на странице нужно реализовать несколько списков новостей с фильтрами, подгрузкой и прочей интерактивной логикой. За реализацию этого функционала будет отвечать виджет NewsList. Аналогично html-тегам, достаточно просто вставить в шаблон вызов этого виджета столько, сколько нужно списков, и везде требуется.
<script type="application/widget+json">
{
"widget": "NewsList",
"data": {
"contentId": "business"
}
}
</script>
<script type="application/widget+json">
{
"widget": "NewsList",
"data": {
"contentId": "policy"
}
}
</script>
Фабрика виджетов формализует правила написания кода, что в свою очередь создает четкую структуру инициализации и выполнения скриптов. В этом подходе цепочка вызова виджетов линейна. Логика каждого из них инкапсулирована, и, как результат, — меньше непредвиденных последствий от изменения кода, меньше сумбура в проекте, большая гибкость системы.
Когда в приложении все уже написано, но без особой идеи. Постоянное ощущение бардака не покидает. И в проекте сплошь и рядом инлайн скрипты
<script>
require(['jquery', 'selectBoxIt'], function ($) {
$('#itemId_selector').selectBoxIt();
var $form = $('#savepost');
……..
$('#skip').click(function () {
$form.submit();
});
});
</script>
то нужно лишь создать виджет и перенести этот код в него. Таким образом фабрика виджетов — это отличный способ перейти на компонентный подход.
Плюс ко всему можно сделать автоматическую генерацию списка виджетов, как, например, тут [3]. Это упростит создание виджета до создания каталога с его именем и файла с его реализацией, что, собственно, тоже можно автоматизировать.
В итоге в архитектуру MPA фабрика виджетов отлично вписывается. Формализует код, оптимизирует загрузку и дает четкие и удобные правила по использованию.
Автор: Дмитрий Кривега
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/265100
Ссылки в тексте:
[1] гитхабе: https://github.com/Krivega/webpack-factory-widgets
[2] динамический импорт: https://webpack.js.org/guides/code-splitting/#dynamic-imports
[3] тут: https://github.com/Krivega/webpack-factory-widgets/blob/master/gulp/tasks/factory-widgets.js
[4] Источник: https://habrahabr.ru/post/339522/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.