How We Build Mirco Frontend

How We Build Micro Frontend by team TD DevUI

Agenda Problems Achievements Challenges Takeaway

Problems INTERGRATION

Problems GAINT ENTITY HARD to maintain move SLOW

Problems We need an architecture that plug n play

Achievements Library loads the app Engineering workﬂow

Achievements Micro Frontend The idea behind Micro Frontends is to
think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface. - https://micro-frontends.org

Micro Frontend Source Code Pipeline Production Composition

Micro Frontend MICRO APP HOST

Micro Frontend Control the Micro App’s Lifecycle Load the Assets

Micro Frontend Lifecycle Bootstrap Mount Unmount

Micro Frontend Lifecycle Bootstrap Mount Unmount function render(content) { document.querySelector('body').innerText
= content } window.AwesomeApp = { bootstrap: () /> { console.log('bootstraped') return Promise.resolve() }, mount: () /> { render('Aloha') return Promise.resolve() }, unmount: () /> { render('') return Promise.resolve() } }

Micro Frontend Assets Loading HTML Entry Treat HTML as the
mainfest

Micro Frontend Assets Loading Download HTML Collect Scripts & Styles
Download Scripts & Styles Exec Scripts Insert Styles as inlined

Micro Frontend Assets Loading <!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <title>Awesome App//title> //head> <body> <script src="https://vendor.11xx.js">//script> <script src="https://main.xx11.js" entry>//script> //body> //html> // on host app importHTML('https://xxx.com') .then(res /> { res.execScripts().then(exports /> { // exports is, as you expected, the exports from the main.js }) })

Micro Frontend HTML Entry Lifecycle

Challenges Performance Style Pollution

Challenges Performance make HOST as CLEAN as possible

Challenges Style Pollution *Constrain the styles’ location

Challenges unsolved JS sansbox *@angular/router resource sharing w @angular

Take Away It’s All about Engineering

Thanks for Creativity & Patience

How We Build Mirco Frontend

How We Build Mirco Frontend

Perry Poon

More Decks by Perry Poon

Featured

Transcript

How We Build Micro Frontend by team TD DevUI

Agenda Problems Achievements Challenges Takeaway

Problems INTERGRATION

Problems GAINT ENTITY HARD to maintain move SLOW

Problems We need an architecture that plug n play

Achievements Library loads the app Engineering workﬂow

Achievements Micro Frontend The idea behind Micro Frontends is to

Micro Frontend Source Code Pipeline Production Composition

Micro Frontend MICRO APP HOST

Micro Frontend Control the Micro App’s Lifecycle Load the Assets

Micro Frontend Lifecycle Bootstrap Mount Unmount

Micro Frontend Lifecycle Bootstrap Mount Unmount function render(content) { document.querySelector('body').innerText

Micro Frontend Assets Loading HTML Entry Treat HTML as the

Micro Frontend Assets Loading Download HTML Collect Scripts & Styles

Micro Frontend Assets Loading <!DOCTYPE html> <html lang="en"> <head> <meta

Micro Frontend HTML Entry Lifecycle

Challenges Performance Style Pollution

Challenges Performance make HOST as CLEAN as possible

Challenges Style Pollution *Constrain the styles’ location

Challenges unsolved JS sansbox *@angular/router resource sharing w @angular

Take Away It’s All about Engineering

Thanks for Creativity & Patience

Q&A