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

Transcript

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