Taming huge enterprise applications with Mono repos, Design Systems & Web Components

At the backoffice of bol.com, fifteen autonomous development teams are working together to build and maintain huge enterprise applications. Knowing that every team gets the best out of themselves through a large degree of autonomy, we decided not to force anyone to choose for a particular framework or development paradigms, which introduces lots of different challenges. One of them is maintaining consistency. In order to keep everything sane, we choose for a different approach: Building a framework independent Design System with Web Components.

Transcript

1. @stefannhs
   Taming huge enterprise applications with Mono repos, Design Systems & Web Components
   Software Engineer
   Archaeology
   Waterpolo
   Stefan Nieuwenhuis
   Skydiving
   Books
   Developer Avocado
   

   View Slide

2. @stefannhs
   1999 - bol.com launch
   > 2000 - new categories
   2011 - retail platform
   2013 - €1 bln. turnover
   

   View Slide

3. @stefannhs
   Monolith Architecture
   Server side app
   User Interface
   Database
   

   View Slide

4. @stefannhs
   Performance
   Less cross cutting concerns
   Planning & Design
   Less operational overhead
   Security
   

   View Slide

5. @stefannhs
   Performance
   Less cross cutting concerns
   Planning & Design
   Less operational overhead
   Security
   

   View Slide

6. @stefannhs
   Microservices
   

   View Slide

7. @stefannhs
   Transparency
   Independency
   Scalability
   

   View Slide

8. @stefannhs
   Transparency
   Independency
   Scalability
   Consistency
   

   View Slide

9. @stefannhs
   Design System
   

   View Slide

10. @stefannhs
    Pattern Library
    

    View Slide

11. @stefannhs
    // Corporate colors
    $palette-blue-main: rgb(051,102,204) !default;
    $palette-blue-dark: rgb(014,052,144) !default;
    $palette-blue-light: rgb(058,125,231) !default;
    $palette-blue-hover: rgb(245,247,252) !default;
    // Secondary colors
    $palette-red-main: rgb(248,087,105) !default;
    $palette-orange-main: rgb(251,120,093) !default;
    $palette-yellow-main: rgb(255,162,078) !default;
    $palette-lime-main: rgb(150,210,113) !default;
    $palette-green-main: rgb(051,204,131) !default;
    Style guide
    

    View Slide

12. @stefannhs
    

    View Slide

13. @stefannhs
    

    View Slide

14. @stefannhs
    // Create an ES6 class which extends HTMLElement
    class AwesomeButtonComponent extends HTMLElement { … }
    // Register our awesome button component to the Custom Elements Registry
    customElements.define(my-awesome-button, AwesomeButtonComponent);
    // Example usage in your app:
    
    Custom Elements API
    

    View Slide

15. @stefannhs
    
    Click me
    
    HTML Templates API
    

    View Slide

16. @stefannhs
    Shadow DOM
    

    View Slide

17. @stefannhs
    // export class Animal
    export class Animal {
    constructor(name) {
    this.name = name;
    }
    greet() {
    return `Hello, my name is ${this.name}!`;
    }
    }
    ES Modules API
    // import class Animal
    import {Animal} from './lib-class-example.js';
    const animal = new Animal('Mr. Mittens');
    const name = animal.greet();
    // --> Hello, my name is Mr. Mittens!;
    

    View Slide

18. @stefannhs
    Consistency
    No framework lock-in
    Flexible
    Interoperable
    Development speed
    Browser support
    

    View Slide

19. @stefannhs
    My Awesome button
    This button is made possible w/ Web Components!
    Click me
    

    View Slide

20. @stefannhs
    
    button {<br/>border: 2px solid red;<br/>border-radius: 5px;<br/>background: tomato;<br/>padding: 10px;<br/>color: white;<br/>font-weight: bold;<br/>text-transform: uppercase;<br/>cursor: pointer;<br/>}
    
    
    

    View Slide

21. @stefannhs
    class MyButtonElement extends HTMLElement {
    constructor() {
    super();
    const template = document.getElementById('myButton');
    // Shadow DOM
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild( template.content.cloneNode(true));
    }
    }
    

    View Slide

22. @stefannhs
    class MyButtonElement extends HTMLElement {
    constructor() {
    super();
    const template = document.getElementById('myButton');
    // Shadow DOM
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild( template.content.cloneNode(true));
    }
    }
    // Define Custom Element
    customElements.define('my-button', MyButtonElement);
    

    View Slide

23. @stefannhs
    My Awesome button
    This button is made possible w/ Web Components!
    Click me
    

    View Slide

24. @stefannhs
    Compatibility
    Easy API
    Performance
    Future-proof
    

    View Slide

25. @stefannhs
    npm init stencil
    

    View Slide

26. @stefannhs
    // Stencil controller
    import { Component, Prop } from '@stencil/core';
    @Component({
    tag: 'my-component',
    styleUrl: 'my-component.css',
    shadow: true
    })
    export class MyComponent {
    render() {
    return Hello world!;
    }
    }
    

    View Slide

27. @stefannhs
    // Stencil controller
    import { Component, Prop } from '@stencil/core';
    @Component({
    tag: 'my-button',
    styleUrl: 'my-button.css',
    shadow: true
    })
    export class MyButtonElement {
    render() {
    return ;
    }
    }
    

    View Slide

28. @stefannhs
    npm run build
    

    View Slide

29. @stefannhs
    ...
    
    
    
    My Awesome button
    This button is made possible w/ Web Components!
    Click me
    
    

    View Slide

30. @stefannhs
    Extensive config
    Auto docs generation
    Bundling
    Dev Server
    Typed components
    Plugins
    Polyfills
    

    View Slide

31. @stefannhs
    Mono Repository
    

    View Slide

32. @stefannhs
    One single source of truth
    Reusability
    Versioning
    Scalable
    Experience
    

    View Slide

33. @stefannhs
    

    View Slide

34. @stefannhs
    {
    "name": "@awesome-components-lib/buttons",
    "version": "5.0.1",
    "description": "Button Component",
    ...
    }
    {
    "name": "@awesome-components-lib/footer",
    "version": "1.0.0",
    "description": "Footer Component",
    ...
    }
    Semantic Versioning
    No interdependencies
    Scoped packages
    

    View Slide

35. @stefannhs
    

    View Slide

36. @stefannhs
    Design System Holy Grail of Consistency
    

    View Slide

37. @stefannhs
    Icons made by Freepik from
    www.flaticon.com is licensed by CC 3.0 BY
    DM’s are open!
    @stefannhs
    https://medium.com/ing-blog/tech/home/
    

    View Slide

38. @stefannhs
    Icons made by Freepik from
    www.flaticon.com is licensed by CC 3.0 BY
    https://medium.com/ing-blog/tech/home/
    

    View Slide