The art of building framework independent design systems

@stefannhs @stefannhs @stefannhs

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

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

@stefannhs Monolith Architecture Server side app User Interface Database

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

@stefannhs Microservices

@stefannhs Transparency Independency Scalability

@stefannhs Transparency Independency Scalability Consistency

@stefannhs Design System

@stefannhs Pattern Library

@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

@stefannhs

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

@stefannhs <h1> My Awesome button </h1> <p>This button is made
possible w/ Web Components!</p> <my-button>Click me</my-button>

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

@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)); } }

@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);

@stefannhs <h1> My Awesome button </h1> <p>This button is made
possible w/ Web Components!</p> <my-button>Click me</my-button>

@stefannhs Compatibility Easy API Performance Future-proof

@stefannhs npm init stencil

@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>; } }

@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>; } }

@stefannhs npm run build

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

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

@stefannhs Mono Repository

@stefannhs One single source of truth Reusability Versioning Scalable Experience

@stefannhs

@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

@stefannhs

@stefannhs Design System Holy Grail of Consistency

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

The art of building framework independent desig...

The art of building framework independent design systems

Stefan Nieuwenhuis

More Decks by Stefan Nieuwenhuis

Other Decks in Technology

Featured

Transcript

@stefannhs @stefannhs @stefannhs

@stefannhs The art of building framework independent design systems Software

@stefannhs 1999 - bol.com launch > 2000 - new categories

@stefannhs Monolith Architecture Server side app User Interface Database

@stefannhs Performance Less cross cutting concerns Planning & Design Less

@stefannhs Performance Less cross cutting concerns Planning & Design Less

@stefannhs Microservices

@stefannhs Transparency Independency Scalability

@stefannhs Transparency Independency Scalability Consistency

@stefannhs Design System

@stefannhs Pattern Library

@stefannhs // Corporate colors $palette-blue-main: rgb(051,102,204) !default; $palette-blue-dark: rgb(014,052,144) !default;

@stefannhs

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

@stefannhs <h1> My Awesome button </h1> <p>This button is made

@stefannhs <template id="myButton"> <style>button { border: 2px solid red; border-radius:

@stefannhs class MyButtonElement extends HTMLElement { constructor() { super(); const

@stefannhs class MyButtonElement extends HTMLElement { constructor() { super(); const

@stefannhs <h1> My Awesome button </h1> <p>This button is made

@stefannhs Compatibility Easy API Performance Future-proof

@stefannhs npm init stencil

@stefannhs // Stencil controller import { Component, Prop } from

@stefannhs // Stencil controller import { Component, Prop } from

@stefannhs npm run build

@stefannhs ... <script src="/build/mycomponent.js"></script> </head> <body> <h1> My Awesome button

@stefannhs Extensive config Auto docs generation Bundling Dev Server Typed

@stefannhs Mono Repository

@stefannhs One single source of truth Reusability Versioning Scalable Experience

@stefannhs

@stefannhs { "name": "@awesome-components-lib/buttons", "version": "5.0.1", "description": "Button Component", ...

@stefannhs

@stefannhs Design System Holy Grail of Consistency

@stefannhs Icons made by Freepik from www.flaticon.com is licensed by