1 of 50

Platform freedom with Micro-frontends

HolyJS Conference 2023

2 of 50

Saravana Balaji Srinivasan

Senior Software Engineer @Red Hat

Full-stack Developer

Intro

HolyJS Conference 2023

3 of 50

Red Hat Story

HolyJS Conference 2023

4 of 50

Landscape

​

We live in a world where web technologies have dominated software development.

�Default choice for most applications.

Software�Development Landscape

HolyJS Conference 2023

5 of 50

Foundation

​

Well though and understood set of Standards, Patterns and Techniques as a strong foundation.

Standards,

Patterns and Techniques

HolyJS Conference 2023

6 of 50

Ecosystem

​

Rich ecosystem that has been maturing over the years

Ecosystem

HolyJS Conference 2023

7 of 50

Static Typed Language

​

TypeScript created the perfect compromise for Static Type Languages believers.

Static

Typing

HolyJS Conference 2023

8 of 50

Browser Everywhere

​

Browser is now more than just the window for the internet.

​

Browsers became part of an important trend as the mechanism to distribute any Graphical User Interface based applications.

Browser

Everywhere

HolyJS Conference 2023

9 of 50

Multiple Distributions

HolyJS Conference 2023

10 of 50

Architectures

Evolutionary

An evolutionary architecture supports incremental, guided change as a first principle across multiple dimensions.

Micro Frontends

Design approach in which a front-end app is decomposed into individual,

semi-independent “microapps” working loosely together.

Serverless

Incorporate third-party “Backend as a Service”, and/or that include custom code

run as Functions.

Microservices

Architectural style that structures an application as a collection of independent services.

Architectures

HolyJS Conference 2023

11 of 50

Micro-frontends

HolyJS Conference 2023

12 of 50

Micro-frontends

HolyJS Conference 2023

13 of 50

"An architectural style where independently deliverable frontend applications are composed into a greater whole"

Cam Jackson

https://martinfowler.com/articles/micro-frontends.html

HolyJS Conference 2023

14 of 50

Goal

GOAL OF MICRO-FRONTENDS ?

HolyJS Conference 2023

15 of 50

Micro-frontends

HolyJS Conference 2023

16 of 50

Diversification

​

It is not only good for money but also for technology

Micro-frontends

HolyJS Conference 2023

17 of 50

Example

* DMN is a modeling language and notation for the precise specification of business decisions and business rules.

HolyJS Conference 2023

18 of 50

Micro-frontends

UI

Libraries

Frontend

Backend

UI

UI

UI

Library

Library

Application

Application

Application

Application

Application

Library

Library

Build time composition

Application

Application

Application

Application

Application

Application

Run time composition

Monolith

Modular monolith

Integrated applications

Micro-Frontends

HolyJS Conference 2023

19 of 50

Micro-frontends

​

​

​

​

​

​

​

Monolith Web Application

Datastore

Backend

Frontend

​

​

​

​

​

​

​

Web Application based on Microservices Architecture

API

Frontend

Microservice A

Microservice A

Microservice C

Datastore

Datastore

Datastore

​

​

​

​

​

​

​

Web Application based on Microservices and Micro-front end Architecture

API

Microservice A

Microservice B

Microservice C

Datastore

Datastore

Datastore

Micro-front end A

Micro-front end B

Micro-front end C

HolyJS Conference 2023

20 of 50

Micro-frontends

​

Container/

App Shell

​

Micro frontend A

Micro frontend C

Micro frontend B

Decides when/where to show each Micro frontend

BFF A

BFF B

BFF C

No Micro frontend communicate

directly to each other

Backend Microservice

BFF ensures seamless user interaction regardless of the platform the frontend application is running on

HolyJS Conference 2023

21 of 50

Micro-frontends

aka client-side integration:

After the container gets loaded in the browser, it gets access to micro front end source code

✅ A can be deployed independently at any time and can deploy different versions of it, and Container can decide which one to use

❌ tooling + setup is far more complicated

Independent deployment makes it challenging to test/verify (build a good test suite for it)

Run-Time integration

Types of Integration

Team A decides to develop a new version of Component C

Ready! Let's deploy it

Publishes C as https://mydomain.com/c.js

User navigates to�https://mydomain.com

Container app is loaded

Container apps fetches new C from

https://mydomain.com/c.js

HolyJS Conference 2023

22 of 50

Micro-frontends

22

aka compile-time integration:

Before the container gets loaded in the browser, it gets access to micro frontend source code;

Foreign modules are accessible during build

✅ Easy to setup and understand

❌ Container has to be re-deployed every time child has updated and tempting to tightly coupled Container + child together

​

Build-time integration

Types of Integration

Team A decides to develop a new version of Component C

Ready! Let's deploy it

Publishes C as NPM package

NPM Registry �[C]

Team B decides to upgrade C so install a new dependency

Team B builds a new Container with new C

Team B deploys a new Container with new C

HolyJS Conference 2023

23 of 50

Micro-frontends�Concerns

23

Another concerns - Styling

What you should do:

  • Custom CSS from your project:
    • Use CSS-in-JS library
    • Use frameworks built-in component style scoping
      • Vue's and Angular has good ones
    • "Namespace" all your CSS
  • CSS coming from other libraries
    • Use a component library that does css-in-js
    • Manually build the css library and apply namespacing techniques to it
    • Scope-it
      • Shadow DOM or iframes!

​

​

HolyJS Conference 2023

24 of 50

Micro-frontends�Concerns

24

HolyJS Conference 2023

25 of 50

Micro-frontends�Concerns

25

