Taming huge Angular applications at bol.com

At the backoffice of bol.com, fifteen autonomous development teams are working together to build and maintain huge Angular 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.

This talk:
* Provides an overview of the enterprise application landscape and organization of teams at the backoffice of bol.com
* Covers the daily challenges faced by teams in extremely dynamic, enterprise environments
* Covers the pros and cons of using Angular
* Covers what a Design System is and how it helps solving those challenges

Transcript

1. @stefannhs Taming huge enterprise applications with Mono repos, Design Systems & Web Components Stefan nieuwenhuis
2. @stefannhs Taming huge enterprise applications with Mono repos, Design Systems & Web Components 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
15. @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: <my-awesome-button></my-awesome-button> Custom Elements API
16. @stefannhs <template> <button>Click me</button> </template> HTML Templates API
17. @stefannhs Shadow DOM
18. @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!;
19. @stefannhs Consistency No framework lock-in Flexible Interoperable Development speed Browser support
20. @stefannhs <h1> My Awesome button </h1> <p>This button is made possible w/ Web Components!</p> <my-button>Click me</my-button>
21. @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>
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)); } }
23. @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);
24. @stefannhs <h1> My Awesome button </h1> <p>This button is made possible w/ Web Components!</p> <my-button>Click me</my-button>
25. @stefannhs Compatibility Easy API Performance Future-proof
26. @stefannhs npm init stencil
27. @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>; } }
28. @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>; } }
29. @stefannhs npm run build
30. @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>
31. @stefannhs Extensive config Auto docs generation Bundling Dev Server Typed components Plugins Polyfills
32. @stefannhs Mono Repository
33. @stefannhs One single source of truth Reusability Versioning Scalable Experience
34. @stefannhs
35. @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
36. @stefannhs
37. @stefannhs Design System Holy Grail of Consistency
38. @stefannhs Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY DM’s are open! @stefannhs