Micro-Frontend Architecture Part 2: The Implementation with Angular and Web Components

Last week we have introduced you to micro-frontends and discussed the pros and cons that come with micro-frontend Architecture. As part 2 of the blog, we are going to implement components in a distributed manner and face the issues that can come up during the process.

The Implementation

WrapperApp

About the dependencies

About the code

1) First run: npm i @angular-extensions/elements

2) Then import { LazyElementsModule } from '@angular-extensions/elements' and add it to the imports of your AppModule

3) Then you add the schemas property to the @NgModule decorator of your AppModule and add the CUSTOM_ELEMENTS_SCHEMA

4) Lastly, with *axLazyElement directive you can load the element you need and enter the URL of the element bundle

        import { BrowserModule } from '@angular/platform-browser';
        import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
        import { LazyElementsModule } from '@angular-extensions/elements';

        import { AppComponent } from './app.component';
        import { CoverComponent } from './cover/cover.component';

        @NgModule({
            declarations: [
                AppComponent,
                CoverComponent
            ],
            imports: [
                BrowserModule,
                LazyElementsModule,
            ],
            providers: [],
            bootstrap: [AppComponent],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
        })
        export class AppModule { }
    

        @Component({
            selector: 'app-cover',
            template: `
                
Shows the webcomponent below
                
            `
        })
        export class CoverComponent {
            handleEvent(event: any): void {
                console.log(`His name is ${event.detail.name}`);
            }
        }
    

WidgetApp

About the dependencies

1) @angular/elements - It’s an angular library that contains the methods for converting a component into a web component, add it with ng add @angular/elements

2) serve - Used to serve the javascript file in your dist folder. Add it with npm i serve --save-dev as a dev dependency

3) @webcomponents/webcomponentsjs (optional) - A polyfill, will not be vital unless your target in tsconfig.ts is ES2015.

4) ngx-build-plus - It extends the Angular CLI's default build behaviour. It provides the functionality to build the whole project into one .js file, which is needed to implement a web component. Install it via npm i ngx-build-plus --save-dev

About the code

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

        import { AppComponent } from './app.component';
        import { WidgetComponent} from './widget-component/widget-component.component';

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

            ngDoBootstrap(): void {
                const ngCustomElement = createCustomElement(WidgetComponent, { injector: this.injector });
                customElements.define('widget-component', ngCustomElement);
            }
        }
    

        import { Component, EventEmitter, Input, Output } from '@angular/core';

        @Component({
            // tslint:disable-next-line:component-selector
            selector: 'widget-component',
            template: `
                
Hello {{ name }}
                Create Event
            `,
            styleUrls: ['./widget.component.css']
        })
        export class WidgetComponent {
            @Input() name: string;
            @Output() hello = new EventEmitter();
        }
    

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

        {
            "start": "npm run build && serve -l 5001 dist/widget-app",
            "build": "ng build --prod --output-hashing none --single-bundle true",
        }
    

Conclusion

An Intro to Micro-Frontend Architecture

Times of single web pages are a thing of a forgotten past. These days web applications are becoming complex that delivers us better experiences that are enriched by user interactions and flows. However, these complex apps need large developer teams as well as sophisticated deployment systems. In this article, we are going to discuss the pros and cons of Micro Frontend Architecture. And next week we will show you the implementation in the upcoming blog.

Web Applications of now

A short Intro to Micro-frontend

Pros of Micro-Frontends

Cons of Micro-Frontends

Conclusion

Microservices Are Amazing, If Used Right

Microservices is the latest hot topic that is taking enterprises by storm with over 70% of enterprises re-architecting their applications for microservices. But it’s not the magic pill it was thought to be.

Creating A Micromess

How can we avoid a Micromess?

A Major Side-effect of Microservices

The summary: The Necessity of Microservices

Angular for Desktop Applications with Electron

        
$ node -v
$ npm -v
	

Now on to Angular! For this tutorial, we will be using Angular CLI tool, to make the development process easier. Angular CLI makes it effortless to create an app that works right out of the box. It comes with a set of built-in commands, like creating an app, running it, creating angular components, services and so on. To begin, install the Angular CLI on your computer.

        
$ npm install -g @angular/cli
    

The -g flag ensures that the package is installed globally, as opposed to installing a package for a given directory. Our next step will be creating an angular project. To make it happen, go to your chosen directory and type

        
$ ng new first-angular-electron-app
    

The command might take a while, as it is creating a new workspace and an initial Angular application. Go grab yourself a cup of coffee! After a while, there will be a new first-angular-electron-app created inside your base directory. In the following steps, we will go to the directory created by Angular CLI command, install the required packages specified in package.json file created by ng new and run the app. Type in the following:

        
$ cd first-angular-electron-app
$ npm install
$ npm link #make sure packages are linked
$ ng serve
    

Running ng serve builds and serves the app, also coming with the feature of rebuilding app on any file changes. By default, Angular starts on port 4200. Go to your favourite browser and paste localhost:4200 to see the results.   And just like that, you're almost done. But the app has started in the browser and we are using the URL - wasn't it meant to be a Desktop App? This is the moment when Electron comes up on stage.

Installing Electron

We come to the point when we need to install Electron as our App dependency. It's is really easy and all we have to do is type the following in your terminal:

        
$ npm install --save-dev electron
    

The --save-dev is a flag, which is used to save the given package for development purposes.

