@zasada/core v0.3.0-alpha.1

Zasada

Фабрика виджетов, для упрощения WEB разработки, с рендерингом HTML на сервере.

Определения

• Виджет - ecmascript class с методом run ( запускается при привязке виджета к DOM узлу ).
• Блок - DOM узел, к которому привязан виджет.
• Элемент - DOM узел потомок блока. Смысл определений блок и элемент из БЭМ методологии.

Разметка

<div class="_ _Widget"> // блок, к которому првязан виджет "Widget"
    <span class="_Widget-Element1"></span> // элемент виджета Widget, с названием "Element1"
    <span class="_Widget-Element2"></span> // элемент виджета Widget, с названием "Element2"
</div>
// "_" - специальный класс, чтобы в один запрос к DOM найти все узлы с виджетами

// виджет
class Widget {
    run() {}
}

Особенности

• Больше подходит для рендеринга HTML на сервере.
• Легко переносить виджеты из проекта в проект, достаточно перенести esmodule класс, и добавить HTML class верстку.
• Минимум обращений к DOM, один запрос document.querySelectorAll( '' ) для всех виджетов_ на странице.
• Кеширование элементов внутри контекста виджета, к DOM обращение только один раз.
• Легкое обращение из одного виджета к другому через специальный интерфейс ._rel или через события.
• Возможность вложенности виджетов, например когда элемент одного виджета является блоком другого

<div class="_ _Widget1 _Widget2">
    <span class="_ _Widget3 _Widget1-Element _Widget2-Element">
        <span class="_Widget1-Element _Widget3-Element"></span>
    </span>
</div>

• Dependency injection реализация, позволяющая гибко изменить - расширить функционал.
• Легкая возможность подгрузки по требованию кода виджетов с сервера ( Lazy ).
• Подгрузка с сервера необходимых для работы полифилов при необходимости.
• Расширяемая система логирования ошибок
• Простая возможность передавать с сервера необходимые дополнительные действия на странице. Например после ajax запроса, просто добавляя дополнительные css классы в HTML ответ. Например, закрыть popup.
• Средний размер 38 kb ( 10 kb gz )

Примеры

Codesandbox

Boilerplate app ( простой шаблон приложения )

npm install -g degit
npx degit kraut-dps/zasada/packages/boilerplate#@zasada/boilerplate@0.0.4
npm i
npm run dev

API Reference

Пока отдельного описания нет, но есть в примерах - нужно в окне browser кликнуть по WidgetApi или LinkerApi.

Концепция

• По аналогии с DOM, CSSOM еще одна Object Model, где узлами являются DOM элементы с привязанным js функционалом.
• На определяющие привязку виджетов class значения не добавляются css свойства, для отделния функционала, и отображения.
• Один виджет не обращается к элментам другого виджета. В другом виджете раеализованы публичные методы для реализации необходимого.

• Дополнительная декларативность через HTML. Например, виджет слайдер картинок, кнопки предыдущая-следующая. Вместо того, чтобы через js создавать новые узлы DOM, в зависимости от параметров, виджет при наличии в HTML элементов кнопок отслеживает клики по ним, а при отсутствии ничего не делает.