Создание Full-Stack приложений с использованием Angular CLI и Nx

Создание Full-Stack приложений с использованием Angular CLI и Nx

От автора: Nrwl Nx создал много приложений Angular, кодом которых поделился. Это сократило время создания общей библиотеки с нескольких дней до нескольких минут. Но как насчет обмена кодами между back-end и front-end? Наш последний релиз NX создавался с учетом этого варианта использования. В этой статье мы рассмотрим, как мы можем использовать Nx, чтобы произвести в Angular создание приложения в сочетании с сервисами API из библиотек многократного использования.

Видеть значит верить

Часто при описании Nx мы говорим о преимуществах монорепозиотриев, кривых зависимостей и расширенном статическом анализе. Однако в этом посте мы покажем, что вам не нужно изучать ни одного из этих факторов, чтобы максимально использовать Nx. Эти приемы помогут вам стать более эффективными, сразу же.

Начинаем с создания нового рабочего пространства

После того, как мы установили Nx, давайте создадим новое рабочее пространство.

Nx — это расширение для Angular CLI, поэтому create-nx-workspace просто запускает ng new myorg —collection=@nrwl/schematics и обрабатывает общие ошибки при использовании глобальных пакетов npm. Эта команда создаст для вас рабочее пространство.

Папки приложений и библиотек содержат все проекты в рабочем пространстве области.

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

lib представляет собой многократно используемый фрагмент кода с четко определенным публичным API. Мы не можем запустить lib. Мы можем использовать ее только в другом lib или в app.

Создание приложений

Предположим, нам поручено создать приложение для управления тикетами. Мы можем начать с создания приложения, например: ng g app tuskdesk.

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

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

Чтобы сделать вещи более интересными, предположим, у двух приложений есть аналогичный компонент оболочки.

а также

vЭтот пример довольно причудливый, но он иллюстрирует важный момент. Это не редкость, когда мы имеем тот же компонент (или любой фрагмент кода), который используется в нескольких контекстах и приложениях.

Если бы мы разработали два приложения в двух отдельных репозиториях, извлечение двух компонентов оболочки в один многоразовый было бы затруднительным. Нам пришлось бы создать новый проект, настраивать тестирование, CI, развернуть его в приватном реестре npm и т. д. В результате мы, вероятно, решили бы не делать этого. Слишком сложно. При использовании Nx это вопрос нескольких минут.

Создание lib

В Nx мы совместно используем код с помощью libs. Итак, давайте создадим так называемый ui-shell.

Давайте обобщим наш компонент и переместим его в ui-shell.

Наконец, мы можем обновить оба приложения, импортировав ui-shell lib и используя компонент.

Извлечение этого компонента заняло всего несколько минут, и мы можем применить весь рефакторинг в одной передаче. Все в репозитории всегда будет последовательным: до и после рефакторинга.

Обращение к API

Но реальные приложения не существуют изолированно — им нужны API-интерфейсы для взаимодействия. Давайте создадим что-нибудь.

Разработка API в рабочей области Nx была возможна всегда, но до Nx 6.4 она требовала много ручной настройки, поэтому немногие брались за это. Nx 6.4 изменил это (спасибо, Джейсону Джину за реализацию).

Создание приложений Node.js

Nx использует по умолчанию Karma для тестирования приложений и библиотек Angular. Это невозможно для приложений Node. Для этого мы решили использовать библиотеку jest. Чтобы настроить jest в рабочем пространстве, нам нужно запустить ng g jest. Это делается только один раз для рабочего пространства. Теперь давайте создадим приложение Node для API.

И обновим main.ts, чтобы набросать простой сервис, возвращающий тикеты.

После настройки прокси (см. здесь) мы можем запустить API (ng serve api) и приложение (ng serve tuskdesk). На этом этапе мы увидим наше приложение, отображающее данные.

У нас есть проблема. Мы определили ticket дважды: один раз в front-end, один раз в back-end. Это дублирование неизбежно приведет к тому, что два интерфейса не синхронизируются, а это означает, что будут возникать ошибки во время выполнения. Нам нужно разделить этот интерфейс.

Опять же, обычно совместное использование кода между front-end и back-end потребует нескольких дней работы, но с Nx это делается всего за несколько минут.

Совместное использование Libs Front-end и Back-end

Теперь мы можем переместить интерфейс Ticket в библиотеку данных и обновить front-end и back-end.

Nx — умен

Мы уже показали вам удивительные вещи. У нас есть репозиторий, где мы можем создавать несколько приложений Angular и Node.js и совместно использовать код. И это заняло у нас всего несколько минут.

Но Nx может сделать намного больше. Он знает, как ваши приложения и библиотеки зависят друг от друга. Чтобы продемонстрировать это, давайте запустим npm run dep-graph, и вы увидите что-то вроде этого:

Это диаграмма зависимостей нашего рабочего пространства. Поскольку Nx знает это, он может быть умным при тестировании и построении проектов.

Если мы запускаем, скажем, npm run affected:test —base=master, вы будете тестировать только те проекты, на которые могут повлиять изменения в вашем ответвлении.

Если мы, например, изменим библиотеку данных, API и приложения tuskdesk будут повторно протестированы, а приложение tuskdesk-admin — нет, так как оно не содержит зависимостей от данных. Существуют аналогичные команды для построения, запуска тестов e2e и т. д. Обратите внимание, что все это работает для front-end/back-end.

Попробуйте!

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

Посмотрите этот бесплатный курс, чтобы узнать больше: курс. И попробуйте его. Вы также можете найти полную реализацию данного примера в этом репозитории.

Автор: Victor Savkin

Источник: //blog.nrwl.io/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: