The art of building framework independent design systems

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

Transcript

1. @stefannhs @stefannhs @stefannhs
2. @stefannhs The art of building framework independent design systems Software Engineer Archaeology Waterpolo Stefan Nieuwenhuis Skydiving Books Developer Avocado
3. @stefannhs 1999 - bol.com launch > 2000 - new categories 2011 - retail platform 2013 - €1 bln. turnover
4. @stefannhs Monolith Architecture Server side app User Interface Database
5. @stefannhs Performance Less cross cutting concerns Planning & Design Less operational overhead Security
6. @stefannhs Performance Less cross cutting concerns Planning & Design Less operational overhead Security
7. @stefannhs Microservices
8. @stefannhs Transparency Independency Scalability
9. @stefannhs Transparency Independency Scalability Consistency
10. @stefannhs Design System
11. @stefannhs Pattern Library
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
13. @stefannhs
14. @stefannhs Generic No framework lock-in Flexible Reusable Development speed
15. @stefannhs <h1> My Awesome button </h1> <p>This button is made possible w/ Web Components!</p> <my-button>Click me</my-button>
16. @stefannhs <template id="myButton"> <style>button { border: 2px solid red; border-radius: 5px; background: tomato; padding: 10px; color: white; font-weight: bold; text-transform: uppercase; cursor: pointer; }</style> <button><slot/></button> </template>
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)); } }
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);
19. @stefannhs <h1> My Awesome button </h1> <p>This button is made possible w/ Web Components!</p> <my-button>Click me</my-button>
20. @stefannhs Compatibility Easy API Performance Future-proof
21. @stefannhs npm init stencil
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 <div>Hello world!</div>; } }
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 <button><slot/></button>; } }
24. @stefannhs npm run build
25. @stefannhs ... <script src="/build/mycomponent.js"></script> </head> <body> <h1> My Awesome button </h1> <p>This button is made possible w/ Web Components!</p> <my-button>Click me</my-button> </body>
26. @stefannhs Extensive config Auto docs generation Bundling Dev Server Typed components Plugins Polyfills
27. @stefannhs Mono Repository
28. @stefannhs One single source of truth Reusability Versioning Scalable Experience
29. @stefannhs
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
31. @stefannhs
32. @stefannhs Design System Holy Grail of Consistency
33. @stefannhs Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY DM’s are open! @stefannhs