$30 off During Our Annual Pro Sale. View Details »

Micro Frontends & Design Systems, built with Angular and Stencil

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

Stefan Nieuwenhuis

March 08, 2019
Tweet

More Decks by Stefan Nieuwenhuis

Other Decks in Technology

Transcript

  1. @stefannhs
    Micro Frontends & Design Systems, built with Angular and Stencil
    Software Engineer
    Developer Advocate
    Archaeology
    Waterpolo
    Stefan Nieuwenhuis
    Skydiving
    Books

    View Slide

  2. @stefannhs

    View Slide

  3. @stefannhs
    Webshop
    Retail tooling

    View Slide

  4. @stefannhs
    Seller
    Wants to add products to the catalogue
    Gets notified

    View Slide

  5. @stefannhs

    View Slide

  6. @stefannhs
    Microservice Architecture
    Frontend
    Frontend
    Frontend
    Frontend apps
    Backend
    Upload products
    Backend
    Analyze data
    Backend
    Process data

    View Slide

  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

    View Slide

  8. @stefannhs

    View Slide

  9. @stefannhs
    K.I.S.S.
    Testability
    Decentralized Governance
    Independency
    No S.P.o.F.
    Scalability Monitoring
    Complexity
    Corporate culture
    Consistency

    View Slide

  10. @stefannhs

    View Slide

  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

    View Slide

  12. @stefannhs
    Pattern Library
    Components Library
    Style Guide
    Design System

    View Slide

  13. @stefannhs
    Reusability
    Single source of truth
    Easier maintenance
    Consistent user interface
    Scalability
    Flexible
    Development speed
    Constraints
    Convergence bias
    Tendency to inflexibility

    View Slide

  14. @stefannhs

    View Slide

  15. @stefannhs
    Generic
    No framework lock-in
    Flexible
    Reusable
    Learning curve

    View Slide

  16. @stefannhs
    Compatibility
    Easy API
    Performance
    Future-proof

    View Slide

  17. @stefannhs
    No ivory tower
    Educate
    Maintain
    Innovate
    Share knowledge
    Support

    View Slide

  18. @stefannhs
    Spread the word
    Core team
    Collaboration
    Adoption
    Easy API

    View Slide

  19. @stefannhs

    View Slide

  20. @stefannhs
    Icons made by Freepik from
    www.flaticon.com is licensed by CC 3.0 BY
    DM’s are open!
    @stefannhs

    View Slide