DEV Community: Pranesh

Micro-app architecture using Angular

Pranesh — Thu, 22 Aug 2019 20:08:20 +0000

Based on the requirement and design, multiple feature apps are developed by independent teams which I call Micro-apps. These micro-apps are placed in a parent application which I call Container app. This Container app decides which micro-app needs to be shown and when. A container will be a template with an empty body which will have some of the basic features in them such as a header and a footer that can be common across the site. Based on the feature micro-apps will be inserted in this empty body. This kind of architecture can be used in an Enterprise application.

Here I am going to use Angular-Cli to achieve this use-case.

Building Micro-app

For building the micro app using Angular-Cli, I will use the custom-webpack plugin to override bundling configuration. I will also use Angular Elements to load multiple Angular applications on the page.

Angular-Element application

Create a new Angular micro-app. For example, here I am using the name testOne.
```
ng new testOne
```
Now I am going to add @angular/element into the workspace.
```
cd testOne
ng add @angular/elements
```
Generate a new component with app-test-one selector.
```
ng g c test-one
```

Override bootstrap of AppComponent in App Module. In ngDoBootstrap method, create a custom element.

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';  
import { NgModule, Injector } from '@angular/core';  
import { AppRoutingModule } from './app-routing.module';  
import { TestOneComponent } from './test-one/test-one.component';  
import { createCustomElement } from '@angular/elements';  
@NgModule({  
    declarations: [TestOneComponent],  
    imports: [BrowserModule, AppRoutingModule],  
    entryComponents: [TestOneComponent],  
    providers: [],  
    bootstrap: []  
})  ![enter image description here](https://thepracticaldev.s3.amazonaws.com/i/plxg0wck6ctw2ta4sabc.jpg)
export class AppModule {  
    constructor(private injector: Injector) {}  
    ngDoBootstrap() {  
        const TestOneElement = createCustomElement(TestOneComponent, {  
            injector: this.injector  
        });  
        if (!customElements.get('app-test-one')) {  
            customElements.define('app-test-one', TestOneElement);  
        }  
    }  
}

Replace <app-root></app-root> in index.html to <app-test-one></app-test-one>.

Override WebPack Configuration

When Angular-Cli builds a production build using ng build --prod, it does not give a unique global variable to the application. Due to this, multiple Angular elements application will conflict each other and you would see an error something like Failed to execute 'define' on 'CustomElementRegistry'. To avoid this, you would need to assign a variable name to the build generated. We can do this using @angular-builders/custom-webpack:browser and provide webPack properties to override it.

Add @angular-builders/custom-webpack plugin. npm i -D @angular-builders/custom-webpack

Couple of changes to be done in angular.json
- change the builder property to @angular-builders/custom-webpack:browser.
- add customWebpackConfig property as below.

 "architect": {
    "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
            "customWebpackConfig": {
                "path": "./extra-webpack.config.js",
                "mergeStrategies": { "externals": "replace" }
            },
        "outputPath": "dist",

Create config file extra-webpack.config.js to provide a unique variable name to the bundle generated.

module.exports  = {
    output: {
        jsonpFunction:  'webpackJsonpAPPNAME',
        library:  'APPNAME'
    }
};

So when you run ng build --prod, it will generate main.js with content like below

    // considering APPNAME as testOne
    var testOne=(window.webpackJsonptestOne=window.webpackJsonptestOne||[]).

Bundle the script

There are multiple ways to combine script files to one. I am using gulp here.

Install gulp and gulp-concat which is a plugin to concat files.
```
npm i -D gulp gulp-concat
```

Create a gulpfile.js and add the below code.

const gulp = require('gulp');  
const concat = require('gulp-concat');  

gulp.task('concat', function() {  
    return gulp  
    .src([  
        './dist/runtime-es2015.js',  
        './dist/polyfills-es2015.js',  
        './dist/main-es2015.js'  
    ])  
    .pipe(concat('APPNAME.js'))  
    .pipe(gulp.dest('./dist'));  
});

Execute gulp command to execute the process of combining files.
```
gulp concat
```

Template Example repo - https://github.com/pranesh229/micro-apps-template

Building container app

A container is a regular Angular application which will get hosted in the server and serve the site. The micro-app script files need to be included as a plugin. Below are the steps that need to be followed.

Copy the micro-app scripts to the assets folder. For eg - test-one.js can be added to the assets folder.

Call the element in the below way where it needs to be included in the page. For eg - page1.component.ts needs test-one element inside it, the following script needs to be added in ngOnInit() method.

export class Page1Component implements OnInit {  
    constructor(  
        private renderer: Renderer2,  
        private el: ElementRef,  
        @Inject(DOCUMENT) private document: Document  
    ) {}  
    ngOnInit() {  
        // APP 1  
        const appTestOne = this.renderer.createElement('app-test-one');  
        this.renderer.appendChild(this.el.nativeElement, appTestOne);  
        const s = this.renderer.createElement('script');  
        s.type = 'text/javascript';  
        s.src = './assets/test-one.js';  
        this.renderer.appendChild(this.document.body, s);  
    }  
}

Now when I serve the site, it will append the script and show the component in the page.

Container Example repo - https://github.com/pranesh229/micro-app-container

Thank you for reading.

What is the logical difference between Model View Controller and Model View Presenter Design pattern ?

Pranesh — Tue, 18 Sep 2018 03:28:38 +0000

How to improve the Site score from Chrome Lighthouse

Pranesh — Fri, 24 Aug 2018 14:16:32 +0000

This document is about the series of steps that I followed in order to get a good score for my profile site by performing an Audit using Chrome Developer Tools.

How to Audit your website using Chrome developer tools

Before we do any change in order to optimize the site, we need to first evaluate and understand the problems. Chrome has added Lighthouse - A Website evaluation tool which can evaluate your site even during the development activities. It's simple, fast and it not only provides you with a score but also provides you necessary suggestions to solve it.

Evaluate the Result

Now that you know the result, it would be easier to find where a developer needs to do the right optimization. For that Lighthouse has divided the rating between 5 basic categories

Performance
Progressive Web App
Best Practices
Accessibility
SEO

Performance

In order to improve the performance, it's better to first resolve the issues that can be solved easily. If the performance of the site improves drastically by performing simple techniques, then it's not needed to spend more time on smaller issues which might not provide a big impact. Few simple and important techniques suggested are -

Reduce the size of files downloaded - Files such as HTML, JavaScript, and CSS can be compressed easily using the Minification process. The file sizes can be reduced up-to 1/4th of the actual size of the file. Images consume most of the page size and one should always have compressed images in their site. There are several image compression tools which can optimize the site images without affecting its clarity. If you are using JPEG image, it's always better to use Progressive JPEG. Also reduce the size of the images based on the size of area that it needs to cover.
Reduce the number of file request - For the site to go back and forth for receiving each file from the server is expensive as it consumes time. It's better to combine files like combining multiple JavaScript and CSS files to one, combining smaller images or icons to one sprite image and, combining multiple service calls to one. One can also Lazyload the resources that are being downloaded because it's not always necessary that the user will scroll down till the end of the page.
Reduce initial page load activity - Always avoid executions which are not useful for the initial page load view. Its always better to investigate before you confirm these blocking activities which can be either Scripting, Painting or Rendering. Chrome Developer tools provide Site Performance Evaluator which run through the site and provides a clear view of the areas where the optimization is needed. It can also provide an in code evaluation so that its easier to find and resolve these blockers.

Progressive Web App

PWA is the most In Thing these days as it has its ability to work like a Native Mobile application without being registered in App Store or Play store. Its very lightweight and it can work in offline mode. PWA also provide performance benefits as it downloads all the necessary resources in the background and serves it without making an HTTP request. To set it up is very simple and Chrome has provided its users with a pop-up suggestion to add the site to your phone as an App. You can easily score a 100 in this.

Best Practices

A website should be safe and should not be annoying. The site should be better served in https and all the data request made through the site should have the same domain. Private data should always be encrypted and it should have an expiry time. One should never use JavaScript Libraries that have security vulnerabilities.

Accessibility

Is your site helpful for users who don't have a clear vision? Is your site easier to use for the user who cannot use a mouse? One needs to make sure to use sufficient Color Contrast between the background and foreground. Keep the forms areas simple as browser automatically provides tab indexing.

SEO

Make sure you have a title and site icon for the site. Market your site by adding social Media meta tags. A Page header needs to be set and it should be in the H1 tag. The URL of the site should be like any other site and one should not make any special changes to modify it. The site should support both Mobile and Desktop

References

PageSpeed Insights
Lighthouse
Minify JavaScript - Uglify
Minify CSS
Minify HTML
Combine Files
Compress Images
Lazyload Images and Videos
Progressive webapp Checklist
Color Contrast Checker