январь 8, 2018 · angular ngx-kit

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

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

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

TL;DR

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

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

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

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

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

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. Теперь на очереди очень важные и востребованные фичи.

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

Ссылки

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket