Scribd
Upload
559 views

Whitepaper Micro Frontend PDF

The document discusses micro frontends, which are small independent frontend applications that can be developed and deployed independently. It describes how to build a micro frontend architecture using Angular elements. Key points include: - Micro frontends allow applications to be broken into smaller subapplications that can be developed independently but work together. - Angular elements allows Angular components to be used as custom elements in the browser. - The example shows creating an Angular component, registering it as a custom element, and communicating between components using inputs and outputs. - Micro frontends provide benefits like scalability, maintenance of independent modules, support for multiple technologies, faster development and deployment, and resilience.

Uploaded by

Aayush Tripathi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
559 views

Whitepaper Micro Frontend PDF

The document discusses micro frontends, which are small independent frontend applications that can be developed and deployed independently. It describes how to build a micro frontend architecture using Angular elements. Key points include: - Micro frontends allow applications to be broken into smaller subapplications that can be developed independently but work together. - Angular elements allows Angular components to be used as custom elements in the browser. - The example shows creating an Angular component, registering it as a custom element, and communicating between components using inputs and outputs. - Micro frontends provide benefits like scalability, maintenance of independent modules, support for multiple technologies, faster development and deployment, and resilience.

Uploaded by

Aayush Tripathi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Whitepaper: Micro frontend architecture derived from Microservices

Author: Nitin Tyagi

What is Micro Font-End?

Micro Front-Ends are small applications that can be work integrated, isolated, and can have
independent deployment cycles.

It is a concept of designing large web applications as a composition of small sub-applications.


The idea is very similar to micro services. The difference is that micro services are independent
backend services, but micro frontends, as the name suggests, are
independent frontend components.

It is a technique for building a modern web application with multiple teams using different
JavaScript frameworks. Instead of old monolith methodology we can create apps in multiple
frameworks (and even vanilla JS), loading them together using the same router, same domain
and without refreshing the page. This gives us the ability to work separately and make separated
single page applications that can work independently, isolated and tested. We can load and
deploy them and use them together under one building system.

Micro-frontend application Architecture:


Why Micro frontend:

Highly Scalable and Upgrade:

Because of its modular structure micro frontend is highly scalable when you need to grow
the business. Even it is open to upgrading to the latest technology ranging from web,
mobile, Internet of Things, wearables or simply to a newer framework.

Better Maintenance:

By creating small applications or modules, resources and teams can proficiently work in
separate technologies in their isolated micro-frontend reducing the risk of conflicts, bugs,
and deployment delays.

Technologies:

Teams can work in different front-end technologies without conflicting with each other.
We can take advantages of the people we have and even play around with newer
technologies at a low risk.

Faster Development and Deployment:

Releasing micro-frontends become smooth by delivering small pieces of the application


separately at any time without affecting others.

High Resilience:

In Micro frontend web apps are distributed in small chunks of services starting from the
UI to API integration that works independently. So, even if one feature faces the issue, it
doesn’t affect the rest of the web app. And this feature makes it possible to recover from
the error faster.

Micro-frontend with Angular elements (Angular 6):

Custom elements are a Web Platform feature currently supported by Chrome, Opera, and Safari,
and available in other browsers through polyfills (see Browser Support). A custom element
extends HTML by allowing you to define a tag whose content is created and controlled by
JavaScript code. The browser maintains a CustomElementRegistry of defined custom elements
(also called Web Components), which maps an instantiable JavaScript class to an HTML tag.
The @angular/elements package exports a createCustomElement() API that provides a bridge
from Angular's component interface and change detection functionality to the built-in DOM API.
Custom elements bootstrap themselves - they start automatically when they are added to the
DOM, and are automatically destroyed when removed from the DOM. Once a custom
element is added to the DOM for any page, it looks and behaves like any other HTML
element.

Let’s take an example of micro frontend using Angular JS (Angular elements)

1. Install Angular CLI and initialize Project:

npm i -g @angular/cli
ng new app-shell-custom-elements

2. Add elements package & polyfill


Custom elements are not completely supported by all browsers. hence, we need Polyfill to
get custom elements working.

ng add @angular/elements

3. Create a component:
Create component with Input and Output and implement working custom elements that are
understood by browsers:

ng g component user-management –-inline-style –-inline-temple -v Native

We are using ViewEncapsulation.Native to isolate the style of component, so that the styles
are bundled with the template and the component’s class into one file.

@Component({
moduleId: module.id,
templateUrl: 'user-management.component.html',
styleUrls: ['user-management.component.scss'],
encapsulation: ViewEncapsulation.Native
})

export class UserManagementComponent implements OnInit {


@Input() currentUser: any;
@Output() userList = new EventEmitter<any[]>();

get loggedInUser() {
return this.currentUser;
}
ngOnInit() {

}
getUserList() {
// @Todo get user list from API
this.userList.emit(new Array());
}
}

4. Registering component in NgModule:

The @angular/elements package provides createCustomElement() API to convert together its


dependencies to custom elements. The JavaScript function customElements.define() will
register the custom element tag with the Browser. The ngDoBootstrap method will tell angular
to use this module for bootstrapping.

createCustomElement Builds a class that encapsulates the functionality of the provided


component and uses the configuration information to provide more context to the class. Takes
the component factory’s inputs and outputs to convert them to the proper custom element API
and add hooks to input changes.

@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AppRoutingModule,
NgbModule.forRoot()
],
declarations: [
AppComponent,
AlertComponent,
UserManagementComponent
],
providers: [
AuthGuard,
JwtInterceptorProvider,
ErrorInterceptorProvider
],
bootstrap: [AppComponent]
})

export class AppModule {


constructor(private injector: Injector) {
const userManagement = createCustomElement(
UserManagementComponent, { injector});
customElements.define('user-management', userManagement);
}
ngDoBootstrap() {}
}

5. Communication between Micro Front-End Application Components


Angular Input and Output will be used to translate data to the custom element components.

<app-user-management
[currentUser]="currentUser" [userList]="userList">
</app-user-management>

6. Project and bundling packages structure by webpack build tool

7. Build and run the application


npm install
ng build
References:
https://micro-frontends.org/
https://developers.google.com/web/fundamentals/web-components/customelements

https://www.youtube.com/watch?v=vHI5C-9vH-E

You might also like