Micro Frontends & Design Systems, built with Angular and Stencil

The subject of micro frontends has been very hot the last few years as development teams strive to be technology agnostic, desire to build independent apps and desire a high degree of autonomy and companies want to build apps faster, cheaper and with less risk. However, companies often struggle with the alignment of autonomous development teams and the wide variety of technology stacks.

This also applies for the largest online retailer in The Netherlands and Belgium, bol.com, where applications are split up into domain specific, self-contained, independently deployed, Angular driven micro frontends. The main goal for the company is to provide an outstanding shopping experience to costumers and for that development teams need to be aligned without jeopardizing teams' autonomy. The solution comes in the form of the company’s own design system a framework independent components library, built with StencilJs.

Video: https://t.co/bSsewm7sCn

Transcript

1. @stefannhs Micro Frontends & Design Systems, built with Angular and Stencil Software Engineer Developer Advocate Archaeology Waterpolo Stefan Nieuwenhuis Skydiving Books
2. @stefannhs
3. @stefannhs Webshop Retail tooling
4. @stefannhs Seller Wants to add products to the catalogue Gets notified
5. @stefannhs
6. @stefannhs Microservice Architecture Frontend Frontend Frontend Frontend apps Backend Upload products Backend Analyze data Backend Process data
7. @stefannhs Seller Wants to add products to the catalogue Receives a confirmation Listens for announcements Announces that a product is added Reviews the product
8. @stefannhs
9. @stefannhs K.I.S.S. Testability Decentralized Governance Independency No S.P.o.F. Scalability Monitoring Complexity Corporate culture Consistency
10. @stefannhs
11. @stefannhs Keep our freedom One single source of truth Be able to contribute Flawless integration Stop reinventing the wheel Flat learning curve Performant & Scalable Framework independent
12. @stefannhs Pattern Library Components Library Style Guide Design System
13. @stefannhs Reusability Single source of truth Easier maintenance Consistent user interface Scalability Flexible Development speed Constraints Convergence bias Tendency to inflexibility
14. @stefannhs
15. @stefannhs Generic No framework lock-in Flexible Reusable Learning curve
16. @stefannhs Compatibility Easy API Performance Future-proof
17. @stefannhs No ivory tower Educate Maintain Innovate Share knowledge Support
18. @stefannhs Spread the word Core team Collaboration Adoption Easy API
19. @stefannhs
20. @stefannhs Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY DM’s are open! @stefannhs