Often the modern single page web application is becoming monolithic and uses the back end micro service architecture. The monolithic application will grow over time, developed by a separate team and gets more difficult to maintain. All these are sign to divide the large front end application by multiple micro frontend application. So that each micro frontend application can be developed by separate team and they all integrate in the front end for users.

Comparison of Monolithic and Micro frontend Applications

Create Angular Elements

The Angular elements are custom elements. They package the Angular components inside a custom elements and self bootstrapping. The angular elements can be included into any web application that enable to create reusable widget/application.

The product management prototype application is taken to build micro front end concepts using angular elements. The page is divided into three areas, each area will be rendered by micro front end application and will communicate to each other through custom elements.

Prototype — Product Management

Lets take an example of product view to create micro front end application with angular elements. Create angular elements for all of other micro applications on the same way. The sample code and demo application available in end of the article.

1. Initialize the project

ng new product-view

2. Set up project with the correct poly fill

npm install @webcomponents/custom-elements

3. Create a component

Create the ProductViewComponent to render product view screen and communicate to other micro frontend application. The ViewEncapsulation.Emulated will emulate style encapsulation, so that angular will create scoped styles and component style selectors will not affect other component on the page.

ng g component ProductViewComponent

productview.component.ts

4. Register Custom Elements

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.

app.module.ts

5. Communication between Micro FrontEnd Application Components

Angular Input and Output will be used to translate data to the custom element components . In the ProductViewComponent create the instance for (product-cart) custom elements to send product details to Product Cart micro frontend application. The Product Cart Component Input method will receive the product details and display in cart application. Similarly the acknowledgement of product availability will be send back to product-view custom elements from ProductCartComponent.

Communication between micro frontend applications

Build and publish as Module

Build the micro frontend application to reusable module/packaged as similar to any Angular modules.

gulp-inline-ng2-template, Convert HTML and CSS files into JavaScript ES5/ES6 and TypeScript files.

Typescript & Angular compiler(NGC) for transpiling.

rollupjs, for packaging.

1. Public API

Create an index.ts to have one entry point to import all the module and components for micro application. The user can use these public API to import the micro application into any parent application.

index.ts

3. Gulp configuration

Convert all html and css files to inline template to produce valid ES5 files.

gulpfile.js

4. Typescript configuration

The tsconfig_build.json to control compiler option to use by Typescript and NGC to read compilerOptions and angularCompilerOptions properties.

typscript_build.json

“strictMetadataEmit”: true, Angular Compiler validate the .metadata.json files emitted for bundling with an package for AOT compatible.

“skipTemplateCodegen”: true, Compiler suppress emitting angular .ngfactory.js and .ngstyle.js files.

“declaration”:true, generate type definition d.ts file.

“module”:“es2015", Uses import/export module code generation.

“target”:“es2015”. Code generation to es5.

5. Rollup configuration

The Rollup module bundler to deliver application similar to Angular modules. The entry point to the application is named index.js and imports all compiled into a single file named mf-pv.umd.js

Here is the sample rollup configuration,

rollup.config.js

6. Build

The build script will run gulp/ngc and rollup tasks to transpile and bundle the module in dist-npm directory.

build.sh

7. Publish to NPM

Publish the dist-npm directory. The dist-npm/package.json will have all the details to publish to NPM.

package.json

Run Individual micro frontend application

Run stand alone micro frontend application without integrating parent and other micro applications. So that each team can develop their micro front end application with defined contract to communicate to other micro applications through custom element attributes.

The command to build and generate the artifacts in dist/product-view directory.

ng build — prod — output-hashing=none

The server.js will serve the application from dist folder.

node server.js

The indext.html custom elements tag will be detected by browser and launch the application.

index.html

Run Integrated micro frontend applications

The Product Management Application will integrate all the other three micro applications to render the complete application for end user. Add the following module dependency in product management application to get the micro frontend modules.

package.json

Imported micro frontend application modules will render the micro application within Product Management.

Include custom element tags into the appropriate layout on the parent application to render the micro applications. The product view and product cart micro applications will communicate through message attribute to each other.

app.component.html

To run the product management application.

ng serve

The Complete code and demo applications

Product Management(Integrated all three micro frontend applications)

github code

Demo Application link

Product Header (micro frontend application)

github code

Demo Application link

Product View (micro frontend application)

github code

Demo Application link

Product Cart (micro frontend application)

github code

Demo Application link

Conslusion

Though the micro frontends provides the benefits of Maintainability/ Technology freedom and Independent Deployment, here are some of the key factors to be considered for successful implementation.

Deeper initial analysis to logical break of application modules.

Well-designed Interface and messaging contract to communicate between micro applications.

Test strategy for each micro application integration point.

Micro application should have self-contained features.

Communication is the key to minimize conflicts between teams working on an application.

Thanks for reading this. I hope it may be interested for you.

References:

https://www.thoughtworks.com/radar/techniques/micro-frontends

https://micro-frontends.org/

https://developers.google.com/web/fundamentals/web-components/customelements

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

https://www.tikalk.com/posts/2017/04/23/micro-frontends-intro/