Eine Definition Our preferred (and proven) approach is to split the browser- based code into micro frontends.
In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team.
This ensures that every feature is developed, tested and deployed independently from other features. … 16 Quelle: ThoughtWorks Technology Radar Michael Geers @naltatis
Eine Definition Our preferred (and proven) approach is to split the browser- based code into micro frontends.
In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team.
This ensures that every feature is developed, tested and deployed independently from other features. … 17 Quelle: ThoughtWorks Technology Radar Michael Geers @naltatis
2 33 $ 66 $ 99 $ buy 2 1 66 $ 1 1 list home detail basket payment confirm $ $ %% Team Inspire Team Decide Team Checkout Customer Journey Ein Team verantwortet mehrere Seiten Tea m
Kaufen Tea m
Entscheiden Tea m
Entdecken Grafik: Micro Frontends in Action Michael Geers @naltatis 20
Eine Definition Our preferred (and proven) approach is to split the browser- based code into micro frontends.
In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team.
This ensures that every feature is developed, tested and deployed independently from other features. … 24 Quelle: ThoughtWorks Technology Radar Michael Geers @naltatis
Eine Definition Our preferred (and proven) approach is to split the browser- based code into micro frontends.
In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team.
This ensures that every feature is developed, tested and deployed independently from other features. … 28 Quelle: ThoughtWorks Technology Radar Michael Geers @naltatis
Frontend Payment Service Content Service Operations Platform Business Attributes Service Specialist Teams Team Inspire Team Decide Team Checkout Cross Functional Teams grouped around a use case or customer need grouped around a skill or technology Grafik: Micro Frontends in Action Michael Geers @naltatis 44
Frontend Payment Service Content Service Operations Platform Business Attributes Service Specialist Teams Team Inspire Team Decide Team Checkout Cross Functional Teams grouped around a use case or customer need grouped around a skill or technology Entwicklung eines Features Meeting s
1 66 $ Runtime Integration aka Bootstrap Model Versioned Package Pattern Library Product Team Product Team Product Team CSS & JS production 1 66 $ Pattern Library Product Team Product Team Product Team v2.0 v2.1 v2.1 v2.1 v2.0 JS CSS Template HTML JS CSS HTML Auslieferung als versioniertes Paket Teams updaten in eigener Geschwindigkeit
Self-Contained > 100% Konsistenz 74 Michael Geers @naltatis Konsistentes Design
Pattern Library Team A Team B Team C CSS Pure CSS Pattern Library Team A Team B Team C Framework-specific Components Pattern Library Team A Team B Team C Framework-agnostic Components Vue.js Web Components Pattern Library Team A Team B Team C Multiple Framework Components Vue.js Angular Pattern Library Team A Team B Team C CSS & JSX Common Templating Language (e.g. JSX) hyperapp … JSX compatible hyperapp Komponentenformat
der Pattern Library
beschränkt
Tech-Stack-Wahl
der Feature-Teams. 75 Michael Geers @naltatis Konsistentes Design