Linking Angular and Electron

The next step is creating the main.js file. This file will serve as an entry-point for Electron. It is responsible for creating windows and handling all the system events that might occur in the app. Create the file in your app's root directory:

        
$ touch main.js
    

Then, open the content of the main.js file and paste the following code snippet:

        
const {app, BrowserWindow} = require('electron');  
const url = require('url');
const path = require('path');   
	
function onReady () {     
	win = new BrowserWindow({width: 900, height: 6700})    
	win.loadURL(url.format({      
		pathname: path.join(
			__dirname,
			'dist/first-angular-electron-app/index.html'),       
		protocol: 'file:',      
		slashes: true     
	}))   
} 

app.on('ready', onReady);
    

Remember, you have to specify the correct path to the index.html file, that can be found in dist folder (created by build command in the following step). In case you named your app different to first-angular-electron-app make sure to update pathname in main.js file.

Inside the index.html in the /src directory update the content from

        
<base href="/">
    

to

        
<base href="./">
    

to make sure that JS files will be visible for Electron. The last step will be configuring the package.json to build the Angular App and correctly run the Electron.
Go to your root directory and find the package.json file. Open its content and add the following:

        
...,
"main" : "main.js",
...,
"scripts": {
	...,
   “electron”: “ng build && electron .”
}
    

The modifications are specifying the main file for Electron. The electron command in scripts object is our bootstrap command for building the Angular App (the artficats will be pushed into dist folder) and running the electron process. To run our Angular Desktop App type in your root directory:

        
$ npm run electron
    

Take another sip of your drink and after a while... boom! This is it. Congratulations on building your first Desktop App with little help from Angular and Electron. Feel free to do some other modifications in the code and create your own Desktop App...

The issues of migration: Observables vs. Promises

Promises

const numberPromise = new Promise((resolve) => {
    resolve(5);
});

numberPromise.then(value => console.log(value));
// will simply print 5
  

const numberPromise = new Promise((resolve) => {
    resolve(5);
    resolve(10);
});

numberPromise.then(value => console.log(value));
// still prints only 5

Observables

    const numberObservable = new Observable((observer) => {
      observer.next(5);
      observer.next(10);
  });
  
  numberObservable.subscribe(value => console.log(value));
  // prints 5 and 10
  

Eager vs. Lazy

//Promise-wrapped http request
saveChanges(data) {
  return $http.post('https://some_url.com', data)
}


//Observable-wrapped http request
saveChanges(data) {
  return this.httpService.post('https://some_url.com', data) // doesn't do request!
}

 saveChanges(data).Subscribe()

Cancelling and unsubscribing

    // Observables in Angular 2+
    const sourse$ = this.httpServie.get('https://some_url.com')
    source$.subscribe(
      (data) => handelData(data), // success handler
        (err) => handleError(err),  // error handler
        () => completeHandler() // onComplete handler
    )
    
    // Promises in AngularJS
    const soursePromise = http$.get('https://some_url.com')
    soursePromise.then(
      (data) => handelResolve(data), // resolve handler
        (err) => handleReject(err) // reject handler
    )
  

// html template

  
//Promise-wrapped http request

inputElem = document.querySelector('#search');
search$ = fromEvent(inputElem, 'keyup');

ngOnInit() {
  
  search$.pipe( // each time new text value is emitted
  	switchMap((event) => { // switchMap cancel previous request and send a new one
      const text = event.target.value;
      return this.httpService.get('https://some_url.com?search=' + text);
    })
  )
    .subscribe((newData) => this.applyNewData(newData))  // use new data
}

Repeat or Retry becomes so much simpler with Observables

    var request = function() {
      $http({method: 'GET', url: path})
        .success(function(response) {
          results.resolve(response)
        })
        .error(function() {
          if (counter < MAX_REQUESTS) {
            request();
            counter++;
          } else {
            results.reject("Could not load after multiple tries");
          }
        });
    };
    

    request();
  

    this.httpService.get('https://some_url.com/data').pipe(
      retry(MAX_REQUESTS)
    )
    

Observables have many combination tools that Promises miss

Last words...

LogicFlow Completes CHF 0.5 million Round

Scientific advisor Prof. Fleisch shared his excitement over LogicFlow and their upcoming success: “I am proud to support LogicFlow since the very beginning. The team around Lucas Fiévet creates the code migration of tomorrow – a toolbox that every company in the digital space needs.”

LogicFlow is dedicated to driving forward automation in software development. “We are grateful to our investors for their great support and confidence in LogicFlow,”

Contact Information

Why migrating to the latest Angular now?

AngularJS Migration is on the #HotTopics!

AngularJS vs. Angular

AngularJS

Angular

AngularJS vs. Angular comparison

Advantages of Angular over AngularJS

Boost in performance

Migration done right

Make a transition to TypeScript beforehand

Migrate smoothly

Follow the Angular upgrade guide

Still afraid of the hassle - Then why not automate it?

Conclusion

The new look of Angular Materials is here!

Let's discover the latest features!

What’s behind these fun and vibrant images?

So how did they do it?

Angular 11 is out!

What are the new features of Angular 11?

Updates on Operation Byelog

Automatic Inlining of Fonts

Component Test Harnesses

Updated Language Service Preview

Updated Hot Module Replacement (HMR) Support

Experimental webpack 5 Support

Other new cool features

Update to new version now!