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

[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 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
Team Evolution
Why Micro Frontend?
o Monolithic frontends o Development Bottleneck o Communication overhead Why Micro Frontend?
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
Technical Approaches
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
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
DEMO
Conclusion
Conclusion o Be Reasonable o Avoid Meta Framework o Ownership is Important
Conclusion CustomElement Server Side Composition Micro Frontends
QUESTIONS & ANSWER
THANK YOU!

Check these out next

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

Recomendados

Mais conteúdo relacionado

Apresentações para você(20)

Similar a [DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software Engineer at Upstar Labs(20)

Mais de DevDay.org(20)

Último(20)

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