Создание микро-фронтендов с использованием Angular Elements: руководство для начинающих
За последние десять лет фронтенд-разработка значительно усложнилась: от чистого HTML/CSS до таких тем, как высокая интерактивность, доступность, тестируемость и безопасность. Чтобы удовлетворить эти потребности, большинство команд разработчиков делятся на бекенд и фронтенд команды.
В дополнение к этому функциональность приложения стабильно растет, и в определенный момент становится нецелесообразным объединять несколько команд на одной кодовой базе.
Модный термин «Микро-фронтенды» стал обозначать подход к разделению растущего фронтенд-кода на простые в обслуживании части. Фронтенд делится на несколько функций или частей, которые релизятся и деплоятся независимыми командами, что повышает тестируемость, переиспользуемость и дает возможность выбирать разные технологии для каждого микро-интерфейса.
Здесь я остановлюсь и без дальнейших прелюдий, давайте создадим пример микро-фронтенда с использованием Angular elements.
Создание микро-фронтендов
В этой статье мы создадим пример системы бронирования путешествий. Давайте развернем два Angular-проекта, используя CLI: travel-booking и flight-booking.
Нам потребуется несколько зависимостей для билда и запуска кастомных элементов Angular. Установите следующие зависимости внутри flight-booking.
Эти зависимости также могут быть установлены через NPM. @angular/elements обеспечивает поддержку Angular элементов. ngx-build-plus – это расширение Angular CLI для сборки проектов.
Примечание: вам может потребоваться обновить версию модуля document-register-element до 1.8.1 в /flight-booking/package.json, как описано в данном issue.
Также установим модуль http-server в проекте flight-booking.
Создайте booking компонент в flight-booking/src/app/. Изменим компонент следующим образом:
flight-booking/src/app/booking/booking.component.html
Давайте определим booking компонент как кастомный элемент в flight-booking/src/app/app.module.ts.
Чтобы сбилдить проект в один JS-файл, нужно указать angular использовать модуль ngx-build-plus. Измените flight-booking/angular.json в трех местах следующим образом:
Запуск проекта
Выполните следующую команду, чтобы собрать проект в один файл:
–output-hashing (none) позволит избежать хэширования имен файлов.
–single-bundle (true) объединит все скомпилированные файлы в один JS-файл.
Запустите сервер.
Аналогичным образом создайте еще один кастомный элемент train-booking и запустите сервер с портом 8082.
Обертка кастомного элемента
Давайте подключим кастомные элементы flight-booking и train-booking в приложение бронирования. Измените /travel-booking/index.html следующим образом.
Angular-у требуется zone.js, а custom-elements-es5-adapter.js обеспечивает поддержку кастомных элементов в браузере. Мы также подключили main.js из наших кастомных элементов.
Измените travel-booking/angular.json, чтобы переопределить порт сервера по умолчанию.
Запуск основного приложения
Запустите приложение, используя ng serve. Финальное приложение будет выглядеть как-то так: 
Итого
На простых примерах статья демонстрирует, как можно построить микро-фронтенд архитектуру, используя элементы Angular.
Что такое Angular
И зачем он фронтенд-разработчику.
Если посмотреть на вакансии фронтендеров, мы часто заметим там три слова: Angular, React и Vue. Это равнозначные технологии, которые одинаково популярны и различаются в деталях. Погружение в детали отнимает время, и поэтому обычно разработчики выбирают что-то одно — изучают то, что больше понравилось.
Сегодня мы познакомимся с Angular. Разберёмся, как устроена технология и что нужно знать для её изучения.
Angular — это фреймворк компании Google. Он нужен для разработки браузерных, десктопных и мобильных приложений — таких, где можно быстро и бесшовно перемещаться по сайту.
Что было до Angular и других SPA-фреймворков
Angular работает по принципу SPA, single-page application. Чтобы понять, что это такое, надо сначала понять, чем это не является.
Традиционный подход к веб-приложениям был примерно такой:
Это можно сравнить с заказом еды в ресторане, с той лишь разницей, что заказать можно только одно блюдо за один раз. Заказал салат, съел, только потом заказал горячее. Теперь сидишь ждёшь, пока тебе его принесут. Съел горячее — заказал чай. Ждёшь, пока вскипит чайник. Принесли чай — заказал десерт. Ждёшь, когда поднимутся коржи. Вот то же самое, только в тысячу раз быстрее.
Медленные сайты всех раздражали, и разработчики придумали SPA — сначала появилась технология, а затем Angular и другие инструменты для её реализации.
Что такое SPA, single-page application
Single-page application расшифровывается как «приложение на одной странице». Работает так:
👉 Single-page означает, что сайт технически работает как бы на одной странице: там есть шапка, подвал, какое-то меню, а основное «мясо» страницы загружается динамически, в фоновом режиме, без участия пользователя. Самый наглядный пример такого приложения — это соцсеть VK: пока вы листаете ленту, вам могут написать сообщение, и оно появится на экране само, без необходимости перезагружать страницу.
Без SPA вам приходилось бы постоянно перезагружать страницу с сообщениями, чтобы понять, написали вам или нет. А с SPA всё происходит само.
Как устроен Angular: компоненты
Angular-приложения состоят из независимых элементов. Эти элементы называются компонентами, и у каждого компонента своё поведение.
Например, лента новостей — один компонент. Отвечает за отображение списка новостей на странице. Кнопка «Прочитать» — другой компонент. Отвечает за переход со страницы списка новостей к выбранной новости.
Обычно компонент программируют так, чтобы он отображал элемент на экране и выполнял какое-то действие. Компонент может реагировать на клик, сворачиваться, разворачиваться, скрываться, перебрасывать на другую страницу и так далее.
Компоненты подчиняются жизненным циклам — меняются и работают по нескольким запрограммированным сценариям. Возьмём ситуацию, когда мы переходим со страницы списка новостей к одной новости. В этом случае компонент «Лента новостей» уничтожается и при необходимости создаётся повторно. Жизненные циклы разгружают память и ускоряют приложение.
Страница с шапкой, лентой новостей и тремя кнопками. Каждый элемент — независимый компонент, который выполняет какое-то действие внутри приложения
Как устроен Angular: модули
Все компоненты подключаются к главному или дополнительным модулям. Модули управляют компонентами. Главный модуль контролирует всё приложение, а дополнительные модули следят за работой отдельных элементов.
Дополнительных модулей много. Они выполняют узкую задачу, подчиняются основному модулю и нужны для его разгрузки — отвечают за навигацию, анимацию, хранилище компонентов, взаимосвязь с браузером и прочие действия.
Взаимосвязь компонентов и модулей. К главному модулю можно подключить любое число дополнительных модулей, а к дополнительным модулям — любое число компонентов
Как устроен Angular: сервисы
Для сложных операций вместо компонентов используют сервисы. Они отвечают только за тот набор логических операций, для которых он предназначен.
Например, мы можем подключить сервис «Таблицы». Это поможет отслеживать страницы с большим количеством данных, которые после обновлений меняют содержимое сайта. Никаких других действий сервис «Таблицы» выполнять не будет.
Взаимосвязь компонентов, модулей и сервисов
Как устроен Angular: директивы
Иногда один компонент с одинаковой логикой используется в разных частях приложения. Например, если нажать на кнопку переключения валют и выбрать доллар, то возле всех цен на сайте должен появиться значок доллара.
Этот значок можно получить с помощью компонентов и директив. Компоненты проставлять долго — если на сайте 1 000 позиций с ценой, то возле всех нужен компонент со значком доллара. Директивы упрощают процесс — вы создаёте один новый блок, и он будет отвечать за значок доллара возле всех цен на сайте.
Взаимосвязь компонентов, модулей, сервисов и директив. Директивы работают независимо от модулей и могут встраиваться в любую часть приложения
Как устроен Angular: формы
Практически в любом приложении есть формы с полями и кнопками — отправить, сохранить, оставить номер телефона и так далее. В Angular для этих форм не нужно продумывать логику и тратить время на разработку — достаточно выбрать блоки с подходящими формами и подключить их к главному модулю.
Взаимосвязь компонентов, модулей, сервисов, директив и форм в Angular-приложениях
Как изучить Angular
Angular — это фреймворк для опытных фронтенд-разработчиков. Его не изучают на курсах программирования с нуля, потому что для коммерческой разработки нужные общие знания:
Требования к Angular-разработчикам периодически обновляются и публикуются на roadmap.sh. Ещё мы рекомендуем посетить madewithangular.com — это сайт с перечнем приложений и сервисов на Angular. Если не понравится результат, то вы не потратите время и выберете для обучения другой фреймворк — React или Vue.
Карта навыков фронтенд-разработчика в 2021 году. Если хотите изучить Angular — придётся освоить больше половины обязательных технологий
Что дальше
Мы рассмотрели структуру и базовые возможности Angular. Чтобы узнать больше — посмотрите официальную документацию.
Angular: когда надо пилить приложение, а backend еще не готов
Если вы занимаетесь frontend разработкой, то наверняка вам знакома следующая мизансцена: сроки по проекту стремительно сжимаются, ваше руководство, или заказчик, а-то и оба вместе желают увидеть глазами работающее приложение прямо сейчас, пусть и с ненастоящими данными. При этом back, возможно, и есть, но именно api слой взаимодействия с front’ом отсутствует от слова совсем.
Итак, недавно я столкнулся с такой ситуацией, и я разрабатываю frontend под angular (сидящие вокруг на стульях люди вяло похлопали, кто-то понимающе кивнул).
Теперь попробую серьезно. С одной стороны ситуация нередкая, и решений может быть выбрано много.
В голову приходило несколько вариантов решения:
Для реализации mock сервера был выбран express.
Давайте с него и начнем.
Выбираем место где мы хотим писать код для moсk сервера, например в директория mock-server рядом с проектом ng.
Далее нужно инициализировать проект и добавить пакет с express.
Далее добавим код, который нам будет возвращать данные. Создаем файл index.js, берем код из первого попавшегося tutorial.
Проверим с помощью postman:
Все супер, сервер работает. Теперь давайте настроим один из роутов, так как будто мы запрашиваем данные из настоящего api. Допустим, нам нужен список всех книг, наполним книгами файл books.json
И обновим файл приложения:
Отлично.
Теперь приступим к приложению angular.
Добавим в файлы environments/environment*.ts конфигурацию, которая хранит адрес до бэка.
environment.ts:
Здесь, как видно мы ищем api на 3000 порту, где мы будем запускать express.
Теперь нам нужен interceptor, который будет направлять обращения к бэку на правильный сервер, в зависимости от конфигурации.
Осталось настроить новую конфигурацию сборки и запуска приложения для работы с mock сервером.
Для этого нам надо немного подправить angular.json.
В секции вашего проекта, architect/build/configurations добавим новую конфигурацию сборки mock, и опишем замену файлов environment для этой конфигурации. Также для для режима serve создадим конфигурацию mock и укажем нужный вариант сборки
Вот и все, теперь осталось запустить проект в нужной конфигурации
и проверить куда улетают обращения к бэку:
На самом деле данная конструкция нам еще очень поможет, когда мы будем прикручивать к проекту интеграционные и e2e тесты. Об этом постараюсь написать в ближайшее время.
Angular-разработчик: кто это, обязанности, зарплаты и как им стать в 2021 году. Обзор профессии.
Кто такой Angular-разработчик?
Angular-разработчик — это разработчик программного обеспечения, который специализируется на использовании фреймворка и платформы Angular для разработки одностраничных приложений, которые взаимодействуют с пользователями онлайн в режиме реального времени.
Что делают Angular-разработчики и чем занимаются?
Обязанности на примере одной из вакансий:
Что должен знать и уметь Angular-разработчик?
Требования к Angular-разработчикам:
Востребованность и зарплаты Angular-разработчиков
На сайте поиска работы в данный момент открыто 739 вакансий, с каждым месяцем спрос на Angular-разработчиков растет.
Количество вакансий с указанной зарплатой Angular-разработчика по всей России:
Вакансий с указанным уровнем дохода по Москве:
Вакансий с указанным уровнем дохода по Санкт-Петербургу:
Как стать Angular-разработчиком и где учиться?
Варианты обучения для Angular-разработчика с нуля:
Ниже сделали обзор 5+ лучших онлайн-курсов.
5+ лучших курсов для обучения Angular-разработчика: подробный обзор
1 место. Курс «Angular» — Skillbox
Вы научитесь создавать веб-приложения, используя популярный фреймворк Angular. Освоите лучшие практики и продвинутые подходы разработки приложений, продвинетесь по карьерной лестнице и сможете зарабатывать больше.
Кому подойдёт этот курс
Научитесь разрабатывать приложения используя фреймворк Angular и станете более востребованным специалистом.
Систематизируете знания по Angular, изучите современные подходы с использованием библиотеки RxJS, научитесь строить архитектуру с помощью сервисов и NgRx и сможете повысить свой уровень до Middle.
Чему вы научитесь
Сможете создавать приложения из компонентов и автоматизировать работу через Angular CLI.
Научитесь создавать сервисную архитектуру для обмена данными с сетью и внутри приложения.
Сможете эффективнее работать с асинхронными событиями, используя библиотеку RxJS.
Будете решать повседневные задачи используя директивы и пайпы, создавать маршрутизацию и работать со сложными формами.
Создадите приложения с Redux-архитектурой, используя библиотеку NgRx.
Научитесь покрывать код тестами и оптимизировать производительность.
Программа
Вас ждут онлайн-лекции и практические задания на основе реальных кейсов.
2 место. Курс «Angular 8 Advanced» — ITEA
Хочешь научиться разработке клиентских приложений на Google-фреймворке Angular 8? Мечтаешь уметь писать код на языке TypeScript и Dart? Пройди онлайн-курсы Angular 8 и стань профессиональным специалистом по программированию, который будет всегда востребован на рынке труда.
Для кого этот курс:
Этот курс не для начинающих, а для тех, кто уже изучил основы программирования на Angular 8 и хочет повысить свой уровень квалификации. Онлайн-уроки проводятся под руководством опытных преподавателей-практиков. Теоретические понятия эффективно подкрепляются практикой и домашними заданиями, что полезно для каждого разработчика!
Минимальные требования для поступления в ITEA:
Если ты сомневаешься, достаточно ли твоих знаний для поступления на курс Angular 8 Advanced, запишись на бесплатную консультацию. Мы подскажем, хватит ли твоих навыков для комфортного обучения.
После обучения ты сможешь претендовать на должность Strong Junior Frontend Developer (Experience with Angular Framework). Если у тебя есть сомнения, достаточно ли твоих знаний для поступления на курс Angular 8 Advanced, запишись на бесплатную консультацию. Мы подскажем, хватит ли твоих навыков для комфортного прохождения курса.
На курсе ты научишься:
Полный план обучения на курсе Angular 8 Advanced:
Angular и front-end разработка.
Почему следует выбрать Angular для front-end проектов.
По правде говоря, меня нельзя назвать front-end разработчиком. Зачастую я занимаюсь разработкой back-end/ API на C#, Go, Node или Python. Около года назад я сменил компанию и получил должность full-stack девелопера. Мне было поручено создать пользовательский интерфейс, в котором присутствовала возможность обмена мгновенными сообщениями, возможность делать заметки/ делиться ими, и множество других вещей. Это было моё первое знакомство с front-end разработкой — я сделал пару небольших вещей, но сделать что-то действительно весомое я был еще не способен на тот момент. Как-то я решил начать использовать Angular(до этого я использовал Angular JS). До сих пор помню как вышел новый релиз Angular(Angular 2) и то, как я радовался по этому поводу. Сейчас с гордостью могу говорить, что я работаю с Angular еще от самого его зарождения и действительно рад, что выбрал именно этот фреймворк. В этой статье я расскажу, как Angular поможет сделать ваш следующий front-end проект более интересным.
Низкий порог вхождения
Если вы еще небольшая рыба в океане front-end разработки, то количество фреймворков вас должно обескуражить. Я не буду говорить о каких-либо других фреймворках, так как это выходит за рамки темы повествования. Я скажу одно: выбрав Angular, вы значительно упростите себе жизнь. Angular имеет низкий порог вхождения и высокую скорость разработки.
Angular CLI — это та вещь, которая значительно упрощает изучение Angular. Более того, изучение фреймворка можно облегчить с помощью сторонних инструментов, таких как Angular Console(независимо от того, являетесь ли вы новичком в Angular или нет, вам понравится этот инструмент, но его использование необязательно), что дает вам визуальный инструмент для CLI. Одно из главных преимуществ CLI заключается в том, что CLI позаботится обо всем, что вам нужно. Создание нового проекта? Окей! Создание различных сервисов, компонентов или любых других нужд проекта? — Без проблем! CLI справится и с этим. Многие люди любят Angular CLI за то, что для каждого нового компонента, сервиса, канала и т.д. CLI также создает связанный тест. CLI также предоставляет стандартизированный способ запуска этих тестов. Это дает вам дополнительную гибкость и уверенность в том, что каждый новый файл имеет тест, и вы можете обновить эти тесты на любой стадии разработки. Я мог бы написать целую статью о CLI, но в интересах лаконичности делать этого не буду.
CLI имеет еще одно дополнительное преимущество, он очень стандартизирован. Многим людям это не нравиться, но уверяю вас, это сделано лишь для того, чтобы упростить разработку. При использовании CLI Angular он автоматически устанавливает собственный набор стандартов для вашего проекта. Это позволяет избежать ряда ошибок, особенно тогда, когда вы присоединяетесь к уже сформированной команде, у которой есть проект, либо берете в команду нового разработчика.
Многие фреймворки, включая Angular, имеют огромное количество библиотек компонентов, которые вы вольны использовать. Разработчики Angular создали невероятно крутую библиотеку Angular Material, которую я просто обожаю!
Теперь небольшой экскурс в историю. В 2014 году несколько добрейших людей из Google создали язык дизайна Material Design. Если вы когда-либо использовали Gmail, принципы материального дизайна должны быть вам знакомы(по крайней мере интуитивно). Популярность Material Design значительно выросла со времен его создания. Angular Material — это, в свою очередь, уникальная реализация Google Material Design, но только для Angular. Данная библиотека инкапсулирует и стандартизирует большинство компонентов, которые нужны при создании практически любого сайта или приложения. В случае, если компонента, в котором вы нуждаетесь, нет, вы спокойно можете создать его с помощью заданных инструментов.
Angular Ivy — это новый компилятор и движок рендеринга для Angular. Его нет в стандартном пакете Angular, но вы можете вручную выбрать его использование. Крутой фичей Ivy является фактическое изменение того, что творится под капотом Angular, но при этом Ivy никак не влияет на способ создания приложения.
Я не буду углубляться в Incremental DOM, но если вы хотите изучить его более подробно, вот вам отличная статья ), которая рассказывает о том, что это вообще такое и чем Incremental DOM отличается от Virtual DOM. В основном Virtual DOM использует очень много памяти хоста для создания и распространения DOM-деревьев. Очевидно, что это не особо хорошо для мобильных приложений. Incremental DOM был разработан с целью уменьшения количества используемой памяти без потерь в скорости рендеринга. Incremental DOM фактически не использует память. Ivy будет использовать память только в том случае, когда узлы DOM добавляются или удаляются. Это приводит к значительной экономии памяти и улучшению производительности мобильных приложений.
Размер пакета, время сборки и встряхивание дерева(Tree Shaking)
Наряду с Incremental DOM, у Ivy также есть невероятные возможности для встряхивания деревьев. Встряхивание дерева в основном просто удаляет неиспользуемые фрагменты кода, уменьшая размер вашего пакета.
Крутой вещью в Ivy является то, что использование Incremental DOM также может быть встряхиванием дерева. Angular традиционно имеет гораздо больший размер пакета, чем другие фреймворки, но с каждой итерацией он становится меньше. То же самое можно сказать о времени сборки.
Идеален ли Angular?
Несмотря на мою преданность и любовь к этому фреймворку, я должен сказать, что он все же не идеален. Когда я говорю, что Angular превосходит все другие фрейморки, я могу ввести доверчивого читателя в заблуждение. Действительно, Angular имеет свои недостатки и лучше я напишу о них сразу, чтобы потом не было разочарований.
Используя Ivy, вы можете оптимизировать размер сборки примерно на 15–20%, но это все еще уступает место другим фреймворкам. Чем больше размер вашей сборки, тем медленнее будет ваш первый рендер. Эта проблема постепенно решается, но в данный момент это все еще остается слабым местом Angular.
Тут все зависит от вашего бекграунда. Мне нравится это свойство. Я могу понять основной принцип работы проекта, лишь взглянув на его код. Но в том случае, если вы предпочитаете писать аутентичный код, стандартизация станет для вас проблемой.
Angular был разработан и поддерживается компанией Google. Инженеры Google известны своей исключительностью — у них есть склонность к закрытию проектов. AngularJS — отличный пример этому. Некоторые волнуются, что история Angular может закончиться также, но я не думаю, что стоит волноваться по этому поводу.
Такс… Буду заканчивать!
Я искренне надеюсь, что вне зависимости от вашего уровня программирования, вы все таки решитесь попробовать Angular. Фреймворк Angular действительно имеет много крутых фич, которые помогут вам в разработке приложений.
