#53 Angular UIKit. Когда вам потребуется angular schematics. Использование в UiKit и в бизнес приложениях. Рецепт schematics в angular library.
В этой статье мы рассмотрим следующие пункты:
- Что такое schematics.
- Сценарии для использования angular schematics в UiKit.
- Сценарии для использования angular schematics в бизнес приложениях.
- Сделаем пример — создадим angular библиотеку с кастомной schematics.
Что такое schematics:
Я много времени проработал с material design компонентами для angular. Мои проекты стартавали с 6 и 7 версии и сейчас они обновлены до 10 версии. У меня ни разу не возникло больших трудностей с переходом на новую версию angular за все эти годы, несмотря на то, что многие, вспоминая angularjs, продолжают удивляться этому факту, факту легкости обновления.
Все, что мне нужно было сделать это зайти на сайт https://update.angular.io/ и выполнить набор команд от команды angular и material. И все это возможно благодаря schematics! Так чтоже это за зверь?
Schematics — это кодогенератор, с помощью которого можно создавать команды для генерации кода и измениния, что это за генерации рассмотрим ниже на примере. В основе его лежит AST, я думаю если вы пробовали писать свои ts/jslint правила для вас будет проще понять как он работает. Наглядно с AST можно поиграться тут https://astexplorer.net/
До тех пор пока я не начал создавать свой UiKit, я не вдавался в подробности Schematics, и это было зря, я слепо читал статьи, слушал на конференциях про него, обсуждал, но не применял.
Использование angular schematics в UiKit:
- Создание команд для быстрого старта, напримр в material —
ng add @angular/material // команда добавляетя базовые модули и тему.
2. Команды для быстрого создания компонент, в которых будет создан готовый стартер для использования компонент UiKit. Например, в material — ng generate @angular/material:address-form // создаст компонент формы, добавит нужные модули, создаст form.
3. И самое крутое это обновление на новые версии UiKit. Только представьте, как приятно когда material меняет api у компонент, но вам не нужно лопатить весь проект, благодаря schematics все будет сделано за вас.
Использование angular schematics в бизнес приложениях:
- Инфраструктура, наверняка каждый ваш проект в компании имеет похожые вещи, AuthService, HttpInterceptor, Permissions и тд, да все можно вынести в пакет, но каждый раз стартуя проект придется везде вставлять их модули и писать однотипный код. В это случае можно описать свой schematics и одной командой добавлять нужные сервисы.
- Можно пойти дальше, вероятно могут быть проекты с типовым меню, раутами и хедарами, все это каждый раз можно копировать, или копировать стартер, куда приятней сделать 1 раз schematics и одной кнопкой получать дашборд из material.
- Обновление — тут тоже подходит это кейс, для ваших внутренних пакетов.
- schematics внутри проекта — например для добавления меню вы идете вставляете его в верстку, регистрируте в раут, в компонент добавляете PermissionsService для скрытия каких либо элементов, все это также можно завернуть и оптимизировать вашу рутинную работу.
Cоздадим angular библиотеку с кастомной schematics:
- Создадим workspace, внутри которого будет лежать проект и библиотека. ng new ng-schematics-library.
2. Создадим библиотеку командой ng generate library ng-test-library. После выполения появились новые папки и файлы библиотеки, и изменился angular.json.
3. Установим зависсимости schematics и angular cdk
npm i @angular/cdk
npm i @angular-devkit/schematics
npm install -g @angular-devkit/schematics-cli
4. Создадим кастомный schematics. Будет создавать простой компонент.
ng-schematics-library/projects/ng-test-library/src/lib/components/schematics/ng-generate/layout/files/__path__/__name@dasherize@if-flat__ содержит файлы шаблоны будущего компонента.
ng-schematics-library/projects/ng-test-library/src/lib/components/schematics/ng-generate/layout/index.ts — содержит в себе билдер компонентов по шаблону. Реализован на базе AST.
ng-schematics-library/projects/ng-test-library/src/lib/components/schematics/ng-generate/layout/schema.json — содержит метаданные описания компонента, viewEncapsulation, selector и другие.
ng-schematics-library/projects/ng-test-library/src/lib/components/schematics/ng-generate/layout/shema.ts — интерфейс расширяемый от @schematics/angular/component/schema.
ng-schematics-library/projects/ng-test-library/src/lib/components/schematics/collection.json — содержит метаданные всех созданных кастомных schematics их будем использовать для вызова команд.
5. Нужно настроить проект и сборки для работы с angular schematics.
Откроем package.json проекта библиотеки ng-schematics-library/projects/ng-test-library/package.json.
Добавим строчку: ”schematics”: “./collection.json”
Тут важно понимать, поскольку мы делаем schematics внутри библиотеки и будем ее публиковать, то этот путь не до вышесозданного collection.json, а до того места куда файл попадет после сборки внутри библиотеки.
Для сборки schematics внутри библиотки нужно создать новый tsconfig (можно скопировать отсюда и отредактировать пути https://angular.io/guide/schematics-for-libraries).
Доработаем package.json проекта скриптами.
6. Соберем библиотеку и потом соберем schematics. Это делается последовательно.
ng build ng-test-library — prod
Соберем schematics npm run buildschematics
Выполним npm run postbuild для того чтобы скопировать статичные файлы schematics. В результате получим готовую сборку для публикации.
Перейдем в папку дистрибутива cd dist/ng-test-library
И сделаем публикацию npm publish
Установим пакет в любом проекте npm i ng-test-library@0.0.1
выполним команду ng generate ng-test-library:layout и введем название компоненты. Супер! schematics сгенерировал компонент.
Ссылка на исходники https://github.com/AnteaterKit/ng-schematics-library
Далее можно проработать скрипты в package.json и настроить ci/cd в Gitlab! Думаю статья будет полезна тем кто захочет развивать свою библиотеку с schematics. Делитесь вашим опытом в комментариях и ставьте лайки.
Полезные ссылки:
https://medium.com/ignite-ui/angular-schematics-for-libraries-656159c90b57
https://angular-doc.ru/guide/schematics-for-libraries
https://angular.io/guide/creating-libraries
