Uploaded byAOE
AOEconf17: UI challenges in a microservice world
The document discusses micro frontends, a software architecture that allows web applications to be divided into smaller, independently deployable features owned by different teams. It outlines the challenges of frontend integration and maintaining consistency, proposing various techniques such as iframes, AJAX, and edge side includes for integration. Key learnings emphasize the independence of teams and the necessity for shared assets, while acknowledging ongoing challenges in technology mixing and overall frontend responsibility.
More Related Content
Similar to AOEconf17: UI challenges in a microservice world
![20260201 [FOSDEM] gomodjail - library sandboxing for Go modules.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/20260201fosdemgomodjail-librarysandboxingforgomodules-260201225659-76609ec4-thumbnail.jpg?width=640&height=640&fit=bounds)
![谷歌留痕技术教程[ 𝙩𝙤𝙥 𝟮𝟯𝟯. 𝙘 𝙤𝙢 ]](https://cdn.slidesharecdn.com/ss_thumbnails/top233-260130173900-2eb784f9-thumbnail.jpg?width=640&height=640&fit=bounds)
AOEconf17: UI challenges in a microservice world
- 1. MICRO FRONTENDS AOE CONF2017 UI CHALLENGES IN A MICROSERVICE WORLD
- 2. MICRO FRONTENDS WHAT WEHAVE LEARNED FROM MICROSERVICES… ‣ Small is better ‣ Single Responsibility ‣ Easier Scalability ‣ Independent Deployment ‣ Mix multiple technologies
- 3. MICRO FRONTENDS ARCHITECTURE Frontend MonolithMonolithSelf Contained Systems Frontend Backend Database
- 4. MICRO FRONTENDS MICRO FRONTENDS Inthis approach, a web application is broken up by its pages and features, with each feature being owned end-to-end by a single team. It allows each feature to be developed, tested and deployed independently.
- 5.
- 6. MICRO FRONTENDS UI INTEGRATION ShopCheckout www.example.com/shop www.example.com/checkout NAVIGATION BASKETPRODUCTS PRODUCTS NAVIGATION CHECKOUT PRODUCTS
- 7.
- 8. MICRO FRONTENDS UI INTEGRATION ‣iFrame ‣ AJAX ‣ Server Side Includes ‣ Edge Side Includes (e.g. Varnish) ‣ Software Solutions (Tailor, Compoxure, Convergent UI)
- 9. MICRO FRONTENDS UI INTEGRATION- IFRAME <body> <iframe src="https://example.com/products"> </body>
- 10. MICRO FRONTENDS UI INTEGRATION- AJAX { "html": "<div id="react-root">Test</div>", "css": "#react-root{color:green}", "script": "https://assets.hellofresh.com/dist/my-particle.hash.js" } <link rel="stylesheet" href="http://content.example.com/some-element.css"> <script src="http://content.example.com/some-element"></script> <some-element> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, totam. </some-element> JSON HTML
- 11. MICRO FRONTENDS UI INTEGRATION- EDGE SIDE INCLUDES <body> <esi:include src="http://header.domain.com"/> <esi:include src="http://content.domain.com"/> <esi:include src="http://footer.domain.com"/> </body>
- 12. MICRO FRONTENDS UI INTEGRATION- TAILOR <html> <head> <script type="fragment" src="http://assets.domain.com"></script> </head> <body> <fragment src="http://header.domain.com"></fragment> <fragment src="http://content.domain.com" primary></fragment> <fragment src="http://footer.domain.com" async></fragment> </body> </html> https://github.com/zalando/tailor / https://www.mosaic9.org
- 13.
- 14. MICRO FRONTENDS CONSISTENCY -SHARED ASSETS ASSET SERVER CSS JS FONTS IMAGES
- 15. MICRO FRONTENDS CONSISTENCY -OPEN SOURCE COMPONENT LIBRARIES Klarna UI Components https://klarna.github.io/ui Zalando Dress Code http://zalando.github.io/dress-code/ congstar Pattern Library https://design.congstar.de
- 16. MICRO FRONTENDS Header (Team1) Invoices (Team 2) Products (Team 2) Devices (Team 3) Teaser (Editors) Navigation (Editors)
- 17. MICRO FRONTENDS Team ProductsTeam CheckoutTYPO3 Angular2 SPA
- 18. MICRO FRONTENDS OUR LEARNINGS ‣No one-fits-all solution ‣ Micro Frontends help Teams to work independently ‣ But: Who is overall responsible for the Frontend? ‣ Many challenges to deal with… ‣ Mix of technologies ‣ Error Handling / Resilience ‣ Local Development Environment
- 19.
- 20. MICRO FRONTENDS SOURCES &MATERIAL https://martinfowler.com/articles/microservice-trade-offs.html http://blog.xebia.com/the-monolithic-frontend-in-the-microservices-architecture/ http://allegro.tech/2016/03/Managing-Frontend-in-the-microservices-architecture.html https://medium.com/@clifcunn/nodeconf-eu-29dd3ed500ec https://www.sigs-datacom.de/uploads/tx_dmjournals/attermeyer_OTS_Microservices_Docker_16.pdf https://technologyconversations.com/2015/08/09/including-front-end-web-components-into-microservices/ https://entwickler.de/online/ux/ui-architektur-microservices-modular-monolithisch-210677.html https://dejanglozic.com/2017/02/22/microservice-grid-and-micro-frontends/ https://www.quora.com/What-is-the-best-strategy-for-creating-UIs-in-a-microservices-architecture https://www.nginx.com/blog/building-a-web-frontend-with-microservices-and-nginx-plus/ https://www.infoq.com/presentations/html-components-services https://www.softwareag.com/corporate/images/sec_SAG_Evolution_Microservices_8PG_WP_Oct15_tcm16-134405.pdf https://dejanglozic.com/2014/10/20/micro-services-and-page-composition-problem/ https://de.slideshare.net/AssafGannon/micro-frontends https://www.mosaic9.org/ https://speakerdeck.com/d_kubyshkin/frontend-microservices https://www.youtube.com/watch?v=E0s3EGCefB0