Yamato DaiwaFrontend (2.0.0-beta.4)
English
日本語
Русский

GUI-компоненты

Компоненты графического пользовательского интерфейса появились в YDF начиная с версии 2.0.0. В сравнении с существовавшими ранее UI/UX-фреймворками, можно выделить следующие особенности YDF:

  • Разметка
    • Разметка компонентов поставляются в виде Pug-примесей. Таким образом, пока примесь не вызвана, выходного HTML-кода не прибавится.
    • Параметры примесей проходят валидацию с подробным отчётом в случае нарушений, благодаря которому в большинстве случаев можно исправить ошибку самостоятельно не обращаясь к документации (при владении английским со словарём). Во многом именно ради этого было необходимо интегрировать в Pug-код функциональность библиотеки @yamato-daiwa/es-extensions.
    • Разметка компонентов написана с учётом доступности и поисковой оптимизации, однако ввиду того, что эта разметка инкапсулирована в Pug-примеси, пользователям YDF не нужно вникать в эти детали, а только указывать нужные свойства при использовании примесей.
  • Стили
    • Все стили компонентов поставляются в виде Stylus-примесей.Таким образом, пока примесь не вызвана, выходного CSS-кода не прибавится.
    • Как и в случае с разметкой, параметры примесей проходят валидацию с подробным отчётом в случае нарушений, благодаря которому в большинстве случаев можно исправить ошибку самостоятельно не обращаясь к документации (при владении английским со словарём). К сожалению, валидация параметров приводит к ощутимому увеличению времени преобразования из Stylus в CSS, потому лучше YDF-компоненты собирать в отдельный CSS-файл.
    • Возможно несколько подходов кастомизации стилей компонентов от небольшой модификации готовых стилей до полного самостоятельного написания стилей. Но даже в последнем случае YDF представляет ценность, потому что помимо стилей от также предлагает качественные разметку и логику (TypeScript-код).
    • Хотя помимо основного пакета YDF предлагает адаптации для популярных фронтенд- фреймворков (таких как Vue), стили поставляются основным npm-пакетом YDF (@yamato-daiwa/frontend), поскольку они не зависят от конкретного фреймворка.
  • Логика (TypeScript-код)
    • Логика поставляется в виде TypeScript-классов с максимальной типовой безопасностью (все типы прописаны вручную без использования any).
    • Для использования логики необходим сборщик проектов, такой как Webpack.
    • В рамках объектно-ориентированного программирования, возможно наследование классов компонентов с целью добавления новой функциональности или изменения уже существующей.

Разметка

Получение доступа к API

Для того, чтобы получить доступ к Pug-примесям компонентов, необходимо подключить 2 файла: Functionality.pug и Components.pug в указанном порядке. При этом, если Ваш Pug-файл унаследован от поставляемого YDF шаблона страницы , то Functionality.pug уже подключён, повторное его подключение приведёт к ошибке.

Имена Pug-примесей компонентов подчиняются шаблону [ИмяКомпонента]--YDF, где --YDF — вендорный постфикс, добавленный с целью значительного уменьшения вероятности возникновения конфликта имён, но также указывающий, что компонент взят из сторонней библиотеки, а не разработан специально для конкретного проекта. Например, компоненту Button соответствует примесь Button--YDF.

На этом подключение разметки завершено, однако для корректного отображения компонентов необходимо подключить стили. Если же Вы хотите ознакомиться с Pug-примесью конкретного компонента сейчас, то выберете интересующий Вас компонент:

Производительность при использовании в MVC-приложениях

Генерировать HTML-код GUI компонентов на серверной стороне в ответ на клиентские запросы не рекомендуется, потому что необходимые для этого файлы Functionality.pug и Components.pug значительно (по меркам современных требований к скорости отображения страницы) увеличивают время генерирования HTML-кода. К тому же, в большинстве случаев HTML-код компонентов не зависит от запроса, таким образом серверу придётся каждый раз затрачивать ресурсы на генерирование одного и того же HTML-кода.

В то же время, сначала делать статическую версию с использованием Pug-примесей, а потом на основе сгенерированного HTML-кода писать шаблон для MVC-фреймворка — неприемлемо с точки зрения современных требований по автоматизации рутин. О том, как этого избежать, было подготовлено соответствующее руководство.

Стили

Получение доступа к API

Для того, чтобы получить доступ к Stylus-примесям компонентов, необходимо подключить 2 файла: Functionality.styl и Components.styl в указанном порядке.

© 2023 Yamato Daiwa Co., Ltd.