[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software Engineer at Upstar Labs
•
3 likes•514 views
Micro frontends is an approach to building frontends that splits the application into multiple independently deliverable components. This approach allows different teams to work on individual components without impacting the work of others and improves scalability. There are two main technical approaches for implementing micro frontends: UI composition, where components are rendered on the client-side using techniques like iframes or custom elements, and server-side composition, where a server acts as a composition layer to combine fragments from multiple sources. The presentation covered the benefits and challenges of both monolithic and microservice architectures as well as examples of implementing micro frontends using UI and server-side composition techniques.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to [DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software Engineer at Upstar Labs
Similar to [DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software Engineer at Upstar Labs (20)
More from DevDay.org
More from DevDay.org (20)
Recently uploaded
Recently uploaded (20)
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software Engineer at Upstar Labs
- 1. Micro Frontends Architecture DEVDAY 2019 April 06, 2019
- 2. i Thang Pham About me o 3+ years of experiences o Full-stack Software Engineering o thangpham@kms-technology.com
- 3. Agenda MONOLITH vs MICROSERVICES CONCLUSION 1 WHY MICRO FRONTENDS2 TECHNICAL APPROACHES3 4
- 5. Monolith vs Microservices Monolith Microservices
- 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. 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
- 10. o Monolithic frontends o Development Bottleneck o Communication overhead Why Micro Frontend?
- 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
- 14. UI Composition Book Store No Item in Cart related book: Book Name add to cart Category Team Cart Team Recommendation Team
- 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. <!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. 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. Browser Support
- 19. Browser Support class ProductDetails extends HTMLElement{ connectedCallback() { this.innerHTML = '<h1>Product #123 Details</h1>'; } } customElements.define('product-details', ProductDetails);
- 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. 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
- 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. 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. 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. Routing /all /:id Soft Navigation Client Rendered /product Hard Navigation Page Refresh /cart /checkout Soft Navigation Client Rendered /payment One Router per Team
- 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. DEMO
- 29. Conclusion
- 30. Conclusion o Be Reasonable o Avoid Meta Framework o Ownership is Important
- 33. THANK YOU!