[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software Engineer at Upstar Labs

Micro Frontends
Architecture
DEVDAY 2019
April 06, 2019

i
Thang Pham
About me
o 3+ years of experiences
o Full-stack Software Engineering
o thangpham@kms-technology.com

Agenda
MONOLITH vs MICROSERVICES
CONCLUSION
1
WHY MICRO FRONTENDS2
TECHNICAL APPROACHES3
4

Monolith vs Microservices
Monolith Microservices

o Have many cross-cutting concerns: logging,
limiting, tracking, etc ...
o Easy and fast to develop
o One code base for all team
o Communication overhead
o Tightly coupled, hard to scale and maintain
o Team size grows align with project size
Monolith

o Increase scalability and maintainability
o Independent
o Reduce the team’s scope
o Hard to develop
o Increase the deployment complexity
o Cross-cutting concern for each service
Microservices

o Monolithic frontends
o Development Bottleneck
o Communication overhead
Why Micro Frontend?

Smaller Team, Clear Mission
do not care about other teams
Narrow Scope
fix to your memory
Frontend Renovation
without throwing everything away
End-to-end Development
communication is easy
Pros Cons
UI Composition
isolate the look and feel
Operational Complexity
complex deployment
Distributed Data
share data b/w micro app

UI Composition
Book Store
No Item in
Cart
related book:
Book Name
add to cart
Category
Team
Cart Team
Recommendation
Team

UI Composition
- Solutions
• Client Side Rendering
○ HTML Iframe
○ Custom Elements
• Server Side Rendering
o Server Side Include / Edge
Side Include
o Server Side Composition

<!DOCTYPE html>
<html>
<body>
<h2>Iframe Example</h2>
<p>Below is an example for embedded iframe in a website</p>
<iframe
src="https://example.com"
style="border:none; border: dashed 3px red"
width="100%"
height="400px">
</iframe>
</body>
</html>
HTML Iframe

Custom Elements
o Framework independent components
o Reusability within other components
o The DOM is the API
o Can Be Polyfilled Down to IE11
<cart-count></cart-count>
<category-details prod-id="1">
</category-details>
https://www.webcomponents.org/

Browser Support
class ProductDetails extends HTMLElement{
connectedCallback() {
this.innerHTML = '<h1>Product #123 Details</h1>';
}
}
customElements.define('product-details', ProductDetails);

Book Store
1 Item in
Cart
related book:
Book Name
add to cart
the DOM is the API
<category-details prod-id="1">
</category-details>
<recommendation-list
for-prod="1">
</recommendation-list>
<cart-count>
</cart-count>

Browser Support
Product
Service
/product
<html>
<h1>Product Details</h1>

</html>
Payment
Service
/payment/add-to-cart
<button>add to cart</button>
http://nginx.org/en/docs/http/ngx_http_ssi_module.html

Browser Support
<esi:include
src="https://yourwebsite.com/1.html"
alt="https://backup.yourwebsite.com/2.html"
onerror="continue"/>
https://www.akamai.com/us/en/support/esi.jsp

Sever Side Composition
Router
Layout Service Layout
Fragments
Router Reverse proxy acting
Layout A collection of layout
Layout
Service
UI composer
Fragments Micro Frontends services

Sever Side Composition
Project Mosaic | Microservices for the Frontend
Skipper
extendable HTTP Router for service
composition
Quilt Layout Storage used by Tailor
Tailor
Layout Service, asynchronously fetches
multiple fragments. Partially inspired by
Facebook’s BigPipe.
https://www.mosaic9.org/

Book Store
1 Item in
Cart
related book:
Book Name
add to cart
Inter-application Communication
One item is added
Click “add to cart”

Routing
/all /:id
Soft
Navigation
Client
Rendered
/product
Hard
Navigation
Page
Refresh
/cart /checkout
Soft
Navigation
Client
Rendered
/payment
One Router per Team

Fundamentals Sharing
Libraries:
Angular 7
Bootstrap 4
Category Fragment Cart Fragment
Using CommonJS for module format: UMD, AMD.
Using RequireJS for module loader

Conclusion
o Be Reasonable
o Avoid Meta Framework
o Ownership is Important

Conclusion
CustomElement
Server
Side Composition
Micro Frontends

[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software Engineer at Upstar Labs

More Related Content

What's hot

Similar to [DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software Engineer at Upstar Labs

More from DevDay Da Nang

Recently uploaded

In this document

[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software Engineer at Upstar Labs