The art of building framework independent design systems

Video: https://www.youtube.com/watch?v=ZusytL3s8Zw

Transcript

1. @stefannhs
   @stefannhs
   @stefannhs
   

   View Slide

2. @stefannhs
   The art of building framework independent design systems
   Software Engineer
   Archaeology
   Waterpolo
   Stefan Nieuwenhuis
   Skydiving
   Books
   Developer Avocado
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. @stefannhs
   Microservices
   

   View Slide

8. @stefannhs
   Transparency
   Independency
   Scalability
   

   View Slide

9. @stefannhs
   Transparency
   Independency
   Scalability
   Consistency
   

   View Slide

10. @stefannhs
    Design System
    

    View Slide

11. @stefannhs
    Pattern Library
    

    View Slide

12. @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

13. @stefannhs
    

    View Slide

14. @stefannhs
    Generic
    No framework lock-in
    Flexible
    Reusable
    Development speed
    

    View Slide

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

    View Slide

16. @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

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

    View Slide

18. @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

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

    View Slide

20. @stefannhs
    Compatibility
    Easy API
    Performance
    Future-proof
    

    View Slide

21. @stefannhs
    npm init stencil
    

    View Slide

22. @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

23. @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

24. @stefannhs
    npm run build
    

    View Slide

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

    View Slide

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

    View Slide

27. @stefannhs
    Mono Repository
    

    View Slide

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

    View Slide

29. @stefannhs
    

    View Slide

30. @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

31. @stefannhs
    

    View Slide

32. @stefannhs
    Design System Holy Grail of Consistency
    

    View Slide

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

    View Slide