DEV.NVX.ME

Angular & TypeScript

Ngx-kit — набор инструментов и генератор компонентов для Angular 5

| версия Angular: 5
ngx-kit-preview.jpg

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

Попробуем разобраться, почему так происходит и что можно с этим сделать.

TL;DR

У меня появилась идея не совсем обычной либы компонентов. Так-как условия на каждом проекте уникальные, то сложная логика компонентов вынесена в сторонний пакет, а нужные компоненты вы можете быстро сгенерировать (с помощью Angular CLI) прямо в свой проект из готовой коллекции, получив доступ к их коду и шаблонам.

Суть проблемы

Готовые компоненты или даже либы компонентов, которые мы привыкли подключать через npm/yarn, позволяют существенно ускорить скорость разработки приложения. Для UI-компонентов есть специфические проблемы, чаще-всего связанные с требованиями по дизайну или бизнес-логике.

Существующие сложности

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

Варианты решения

  • Создаем issue и ждем - можно попытать счастья и сообщить о проблеме разработчикам, если они заинтересуются, то через какое-то время вас будет ждать апдейт. Тут стоит разделять баги и функционал, если функцинал разработчикам не интересен, то ждать нужно будет долго.
  • Делаем PR и ждем - хорошим тоном для опенсорса является реализация функционала своими руками. Тут нужна малость: разобраться в чужом коде и стиле, реализовать необходимый функционал и сделать пулл-реквест. Если все пройдет гладко, то апдейт доставят уже в следующей версии компонента.
  • Делаем форк - если вы готовы к предыдущему шагу, то до своего релиза далеко ходить не нужно. Так уж случается, что ваш функционал нужен только вам или разработчики просто забивают на свое детище. В то же время вы сможете мержить апдейты из исходного репозитория и поделиться своими трудами с коллегами.
  • Тянем весь код в проект - у такого решения свои недостатки (по-сравнению с форком), с другой стороны не нужно релизить пакет, следить за версиями и можно выбросить ненужный функционал.
  • Пишем компонент самостоятельно четко под поставленные задачи, это может занять больше времени и ресурсов, но в результате оправдать вложения. При этом никто не запрещает подсматривать решения из готовых компонентов, чтобы сократить углы и избежать основных ошибок.

С радостью дополню эти списки вашими вариантами — сообщите о них в комментариях или на мой email: [email protected].

ngx-kit

Нет какого-то универсального механизма по модификации компонетов и это справедливо для любого фреймворка.

Но получив доступ к коду, мы можем делать с ним что нам пожелается, однако для сложных компонентов количество кода и его сложность может зашкаливать. Поэтому ngx-kit разделен на 2 пакета - core и collection.

@ngx-kit/core

Это самостоятельный пакет, который содержит хелперы для создания компонентов и управления UI. Ядро поддерживает AOT, сервер-рендеринг, устанавливается через npm и код покрыт тестами.

@ngx-kit/collection

Коллекция — это набор генераторов кода, который существенно упрощает работу с ядром. За несколько секунд вы можете добавить любой компонент и потом быстро его модифицировать под свои нужды. Ознакомиться со списком существующих модулей можно на сайте.

Пример

Небольшой видео-пример как установить пакеты, сгенерировать date-picker и модифицировать его: https://www.youtube.com/watch?v=th9fhD1e3d4

Итоговый код примера из видео в песочнице: https://stackblitz.com/edit/ngx-kit-date-picker-demo

Главная сложность

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

Такова цена за гибкость. Обязательно учитывайте это и взвешивайте “за” и “против” для каждого проекта.

Замечу, что сложная часть логики из ядра будет обновляться в обычном режиме.

Планы

Первый стабильный релиз был 1 января 2018. Теперь на очереди очень важные и востребованные фичи.

На данный момент в приоритете три модуля:

  • Модалки (сейчас реализованы в самом базовом варианте) #141
  • Формы #106
  • Работа с таблицами #107

Ссылки


Задавайте вопросы или делитесь своими идеями в комментариях.

Также подписывайтесь на мой twitter и спасибо за внимание!

Proudly powered by Hexo and Theme by Hacker
© 2018 Sasha Novik