​

  • Pros

✅ Great degree of isolation;

Styling

Global variables

Shadow DOM was not a option in 2019

✅ Some libraries play directly with body of the page

✅ We only use it when necessary

​

​

Context Isolation via iframes

  • Cons:

❌ Makes your app feel 'old'

❌ Less flexible than other options

❌ Hard to integrate routing, history;

❌ Challenging to make the app responsive

❌ Not Content-Security-Policy friendly

❌ Harder to make apps communicate

​

  • Nothing new, exciting, even a bit of 'yuck"

HolyJS Conference 2023

26 of 50

Why do we need a new

architecture?

HolyJS Conference 2023

27 of 50

Cloud Native Tooling

Minimize code changes

​

The components to be distributed should be preserved untouched and with avoiding feature flags.

Bridge

​

It has to embrace different generations of technology stack.

Multiple Distributions

​

The origin of multiplying architecture is rooted in the need to distribute the same set of components in a myriad of platforms.

requirements

Tooling

HolyJS Conference 2023

28 of 50

Introducing�Multiplying Architecture

HolyJS Conference 2023

29 of 50

What is

Software Architecture?

HolyJS Conference 2023

30 of 50

“Architecture is about the important stuff.

Whatever that is.”

Ralph Johnson

HolyJS Conference 2023

31 of 50

The Multiplying Architecture

What is important for the Multiplying Architecture is the abstraction.

HolyJS Conference 2023

32 of 50

The Multiplying Architecture

The Abstractions

Channel

​

Top level abstraction that represents the hosting environment, like a website or a desktop application.

Editor

​

Editor is a specialized type of View, that gets a file content as input and is able to serve the content state back to the Channel through the Envelope.

View

​

View is a portable set of widgets that are exposed as an unit to the Channel through the Envelope.

Envelope

​

Enable transparent communication between Components (View/Editor) and Channel

core

HolyJS Conference 2023

33 of 50

Online Channel

HolyJS Conference 2023

34 of 50

Desktop Channel

HolyJS Conference 2023

35 of 50

Github extension Channel

HolyJS Conference 2023

36 of 50

VSCode extension Channel

HolyJS Conference 2023

37 of 50

Components Interaction

<div>

​

Channel (VS Code, Desktop, Browser, …)

MyChannel

​

​

​

​

Implements: Channel, MyServiceApi

​

Consumes:

MyEnvelopeApi

MyEditor

​

​

​

​

Implements:

Editor

​

Consumes:

MyServiceApi

MyEnvelope

​

Defines: MyEnvelopeApi MyServiceApi

​

Implements:

MyEnvelopeApi

​

Consumes:

Editor

HolyJS Conference 2023

38 of 50

Components

Interaction

Envelope Advantages

Context Isolation (CSS and JS)�

Autonomous Teams Independent Release Cycles Type Safe Communication

Micro-frontend

HolyJS Conference 2023

39 of 50

Multiplying Architecture in

Practice

HolyJS Conference 2023

40 of 50

Build-time issues

  • Foreign modules are accessible during build
  • Container has to be re-deployed every time child has updated and tempting to tightly coupled Container + child together;
  • One single change to prod. requires full a long rebuild
  • Dependency versions alignment
  • No clear app/team isolation
  • Duplication of library loading

Runtime-time issues with iframes

  • Iframe doesn't help me share libraries/dependencies
  • Duplication of library loading

Built time x Runtime Integration

Integration Issues

HolyJS Conference 2023

41 of 50

Integration Issues

​

Container

​

Micro frontend A

Micro frontend C

Micro frontend B

Container fetches micro-frontends

React 17.0.1

React 17.0.1

React 17.0.1

http://domain/a.js

http://domain/c.js

HolyJS Conference 2023

42 of 50

Federated Modules �to the Rescue!

HolyJS Conference 2023

43 of 50

Federated Modules

  • Part of Webpack 5
  • Allows loading separately compiled programs parts
  • Solution for runtime integration of Micro frontends
  • Allow referencing program parts that are not yet known at compile time.
  • Each micro frontend can run in isolation

​

HolyJS Conference 2023

44 of 50

Federated Modules

-> Remote Routes

-> ModuleFederation Plugin�On webpack config

-> shared dependencies

HolyJS Conference 2023

45 of 50

Federated Modules

-> Import of Federated Modules

-> Lazy loading via Route � + � Suspense

HolyJS Conference 2023

46 of 50

Goals of Multiplying Architecture

Minimize code changes

​

The components to be distributed should be preserved untouched and with avoiding feature flags.

Bridge

​

It has to embrace different generations of technology stack.

Multiple Distributions

​

The origin of multiplying architecture is rooted in the need to distribute the same set of components in a myriad of platforms.

Solve a problem

Goals

HolyJS Conference 2023

47 of 50

We Achieved Platform with Multiplying Architecture

Achievements

  • Microservices architecture
  • Able to finally take advantage of runtime integration
  • Each team can build/deploy their own micro frontend
  • No duplication of library loading
  • Ability to deploy multiple pieces of your application to different servers without iframes
  • Have a portion of an application getting too big and wants a dedicated team? Split it out.
  • That split you just made was a bad idea? Merge it back together.
  • Finally we are able to real decoupling.
  • Be able to evolve tech stack independently

HolyJS Conference 2023

48 of 50

Code sample - https://github.com/kiegroup/kie-tools/tree/main/examples

HolyJS Conference 2023

49 of 50

Questions

HolyJS Conference 2023

50 of 50

Thank you

Saravana Balaji Srinivasan

HolyJS Conference 2023