Futureproof your Design Systems with Web Components

A presentation at Ask the Expert Meetup in June 2020 in by Horacio Gonzalez

Slide 1

Slide 1

Futureproof Design Systems with Web Components Horacio Gonzalez 2020-06-22

Slide 2

Slide 2

Who are we? Introducing myself and introducing OVH OVHcloud

Slide 3

Slide 3

Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek Flutter

Slide 4

Slide 4

OVHcloud: A Global Leader 200k Private cloud VMs running 1 Dedicated IaaS Europe 30 Datacenters Own 20Tbps Hosting capacity : 1.3M Physical Servers 360k Servers already deployed Netwok with 35 PoPs

1.3M Customers in 138 Countries

Slide 5

Slide 5

OVHcloud: 4 Universes of Products WebCloud Domain / Email Domain names, DNS, SSL, Redirect Email, Open-Xchange, Exchange Baremetal Cloud VM General Purpose Baremetal SuperPlan T2 >20e Virtualization T3 >80e Storage PaaS for Web Mutu, CloudWeb Compute Standalone, Cluster Game Collaborative Tools, NextCloud Database T4 >300e Bigdata T5 >600e HCI Plesk, CPanel AI PaaS with Platform.sh VDI Cloud Game Public Cloud 12KVA /32KVA Hosted Private Cloud K8S, IA IaaS PaaS for DevOps Storage File, Block, Object, Archive Databases SQL, noSQL, Messaging, Dashboard Network Virtual servers VPS, Dedicated Server Network VPS aaS pCC DC SaaS CRM, Billing, Payment, Stats IP FO, NAT, LB, VPN, Router, DNS, DHCP, TCP/SSL Offload Virtuozzo Cloud Security Wordpress, Magento, Prestashop Wholesales Hosted Private Cloud IAM, MFA, Encrypt, KMS IT Integrators, Cloud Storage, VMware SDDC, vSAN 1AZ / 2AZ vCD, Tanzu, Horizon, DBaaS, DRaaS Nutanix HCI 1AZ / 2AZ, Databases, DRaaS, VDI OpenStack IAM, Compute (VM, K8S) Stortage, Network, Databases Storage Ontap Select, Nutanix File OpenIO, MinIO, CEPH Zerto, Veeam, Atempo AI ElementAI, HuggingFace, Deepopmatic, Systran, EarthCube Bigdata / Analitics / ML Cloudera over S3, Dataiku, Saagie, Tableau, MarketPlace CDN, Database, ISV, WebHosting Support, Managed High Intensive CPU/GPU, Support Basic Encrypt Support thought Partners KMS, HSM Managed services Encrypt (SGX, Network, Storage) IA, DL Hybrid Cloud Standard Tools for AI, AI Studio, vRack Connect, Edge-DC, Private DC IA IaaS, Hosting API AI Dell, HP, Cisco, OCP, MultiCloud Bigdata, ML, Analytics Datalake, ML, Dashboard Secured Cloud GOV, FinTech, Retail, HealtCare

Slide 6

Slide 6

Disclaimer Before going further…

Slide 7

Slide 7

A talk for devs by a dev I am not a designer, neither I play one on TV…

Slide 8

Slide 8

Design isn’t only look and feel Look and feel must be a emanation of brand’s ethos, values and spirit

Slide 9

Slide 9

Example

Slide 10

Slide 10

Design principles Grounding principles and values emanating from the brand ethos, shared by everybody around the product.

Slide 11

Slide 11

Example of Design Principles: Pinterest https://medium.com/@suprb/redesigning-pinterest-block-by-block-6040a00d80a3

Slide 12

Slide 12

Example of Design Principles: gov.uk https://www.gov.uk/guidance/government-design-principles

Slide 13

Slide 13

Functional Patterns Functional patterns are the building blocks of the user interface. They must guide and facilitate user’s behavior.

Slide 14

Slide 14

Functional Patterns Example: Netflix

Slide 15

Slide 15

Perceptual Patterns Perceptual patterns are visual elements defining the look of the product: typography, color palette, illustration styles, layout shapes, textures… They should help to express the brand image.

Slide 16

Slide 16

Perceptual Patterns Example: Slack

Slide 17

Slide 17

Shared Languages A product team need to share a pattern language based on design principles, to create a coherent set of functional and perceptual patterns.

Slide 18

Slide 18

Shared Languages Example: Future Learn

Slide 19

Slide 19

So, what are Design Systems? And why should I look at them?

Slide 20

Slide 20

The same or different?

Slide 21

Slide 21

Style Guides A document listing the styles, patterns, practices, and principles of a brand design standards

Slide 22

Slide 22

Style Guides Style guides define the application’s look and feel

Slide 23

Slide 23

Style Guide Example: Uber https://brand.uber.com/

Slide 24

Slide 24

Style Guide Example: Medium https://www.behance.net/gallery/7226653/Medium-Brand-Development

Slide 25

Slide 25

Style Guides alone are ambiguous Interpretation needed to adapt the preconisation to the use case

Slide 26

Slide 26

Component Catalogs A component catalog is a repository of components, with one or several implementations, code examples and technical documentation

Slide 27

Slide 27

Component Catalog example: Bootstrap https://getbootstrap.com/

Slide 28

Slide 28

Component Catalog Example: ING’s Lion https://lion-web-components.netlify.app/

