Статьи

Интерфейсы Build Micro с использованием угловых элементов: руководство для начинающих

Июль 10, 2017

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

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

Термин «Micro Front-end» был модным словом для разбиения растущего кода переднего плана на простые в обслуживании части. Внешний интерфейс делится на несколько функций или частей. Эти части реализованы и развернуты независимыми командами. Это повышает тестируемость, возможность повторного использования и дает возможность выбирать разные технологии для каждого микро-интерфейса.

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

Построение Micro Front-Ends

В этой статье мы создадим образец системы бронирования путешествий. Давайте раскрутим два проекта Angular с использованием CLI: travel-booking и flight-booking.

Нам понадобится несколько зависимостей для создания и запуска пользовательских элементов Angular. Установите следующие зависимости внутри бронирования рейса, используя следующие команды.

ng add @angular/elements 
ng add ngx-build-plus

Эти зависимости также могут быть установлены через npm. @ angular / elements обеспечивает поддержку угловых элементов. ngx-build-plus — это инструмент для сборки Angular, который является расширением Angular CLI.

Примечание : вам может потребоваться обновить версию для модуля document-register-element до 1.8.1 в /flight-booking/package.json, как описано в этом выпуске .

Давайте также установим  модуль http-сервера в  проекте бронирования авиабилетов .

npm i -g http-server --save

Создайте компонент бронирования в flight-booking / src / app /. Давайте изменим компонент следующим образом:

заказывающий полет / ЦСИ / приложение / бронирование / booking.component.html 

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <a href="javascript:alert('Welcome to Flight Booking App!!');" style="font-size:25px;">{{ title }}</a>
</div>

летно-бронирование / ЦСИ / приложение / бронирование / booking.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-flight-booking',
  templateUrl: './booking.component.html',
  styleUrls: ['./booking.component.scss']
})
export class BookingComponent implements OnInit {

  title = 'Flight Booking App';

  constructor() { }

  ngOnInit() {
  }

Давайте определим  booking компонент  как пользовательский элемент в flight-booking / src / app / app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { createCustomElement } from '@angular/elements';
import { BookingComponent } from './booking/booking.component';

@NgModule({
  declarations: [
    AppComponent,
    BookingComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [],
  entryComponents: [
    BookingComponent
  ]
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  ngDoBootstrap() {
    const myCustomElement = createCustomElement(BookingComponent, { injector: this.injector });
    customElements.define('app-flight-booking', myCustomElement);
  }
}

Чтобы собрать проект в одном файле JS, нам нужно указать angular использовать  модуль ngx-build-plus . Измените flight-booking / angular.json в трех местах следующим образом:

"architect": {  "build": {    "builder": "ngx-build-plus:build",  ....

"serve": {    "builder": "ngx-build-plus:dev-server",    ...
 "test": {    "builder": "ngx-build-plus:karma",

Запуск проекта

Выполните следующую команду, чтобы собрать проект в один файл JS. 

ng build --prod --output-hashing none --single-bundle true

--output-hashing none позволит избежать хеширования имен файлов.

--single-bundle true объединит все скомпилированные файлы в один файл JS.

Запустите сервер. 

http-server ./dist/flight-booking -p 8081

Таким же образом создайте еще один пользовательский элемент  train-booking,  и запустить сервер с портом 8082.

http-server ./dist/train-booking -p 8082

Упаковка пользовательского элемента

Давайте включим flight-booking и train-booking пользовательские элементы в приложение бронирования путешествий. Измените /travel-booking/index.html следующим образом.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TravelBooking</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <div style="margin-bottom: 10px;" id="flight-booking-container"><app-flight-booking></app-flight-booking></div>

  <div id="train-booking-container"><app-train-booking></app-train-booking></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script>
  <script type="text/javascript" src="http://localhost:8081/main.js"></script>
  <script type="text/javascript" src="http://localhost:8082/main.js"></script>
</body>
</html>

Здесь Angular требует зон . и custom-elements-es5-adapter.js  обеспечивает поддержку пользовательских элементов в браузере. Мы также включили main.js из наших пользовательских элементов.

Измените travel-booking / angular.json, чтобы переопределить порт сервера по умолчанию.

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "travel-booking:build",
            "port": 8080
          }
…

Запуск основного приложения

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

Угловое микро приложение

Завершение

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

Как всегда, вы можете найти полный код в моем репозитории GitHub .

38
Share: