Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

92 views

Published on

Microservices is a well-known term for recently year. But the truth is that it mostly focused on backends site while the frontend is still a monolithic application. This presentation intends to provide the necessary tooling to achieve independent apps loaded separately and run on different parts on a single web page in complete isolation which is officially called micro-frontends.

Published in: Technology
  • Be the first to comment

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

  1. 1. Micro Frontends Architecture DEVDAY 2019 April 06, 2019
  2. 2. i Thang Pham About me o 3+ years of experiences o Full-stack Software Engineering o thangpham@kms-technology.com
  3. 3. Agenda MONOLITH vs MICROSERVICES CONCLUSION 1 WHY MICRO FRONTENDS2 TECHNICAL APPROACHES3 4
  4. 4. Monolith vs Microservices
  5. 5. Monolith vs Microservices Monolith Microservices
  6. 6. 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
  7. 7. 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
  8. 8. Team Evolution
  9. 9. Why Micro Frontend?
  10. 10. o Monolithic frontends o Development Bottleneck o Communication overhead Why Micro Frontend?
  11. 11. Why Micro Frontend?
  12. 12. 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
  13. 13. Technical Approaches
  14. 14. UI Composition Book Store No Item in Cart related book: Book Name add to cart Category Team Cart Team Recommendation Team
  15. 15. UI Composition - Solutions • Client Side Rendering ○ HTML Iframe ○ Custom Elements • Server Side Rendering o Server Side Include / Edge Side Include o Server Side Composition
  16. 16. <!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
  17. 17. 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/
  18. 18. Browser Support
  19. 19. Browser Support class ProductDetails extends HTMLElement{ connectedCallback() { this.innerHTML = '<h1>Product #123 Details</h1>'; } } customElements.define('product-details', ProductDetails);
  20. 20. 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>
  21. 21. Browser Support Product Service /product <html> <h1>Product Details</h1> <!--#include virtual="/payment/add-to-cart" --> </html> Payment Service /payment/add-to-cart <button>add to cart</button> http://nginx.org/en/docs/http/ngx_http_ssi_module.html
  22. 22. 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
  23. 23. 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
  24. 24. 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/
  25. 25. Book Store 1 Item in Cart related book: Book Name add to cart Inter-application Communication One item is added Click “add to cart”
  26. 26. Routing /all /:id Soft Navigation Client Rendered /product Hard Navigation Page Refresh /cart /checkout Soft Navigation Client Rendered /payment One Router per Team
  27. 27. Fundamentals Sharing Libraries: Angular 7 Bootstrap 4 Category Fragment Cart Fragment Using CommonJS for module format: UMD, AMD. Using RequireJS for module loader
  28. 28. DEMO
  29. 29. Conclusion
  30. 30. Conclusion o Be Reasonable o Avoid Meta Framework o Ownership is Important
  31. 31. Conclusion CustomElement Server Side Composition Micro Frontends
  32. 32. QUESTIONS & ANSWER
  33. 33. THANK YOU!

×