AOEconf17: UI challenges in a microservice world
•
1 like•1,322 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
Recommended
Recommended
More Related Content
Similar to AOEconf17: UI challenges in a microservice world
Similar to AOEconf17: UI challenges in a microservice world (20)
More from AOE
More from AOE (20)
Recently uploaded
Recently uploaded (20)
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