Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UI in the age of microservices

UI in the age of microservices

How to avoid a monolith in the presentation layer?
Micro Frontends pattern
Web Components
Angular Elements
Vue Web Components


Robert Witkowski

September 19, 2018

More Decks by Robert Witkowski

Other Decks in Programming


  1. Robert Witkowski, Senior Software Engineer, ASC LAB UI in the

    age of microservices How to avoid a monolith in the presentation layer?
  2. 2 https://micro-frontends.org/

  3. 3 Backends for Frontends https://samnewman.io/patterns/architectural/bff/

  4. 4 Monolith Frontend Micro Frontends

  5. 5 https://docs.microsoft.com/en-us/dotnet/standard/microservices-architecture/architect- microservice-container-applications/microservice-based-composite-ui-shape-layout

  6. 6 Self-Contained Systems SCS describes best what’s at the core

    of the concept: Each system should work by itself. Composite UI Frontend Integration for Verticalised Systems
  7. 7 Micro Frontends Techniques, strategies and recipes for building a

    modern web app with multiple teams using different JavaScript frameworks. https://micro-frontends.org/
  8. 8 Idea - Application as a composition of features which

    are owned by independent team - Each team has a distinct area of business or mission it cares about and specialises in - A team is cross functional and develops its features end- to-end, from database to interface - Each team should be able to choose their stack http://andrejusb.blogspot.com/2018/05/microservice-approach-for-web.html
  9. 9 Who?

  10. 10 Problem

  11. 11 Challenges • UI integration in browser – during build

    time (using NPM) – during run time, at client side – during run time, at server/middleware side • Communication/routing between components/services • Isolate JS • Avoid CSS conflicts • Load resources as needed (lazy loading) • Share common resources • Data fetching • Good loading states for the user https://www.youtube.com/watch?v=rCxj-ONZmxs
  12. 12 Micro Frontends - implementation • Web Components (good framework

    support) • Project Mosaic (Tailor, Skipper, Shaker, Quilt, Innkeeper) • single-spa (meta framework) • Allegro OpBox (don't have plans to open it unless some big player declare strong will and plans for contribution) • Oracle JET Composite Component • Server Side Includes (SSI) / Edge Side Includes (ESI) • IFrames using libraries and window.postMessage APIs • Multiple single-page apps that live at different URLs (NPM/Bower components for shared functionality)
  13. 14 Web Components - overview • Custom Elements - defines

    how to design and use new types of DOM elements • Shadow DOM - defines how to use encapsulated style and markup in web components • HTML imports - defines inclusion and reuse of HTML documents in other HTML documents • HTML Template - defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime https://www.webcomponents.org/introduction
  14. 15 Custom Elements - example

  15. 16 Custom Elements - example

  16. 17 Shadow DOM - example

  17. 18 HTML Import - example

  18. 19 HTML Template - example

  19. 20 Web Components - Can I use? https://www.webcomponents.org/

  20. 21 webcomponentsjs https://github.com/webcomponents/webcomponentsjs/

  21. 22 document-register-element Thanks this lightweight and battle-tested polyfill Custom Elements

    work in all browsers! https://github.com/WebReflection/document-register-element
  22. 23 Custom Elements - framework supports

  23. 24 Custom Elements - Angular https://custom-elements-everywhere.com/libraries/angular/results/results.html

  24. 25 Custom Elements - Vue https://custom-elements-everywhere.com/libraries/vue/results/results.html

  25. 26 Custom Elements - React https://custom-elements-everywhere.com/libraries/react/results/results.html

  26. 27 Custom Elements Lifecycle

  27. 28 Custom Elements Communication Parent-Child - update attribute on child

    <example-cmpt attribute=”value”></example-cmpt> Child-Parent - parent listens for DOM event on child document.querySelector(‘child-selector’) .addEventListener(‘success’, () => alert(‘Ups!’)) Sibling - broadcasting event through the body element document.dispatchEvent(new Event(‘sthChanged’)); document.addEventListener(‘sthChanged’, method);
  28. 29 Custom Elements Initial Server Side Rendering <example-cmpt> <!--#include virtual=”/path-to-initial-fragment”

    --> </example-cmpt> https://blog.prototypr.io/luke-wroblewski-introduced-skeleton- screens-in-2013-through-his-work-on-the-polar-app-later-
  29. 30 SSI - Server Side Includes https://en.wikipedia.org/wiki/Server_Side_Includes

  30. 31 How SSI works with nginx

  31. W3C Note 04 August 2001 Edge Side Includes (ESI) is

    an XML-based markup language that provides a means to assemble resources in HTTP clients 32 ESI - Edge Side Includes <esi:include src="http://ex.com/1.html" alt="http://bak.ex.com/2.html" onerror="continue" /> <esi:include src="http://ex.com/search?query=$(QUERY_STRING{query})" /> https://en.wikipedia.org/wiki/Edge_Side_Includes https://www.w3.org/TR/esi-lang
  32. 33 Web Components + Angular 6 = Angular Elements https://www.youtube.com/watch?v=Z1gLFPLVJjY

  33. 34 Web Components + Angular 6 = Angular Elements •

    Bundle size: Currently, whether you ship a tiny widget or a full application as a custom element, a lot of Angular comes along with it. This makes the resulting bundle size of your custom element pretty large. Luckily, Ivy, the next generation of Angular's compiler, will solve this problem. • Steps to use: As you'll see in a moment when we build our first element, some of the setup and packaging of Angular Elements is a little clunky right now. https://www.telerik.com/blogs/getting-started-with-angular-elements
  34. 35 Web Components + Vue = Vue Web Component https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/

  35. 36 DEMO https://github.com/ asc-lab/ web-components-poc

  36. 37 Interesting slides/blog post • Micro Frontend: a microservice architecture

    from your frontend web apps (slides) • Micro Frontends: Break up your web app! (slides) • Micro Frontends: building a modern web app with multiple teams (slides) • Micro Frontends • Microservice websites • Micro Frontends List by Elisabeth Engel • Front-end microservices with Web Components
  37. 38 Interesting Presentations • Compositional UIs - the Microservices Last

    Mile - Jimmy Bogard • microXchg 2018 - Micro Frontends - breaking down the last monolith - Matthias Laug • Michael Geers - Micro Frontends: Break Up You Web App! • Building web applications with Web Components by Martin Splitt • The Future of Loading on the Web (Chrome Dev Summit 2017) • code.talks 2017 - The Recipe For Scalable Frontends (Zalando) • Micro Frontends Talks Playlist
  38. 39 asc.altkom.pl github.com/asc-lab @AltkomSC asc-lab@altkom.pl