AOEconf17: UI challenges in a microservice world
1 like1,330 views
When you introduce a microservice architecture you expect small, decoupled and scalable services. Unfortunately, for frontend development this is hard to achieve, and you will often end up maintaining a "frontend monolith". At his #AOEconf17 talk, Florian Brandel gives insights at challenges and solutions when creating UIs in a microservice architecture. https://www.aoe.com
Ad
More Related Content
Similar to AOEconf17: UI challenges in a microservice world (20)
More from AOE (20)
Ad
Recently uploaded (20)
![Get & Download Wondershare Filmora Crack Latest [2025]](https://cdn.slidesharecdn.com/ss_thumbnails/revolutionizingresidentialwi-fi-250422112639-60fb726f-250429170801-59e1b240-thumbnail.jpg?width=560&fit=bounds)
![Download Wondershare Filmora Crack [2025] With Latest](https://cdn.slidesharecdn.com/ss_thumbnails/neo4j-howkgsareshapingthefutureofgenerativeaiatawssummitlondonapril2024-240426125209-2d9db05d-250419-250428115407-a04afffa-thumbnail.jpg?width=560&fit=bounds)
Ad
AOEconf17: UI challenges in a microservice world
- 1. MICRO FRONTENDS AOE CONF 2017 UI CHALLENGES IN A MICROSERVICE WORLD
- 2. MICRO FRONTENDS WHAT WE HAVE LEARNED FROM MICROSERVICES… ‣ Small is better ‣ Single Responsibility ‣ Easier Scalability ‣ Independent Deployment ‣ Mix multiple technologies
- 3. MICRO FRONTENDS ARCHITECTURE Frontend MonolithMonolith Self Contained Systems Frontend Backend Database
- 4. MICRO FRONTENDS MICRO FRONTENDS In this 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.
- 6. MICRO FRONTENDS UI INTEGRATION Shop Checkout www.example.com/shop www.example.com/checkout NAVIGATION BASKETPRODUCTS PRODUCTS NAVIGATION CHECKOUT PRODUCTS
- 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
- 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 (Team 1) Invoices (Team 2) Products (Team 2) Devices (Team 3) Teaser (Editors) Navigation (Editors)
- 17. MICRO FRONTENDS Team Products Team 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
- 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