Microservices bringen zahlreiche Vorteile für die Backend-Entwicklung mit sich. Könnte man die Vorteile nicht auch im Frontend nutzen? Dazu prägt sich aktuell die Idee des MicroFrontend, für deren Umsetzung beispielsweise WebComponents eingesetzt werden können. Im Vortrag wird beispielhaft eine Web-Komponente auf Basis von Standard-APIs erstellt und daran gezeigt, was hier bereits mit jedem aktuellen Browser möglich ist. Ebenso bietet das allseits beliebte Angular Framework mit Angular-Elements eine Möglichkeit für die Implementierung von WebComponents. In einer Demo werden diese beiden Welten zusammengeführt, und wir schauen uns Alternativen an, die von anderen Frameworks wie beispielsweise React oder Polymer angeboten werden. Außerdem wird aus mehr als einem Jahr Praxis bei der Umsetzung mit MicroFrontends berichtet. Speaker: Thomas Bröll arbeitet als Principal Consultant für Trivadis am Standort Stuttgart. Er ist seit mehr als 2 Jahrzenten als Software Entwickler, Berater und Architekt im Bereich Java. Sein Fokus ist dabei die Konzeption und Implementierung von Web-Applikationen und Business-Anwendungen auf Basis von Java-, Web- und Cloud-Technologien. Er ist darüber hinaus für die Trivadis als Referent und Trainer im Bereich Java und Java Enterprise tätig. Marius Hilleke hat bei der Trivadis erfolgreich das Java-Trainee-Programm absolviert und ist derzeit als Berater und Entwickler tätig. Dabei beschäftigt er sich mit unterschiedlichen Technologien für Cloud-basierte Anwendungen, wie beispielsweise dem Spring- und dem Angular-Framework. Darüber hinaus ist er besonders an Cloud-Technologien, wie Docker und Kubernetes interessiert

1. blog.oio.de news.trivadis.com/blog@Trivadis
MicroFrontends für Microservices
Marius Hilleke – marius.hilleke@trivadis.com
Thomas Bröll - thomas.broell@trivadis.com

2. Micro-Frontends –
MicroServices im Browser

3. Was sind MicroFrontends?
Definitionsversuche
– The idea behind Micro Frontends is to think about a website or web app as a composition of
features which are owned by independent teams. 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 user interface. – [1]
– 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. Multiple techniques exist to bring the application features—some
old and some new—together as a cohesive user experience, but the goal remains to allow each feature
to be developed, tested and deployed independently from others. – [2]
[1] Michael Geers: https://micro-frontends.org/
[2] ThoughtWorks: https://www.thoughtworks.com/radar/techniques/micro-frontends
Unabhängigkeit End-To-Endfeature-basierte Modularisierung

4. MicroFrontends – MicroServices im Browser
• MicroServices Paradigma
• Ein Feature End-to-End
• Eigene Teams
• Vorteile mitnehmen
• Wiederverwendbarkeit von Komponente
• Integration „fremder“ fachlicher Features
• Nachteile umgehen
• Nur für wiederverwendbare Komponenten
• Nur an sinnvollen Grenzen aufteilen

5. Angular?
• „Angular is ideal for building complete applications,
and our tooling, documentation and infrastructure
are primarily aimed at this case.“
• Rob Wormald, Angular Team

6. Angular?
• „[…] but is quite challenging to use in scenarios that
don‘t fit that specific Single Page application model.“
• Rob Wormald, Angular Team

7. UI
Micro-Service 1
Ohne MicroFrontends...
Nutzer
Micro-Service 2 Micro-Service 3 Micro-Service 4

8. Welche Möglichkeiten zur technischen Umsetzung von
MicroFrontends gibt es?
[1] https://martinfowler.com/articles/micro-frontends.html
Server-seitige
Komposition via
Templates
Integration zum
Build-Zeitpunkt
via iframes
via JavaScript
via Web Components
Laufzeit-
integration
Kombinationen
der Ansätze

9. Server-side template composition
https://app/item-details
HTML mit Item-Details Fragment
details.html
dashboard.html
cart.html
u
index.html
u

10. Build-time integration
run build

11. Run-time integration via iframes

12. WebComponents
u
<head>
<script …>
</head>
<body>
<my-e1></my-e1>
<my-e2></my-e2>
</body>
bundle1.js
bundle2.js
bundle3.js

13. Web-Components

14. Web components are a set of web platform APIs that allow you to create
new custom, reusable, encapsulated HTML tags to use in web pages and
web apps. Custom components and widgets build on the Web Component
standards, will work across modern browsers, and can be used with any
JavaScript library or framework that works with HTML.
Web components are based on existing web standards. Features to support
web components are currently being added to the HTML and DOM specs,
letting web developers easily extend HTML with new elements with
encapsulated styling and custom behavior. – [1]
[1] webcomponents.org: https://www.webcomponents.org/introduction
Definition

15. Custom Elements

16. Custom Elements

17. WebComponents (Custom Elements)
Quelle: caniuse.com
10/2018
5/2020

18. Shadow DOM

19. Shadow DOM

20. Shadow DOM

21. Elemente im DOM

22. Elemente im DOM (Demo)

23. Custom Events

24. Noch einiges mehr ….
• Templates
• Slots
• Binding, verbessertes Rendering mit
• https://lit-html.polymer-project.org/
• Open Web-Components Recommendations + Template https://open-wc.org/
• Browser Support für alte Browser
• WebComponents-Polyfill von webcomponents.org (Teil des Polymer Projekts)
• Babel
• Polyfills für viele einzelne Funktionen
• Typescript - Setup
• Webpack/Babel
• Starter z.B. https://open-wc.org/

25. Angular Elements

26. Angular?
• „[…] but is quite challenging to use in scenarios that
don‘t fit that specific Single Page application model.“
Rob Wormald, Angular Team

27. Wie kann ein MicroFrontend mit AngularElements umgesetzt werden?
[1] https://www.webcomponents.org/introduction

28. Demo

29. Anwendungsfälle

30. Echte Anwendungsfälle
• Langfristige Sicherheit
• Standards
• Wenige externe Abhängigkeiten
• Passive Webseite mit aktiven Inhalten als Web-Components
• Direkt
• Server-seitige Integration
• Anwendungen
• Integration weniger Komponenten anderer Services
• Sonderfall: Dashboard
• Anwendung aus Komponenten
• Seiten, Navigation und Router
• Komponenten- und CSS-Framework

31. Links
• Code bei Github https://github.com/tvdtb/demo/tree/master/webcomponents-angularelements/
• Michael Geers: https://micro-frontends.org/
• ThoughtWorks: https://www.thoughtworks.com/radar/techniques/micro-frontends
• Fowler: https://martinfowler.com/articles/micro-frontends.html
• Custom Element: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements
• Template Literals: https://www.ecma-international.org/ecma-262/6.0/#sec-template-literals
• Shadow DOM: https://dom.spec.whatwg.org/#dom-element-attachshadow
• CustomEvent: https://dom.spec.whatwg.org/#interface-customevent
• Angular Elements: https://angular.io/guide/elements
• Open-WC: https://open-wc.org/