micro-frontend-part-three.

md 8/19/2019

UI Engine
Loose coupling allows you to make changes to one module without affecting the others.

Engine is a pluggable component based application composition layer, it provides a well-defined place for
creating, configuring, and non-invasively connecting together the components of an application, or sections of
an application.

Web Application Module - an independent unit of functionality that is a part of total structure of web
application.

With Engine, you focus on coding the application logic of components and let Engine handle the bootstrapping
and the glue that connects them together.You write simple, declarative Javascript Modules that describes how
components should be composed together, and wire will load, configure, and connect those components to
create an application, and will clean them up later.

Engine is designed to take care of the connection points between existing popular frameworks and solve
common integration problems that arises with engineering large scale complex Javascript WebApplications, thus
decoupling the whole application with implementaion details of each application vertical, giving freedom to chose
UI stack from the likes of Angular, React, Vue, Mithril etc.

Engine incorporates an Inversion of Control Container for Javascript apps.

TLDR: In recent years, thanks to Node.js, JavaScript has become the “lingua franca” of the web for both
front and backend applications. This has given rise to awesome projects like Angular, React and Vue
which improve developer productivity and enable the construction of fast, testable, and extensible
frontend applications. However, while plenty of superb libraries, helpers, and tools exist for Node (and
server-side JavaScript), none of them effectively solve the main problem - architecture.[1]

Features
Engine provides:

Simple, declarative dependency injection

A flexible, non-invasive connection infrastructure
Application lifecycle management
Powerful core tools and plugin architecture for integrating popular frameworks and existing code.
Application shell Architecture and pluggable Micro Frontends.
Support for both browser and server environments.

Apps constructed with Engine:

Have a high degree of modularity

Can be unit tested easily, because they inherently separate application logic from application composition
Allow application structure to be refactored independently from application logic
Have no explicit dependencies on DOM Ready, DOM query engines, or DOM event libraries
It is designed to give you a quick and organised way to start developing micro-frontends inside PWA shell.

1/6
micro-frontend-part-three.md 8/19/2019

Encourages age-old idea of building smaller, loosely coupled, reusable piece of software that does one
thing and one thing well for quicker time to market and cheaper cost of change.
Everything in engine is a package and when need arises for extending engine with custom functionality ,
developers can do so creating their own package and do not need to alter the core packages.
The engine package system allows developers to create modular code that provides useful tools that
other engine developers can use. The packages, when published, are plug-and-play and are used in a
way very similar to traditional npm packages.
The engine package system integrates all the packages into the engine project as if the code was part of
engine itself and provides the developers with all the necessary tools required to integrate their package
into the host project.

engine provides an out-of-the-box application architecture which allows for effortless creation of highly
testable, scalable, loosely coupled, and easily maintainable largescale frontend web applications as set of
independent micro frontends.

Engine was developed as a very light and elegant layer which permitted us to migrate our existing Frontend
monolith(Angular1.x) into separately installable packages. Each package can now be installed separately into
engine , each package can provide a complete Frontend backed with Rest-APIs for that engine application into a
plug and play application framework.

If any module in Engine , depends on any other functionality module in engine there will be no explicit source
code level dependency but we use Dependency Injection to use the functionality exposed by a particular module.

Code snippet attached below , describes how to define a Package in engine.

const engine = require('engine-core');

const Module = engine.Module;
const InGraph = new Module('ingraph');// Defining the Package
const ESI = require('nodesi').middleware;
/*
* All engine packages require registration
* Dependency injection is used to define required modules
*/
InGraph.register((app, datastore, database, gateway, admin, sources,
worksets) => {
app.use(ESI(config.esiSettings));
InGraph.menus.add({
title: 'InGraph',
link: '/app/ingraph/main#/home',
weight: 19,
name: 'ingraph',
menu: 'care'
});
InGraph.routes(app, datastore, database, admin);
return InGraph;
});

Engine Provides us ability to do sort of vertical decomposition without completely abandoning our existing
system, rather improving the performance of the existing Angular application, along with the ability to develop

2/6
micro-frontend-part-three.md 8/19/2019

new features and rewrite existing features to more modern and performance oriented engine Library such as
React , Preact, Vue, Svelte etcs.

Engine Test Cases

Passed Failed

Team Ownership Run Independently

Develop Independently

Native Support

Smooth User Interface

Super Fast Loading

Corporate Identity

Sharing Basics

Modular

Sharing Basics

Technology Agnostic

Engine provides with a nice and familiar ecosystem to every JavaScript developer to build, publish and install
their micro-frotends into any engine based projects using natively provide NPM cli tool in a true plug and play
format.

All the applications created for engine along with any JavaScript module which needs to be reuse or plug n play
are published to a private NPM registry hosted inside our network.

3/6
micro-frontend-part-three.md 8/19/2019

A flexible and powerful yet simple architecture

4/6
micro-frontend-part-three.md 8/19/2019

5/6
micro-frontend-part-three.md 8/19/2019

link to resources
Readers should go through this presentation by Nicholas Zakas, who has been inspiration and motivation behind
Engine.

6/6