@stefannhs Taming huge enterprise applications with Mono repos, Design Systems & Web Components Stefan nieuwenhuis 

@stefannhs Taming huge enterprise applications with Mono repos, Design Systems & Web Components 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 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 

@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 

@stefannhs Click me HTML Templates API 

@stefannhs Shadow DOM 

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

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

@stefannhs

My Awesome button

This button is made possible w/ Web Components!

Click me 

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

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

@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

My Awesome button

This button is made possible w/ Web Components!

Click me 

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

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

@stefannhs npm run build 

@stefannhs ...

My Awesome button

This button is made possible w/ Web Components!

Click me 

@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