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.

AOEconf17: UI challenges in a microservice world

831 views

Published on

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

Published in: Software
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ◆◆◆ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ➤➤ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

AOEconf17: UI challenges in a microservice world

  1. 1. MICRO FRONTENDS AOE CONF 2017 UI CHALLENGES IN A MICROSERVICE WORLD
  2. 2. MICRO FRONTENDS WHAT WE HAVE LEARNED FROM MICROSERVICES… ‣ Small is better ‣ Single Responsibility ‣ Easier Scalability ‣ Independent Deployment ‣ Mix multiple technologies
  3. 3. MICRO FRONTENDS ARCHITECTURE Frontend MonolithMonolith Self Contained Systems Frontend Backend Database
  4. 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.
  5. 5. CHALLENGE #1 FRONTEND INTEGRATION
  6. 6. MICRO FRONTENDS UI INTEGRATION Shop Checkout www.example.com/shop www.example.com/checkout NAVIGATION BASKETPRODUCTS PRODUCTS NAVIGATION CHECKOUT PRODUCTS
  7. 7. MICRO FRONTENDS UI INTEGRATION NAVIGATION BASKETPRODUCTS PRODUCTS NAVIGATION PRODUCTS BASKET PRODUCTS navigation.example.com products.example.com/teaser checkout.example.com/basket products.example.com Shop www.example.com/shop
  8. 8. MICRO FRONTENDS UI INTEGRATION ‣ iFrame ‣ AJAX ‣ Server Side Includes ‣ Edge Side Includes (e.g. Varnish) ‣ Software Solutions (Tailor, Compoxure, Convergent UI)
  9. 9. MICRO FRONTENDS UI INTEGRATION - IFRAME <body> <iframe src="https://example.com/products"> </body>
  10. 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. 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. 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. 13. CHALLENGE #2 CONSISTENCY
  14. 14. MICRO FRONTENDS CONSISTENCY - SHARED ASSETS ASSET SERVER CSS JS FONTS IMAGES
  15. 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. 16. MICRO FRONTENDS Header (Team 1) Invoices (Team 2) Products (Team 2) Devices (Team 3) Teaser (Editors) Navigation (Editors)
  17. 17. MICRO FRONTENDS Team Products Team CheckoutTYPO3 Angular2 SPA
  18. 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. 19. THANK YOU! florian.brandel@aoe.com

  20. 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

×