Slide 29

Slide 29

Component Catalogs alone create inconsistency Like using the same LEGO bricks to create very different objects

Slide 30

Slide 30

Design Systems A Design System is like a common visual language for product teams

Slide 31

Slide 31

Design systems A Design System is a set of design standards, documentations, and principles, alongside with the toolkit (UI patterns and code components) to achieve those standards

Slide 32

Slide 32

Design systems

Slide 33

Slide 33

Example: Carbon Design System https://www.carbondesignsystem.com/

Slide 34

Slide 34

Example: Firefox’s Photon Design System https://design.firefox.com/photon/

Slide 35

Slide 35

Example: Material Design https://material.io/

Slide 36

Slide 36

The component catalog The poor relative of the Design System family

Slide 37

Slide 37

Let’s choose a simple example Bootstrap based component catalogs

Slide 38

Slide 38

A long time ago Components were defined in HTML, CSS and some jQuery

Slide 39

Slide 39

Then it was AngularJS time… And new reference implementations were needed

Slide 40

Slide 40

But you know the sad story… All UI Bootstrap based catalogs woke up with an obsolete implementation

Slide 41

Slide 41

Worry no more, let’s do Angular! ng-bootstrap to the rescue

Slide 42

Slide 42

But times had changed… In 2017 Angular is only one more in the clique

Slide 43

Slide 43

TM React is the new Big Thing So let’s build React Bootstrap…

Slide 44

Slide 44

Wait, what about Vue? We also need BootstrapVue

Slide 45

Slide 45

OK, I think you see my point…

Slide 46

Slide 46

Most Design System do a choice Either they choose a by canonical implementation or they ship and maintain several implementations

Slide 47

Slide 47

Both choices are problematic Shipping only one implementation: Web dev ecosystem changes quickly and almost nobody keeps the same framework for years…

Slide 48

Slide 48

Both choices are problematic Shipping several implementations: You need to maintain all the implementation… and you still miss some others

Slide 49

Slide 49

Incomplete catalogs are problematic People will need to recode the components in their chosen framework… Coherence is not guaranteed!!!

Slide 50

Slide 50

Example: Carbon Design System

Slide 51

Slide 51

The 3 minutes context What the heck are web component?

Slide 52

Slide 52

Web Components Web standard W3C

Slide 53

Slide 53

Web Components Available in all modern browsers: Firefox, Safari, Chrome

Slide 54

Slide 54

Web Components Create your own HTML tags Encapsulating look and behavior

Slide 55

Slide 55

Web Components Fully interoperable With other web components, with any framework

Slide 56

Slide 56

Web Components CUSTOM ELEMENTS SHADOW DOM TEMPLATES

Slide 57

Slide 57

Custom Element To define your own HTML tag <body> … <script> window.customElements.define(‘my-element’, class extends HTMLElement {…}); </script> <my-element></my-element> </body>

Slide 58

Slide 58

Shadow DOM To encapsulate subtree and style in an element <button>Hello, world!</button> <script> var host = document.querySelector(‘button’); const shadowRoot = host.attachShadow({mode:’open’}); shadowRoot.textContent = ‘こんにちは、影の世界!’; </script>

Slide 59

Slide 59

Template To have clonable document template <template id=”mytemplate”> <img src=”” alt=”great image”> <div class=”comment”></div> </template> var t = document.querySelector(‘#mytemplate’); // Populate the src at runtime. t.content.querySelector(‘img’).src = ‘logo.png’; var clone = document.importNode(t.content, true); document.body.appendChild(clone);

Slide 60

Slide 60

But in fact, it’s just an element… ● Attributes ● Properties ● Methods ● Events

Slide 61

Slide 61

Web Components are a web standard Web Components everywhere, baby!

Slide 62

Slide 62

Do you remember AngularJS? And all the code put in the trash bin when Angular arrived…

Slide 63

Slide 63

The pain of switching frameworks? Rewriting once again your code…

Slide 64

Slide 64

The impossibility of sharing UI code? Between apps written with different frameworks

Slide 65

Slide 65

Web Components change that In a clean and standard way

Slide 66

Slide 66

They are truly everywhere 🚀 🚀 Even in the spaaaaaaaace 🚀

Slide 67

Slide 67

Web Components & Design Systems A match made in heaven

Slide 68

Slide 68

You can have a single implementation And it simply works everywhere

Slide 69

Slide 69

When you need interoperability Nothing beats the standard

Slide 70

Slide 70

One more thing…* Let’s copy from the master

Slide 71

Slide 71

Stencil is not so important WebComponents ARE

Slide 72

Slide 72

Use the Platform, Luke… WebComponents ARE native

Slide 73

Slide 73

Do you love your framework? Oh yeah, we all do

Slide 74

Slide 74

Would you marry your framework? Like until death…

Slide 75

Slide 75

How much does cost the divorce? Do you remember when you dropped AngularJS for Angular?

Slide 76

Slide 76

Why recode everything again? Reuse the bricks in your new framework

Slide 77

Slide 77

Lots of web components libraries LitElement SkateJS

Slide 78

Slide 78

And some good news Angular Elements Vue Web Component Wrapper Frameworks begin to understand it

Slide 79

Slide 79

So for your next app Choose a framework, no problem… But please, help your future self Use Web Components!

Slide 80

Slide 80

Conclusion That’s all, folks!