على مدى السنوات العشر الماضية ، أصبح تطوير الواجهة الأمامية أكثر تعقيدًا: من HTML / CSS النقي إلى مواضيع مثل التفاعل العالي وإمكانية الوصول وإمكانية الاختبار والأمن. لتلبية هذه الاحتياجات ، تنقسم معظم فرق التطوير إلى فرق خلفية وأمامية.
بالإضافة إلى ذلك ، فإن وظيفة التطبيق تنمو بشكل مطرد ، وفي مرحلة ما يصبح من غير المألوف الجمع بين العديد من الفرق في قاعدة رمز واحدة.
أصبح المصطلح العصري Micro-Frontends بمثابة طريقة لتقسيم كود الواجهة الأمامية المتنامي إلى أجزاء سهلة الصيانة. تنقسم الواجهة الأمامية إلى عدة وظائف أو أجزاء يتم إصدارها ونشرها بواسطة فرق مستقلة ، مما يزيد من قابلية الاختبار وإعادة الاستخدام ويجعل من الممكن اختيار تقنيات مختلفة لكل واجهة صغيرة.
سأتوقف هنا دون مزيد من المداعبة ، فلننشئ مثالًا على الواجهة الأمامية الدقيقة باستخدام العناصر الزاويّة.
إنشاء مايكرو Frontends
في هذه المقالة ، سنقوم بإنشاء مثال لنظام حجز السفر. دعونا نشر مشروعين Angular باستخدام CLI: حجز السفر وحجز الرحلات الجوية .
نحتاج إلى بعض التبعيات لبناء وتشغيل عناصر Angular مخصصة. تثبيت التبعيات التالية داخل حجز الطيران.
ng add @angular/elements ng add ngx-build-plus
يمكن أيضًا تثبيت هذه التبعيات عبر NPM. @ الزاوي / العناصر يوفر الدعم للعناصر الزاوي. يعد ngx-build-plus امتدادًا لـ Angular CLI لمشروعات البناء.
ملاحظة: قد تحتاج إلى ترقية إصدار الوحدة النمطية لعنصر المستند - المستند إلى 1.8.1 في /flight-booking/package.json ، كما هو موضح في هذه المشكلة .
نقوم أيضًا بتثبيت وحدة http-server في مشروع حجز الرحلات الجوية .
npm i -g http-server --save
إنشاء مكون الحجز في flight-booking / src / app / . تغيير المكون كما يلي:
flight-booking / src / app / booking / booking.component.html
<div style="text-align:center"> <a href="javascript:alert('Welcome to Flight Booking App!!');" style="font-size:25px;">{{ title }}</a> </div>
flight-booking / src / app / booking / 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() { }
دعونا نحدد مكون الحجز كعنصر مخصص في 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 واحد ، يجب أن تخبر الزاوي باستخدام الوحدة النمطية ngx-build-plus . عدِّل حجز رحلة الطيران / angular.json في ثلاثة أماكن على النحو التالي:
"architect": { "build": { "builder": "ngx-build-plus:build", .... "serve": { "builder": "ngx-build-plus:dev-server", ... "test": { "builder": "ngx-build-plus:karma",
إطلاق المشروع
قم بتشغيل الأمر التالي لتجميع المشروع في ملف واحد:
ng build --prod --output-hashing none --single-bundle true
- تجزئة الإخراج (لا شيء) يتجنب تجزئة أسماء الملفات.
- دمج حزمة واحدة (صواب) جميع الملفات المترجمة في ملف JS واحد.
بدء الخادم.
http-server ./dist/flight-booking -p 8081
وبالمثل ، قم بإنشاء عنصر حجز قطار مخصص آخر وابدأ تشغيل الخادم باستخدام المنفذ 8082.
http-server ./dist/train-booking -p 8082
غلاف البند مخصص
دعنا نربط عناصر حجز رحلات الطيران وحجز القطار مع تطبيق الحجز . تعديل /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>
الزاوي يتطلب zone.js ، ويوفر 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 . سيبدو التطبيق النهائي كالتالي:
في المجموع
باستخدام أمثلة بسيطة ، يوضح المقال كيفية إنشاء بنية واجهة أمامية متناهية الصغر باستخدام عناصر Angular.