Download as PDF, PPTX
![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](https://image.slidesharecdn.com/microfrontends-fuer-microservices-201001105426/75/MicroFrontends-fur-Microservices-3-2048.jpg)
![Angular?
• „[…] but is quite challenging to use in scenarios that
don‘t fit that specific Single Page application model.“
• Rob Wormald, Angular Team](https://image.slidesharecdn.com/microfrontends-fuer-microservices-201001105426/75/MicroFrontends-fur-Microservices-6-2048.jpg)
![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](https://image.slidesharecdn.com/microfrontends-fuer-microservices-201001105426/75/MicroFrontends-fur-Microservices-8-2048.jpg)
![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](https://image.slidesharecdn.com/microfrontends-fuer-microservices-201001105426/75/MicroFrontends-fur-Microservices-14-2048.jpg)
![Angular?
• „[…] but is quite challenging to use in scenarios that
don‘t fit that specific Single Page application model.“
Rob Wormald, Angular Team](https://image.slidesharecdn.com/microfrontends-fuer-microservices-201001105426/75/MicroFrontends-fur-Microservices-26-2048.jpg)
![Wie kann ein MicroFrontend mit AngularElements umgesetzt werden?
[1] https://www.webcomponents.org/introduction](https://image.slidesharecdn.com/microfrontends-fuer-microservices-201001105426/75/MicroFrontends-fur-Microservices-27-2048.jpg)
Uploaded byComsysto Reply GmbH
MicroFrontends für Microservices
The document discusses micro-frontends, which view web applications as a composition of features developed independently by cross-functional teams, allowing for end-to-end ownership of each feature. It outlines various methods for implementing micro-frontends, such as server-side template composition and the use of web components. The document also highlights the challenges of using Angular in this context and provides references for further exploration of the topic.
More Related Content
![[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...](https://cdn.slidesharecdn.com/ss_thumbnails/microfrontendsarchitectureedit-190410074045-thumbnail.jpg?width=640&height=640&fit=bounds)
MicroFrontends für Microservices
- 1. blog.oio.de news.trivadis.com/blog@Trivadis MicroFrontends fürMicroservices Marius Hilleke – marius.hilleke@trivadis.com Thomas Bröll - thomas.broell@trivadis.com
- 2.
- 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 – MicroServicesim 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 isideal for building complete applications, and our tooling, documentation and infrastructure are primarily aimed at this case.“ • Rob Wormald, Angular Team
- 6. Angular? • „[…] butis 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-Service2 Micro-Service 3 Micro-Service 4
- 8. Welche Möglichkeiten zurtechnischen 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 HTMLmit Item-Details Fragment details.html dashboard.html cart.html u index.html u
- 10.
- 11. Run-time integration viaiframes
- 12.
- 13.
- 14. Web components area 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.
- 16.
- 17. WebComponents (Custom Elements) Quelle:caniuse.com 10/2018 5/2020
- 18.
- 19.
- 20.
- 21.
- 22. Elemente im DOM(Demo)
- 23.
- 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.
- 26. Angular? • „[…] butis quite challenging to use in scenarios that don‘t fit that specific Single Page application model.“ Rob Wormald, Angular Team
- 27. Wie kann einMicroFrontend mit AngularElements umgesetzt werden? [1] https://www.webcomponents.org/introduction
- 28.
- 29.
- 30. Echte Anwendungsfälle • LangfristigeSicherheit • 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 beiGithub 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/