Let’s see how web components can help us to build accessible, test covered and consistent implementation of our design system that will play well with any technology.

1. Web Components as a foundation
for Design System
Vladlen Fedosov, Director of R&D @Namecheap, Inc
Hint: prepare your QR scanners 😉

2. Vlad Fedosov
Director of R&D @Namecheap
TL;DR:
● 10 years in the industry
● Went path from Junior to Architect
● Use JS since Mootools era
● Amateur DevOps evangelist
● AWS ninja
● Was a part of the Design System kickstart at Namecheap

3. “Opening the door for everyone to
a free and open Internet”

4. Design System concept
Quick refresh of the subject

5. Design system – What’s inside?
“A design system is a
collection of reusable
components, guided by
clear standards, that can
be assembled together to
build any number of
applications.”

6. Design system – Principles
● Efficiency: Instead of repeatedly building similar components from scratch, Design
Systems enable designers & developers to reuse components and thereby increase
efficiency.
● Scalability: Design System is an open work process, constantly being updated and
upgraded, enabling a constant self-improving flux and pushing forward in front of
industry standards.

7. Design system – Principles
● Consistency: Design Systems introduce a shared set of principles and rules to build
components. It becomes much easier to create consistent experiences across different
platforms.
● Scale: Increased efficiency and consistency lead a company to build faster products at
scale.

8. Ok, got it! But why do I need
Web Components here?

9. A UI is a UI
Users don’t care that one UI is built by Team A and another is built by Team B.
Users don’t care if for one project the team followed a scrum process, while
another project followed a kanban process.
Users don’t care if React is powering this feature while Angular is powering
another.
“Easily one of the biggest benefits of establishing a design system is the ability to
produce consistent UIs across teams and products.”

10. Technology agnostic principle
Creating a technology dependency in order to achieve a specific UI style
inherently limits where that UI can go. That’s especially important for big
organizations.
While building a Design System in Angular, React, or Vue is quite a bit better than
the too-open-ended technology agnostic approach, it has one major flaw: it only
works if the rest of your company has standardized on that single framework!

11. Ways to stay technology agnostic

12. First approach
Use power of HTML & CSS and keep JS out of scope
Why not today:
It’s nearly impossible to implement certain animations, transitions and design
rules without use of the JS.
Also complex UI components like date picker just impossible to create w/o JS.

13. Second approach
Write Vanilla JS in a way that it can be integrated with any framework. “Material
Components for the web” approach. We use it now in production.
Why not today: This approach requires high
development effort from Design System
creators and consumers side. Also it has
issues with frameworks compatibility and
Accessibility.

14. Our approach for today
Use Web Platform APIs - Web Components

15. Web Components
Do they really can help us to stay technology agnostic?

16. Web Components – To the rescue!
<x-your-ui-component>
Appearance
Behaviour
Accessibility
</x-your-ui-component>
<x-tab-group aria-label="My test tabs" inverted scrollable>
<x-tab role="tab" slot="tab">Package (12)</x-tab>
<x-tab-panel role="tabpanel" slot="panel">Package</gb-tab-panel>
<x-tab role="tab" slot="tab">Email (345)</x-tab>
<x-tab-panel role="tabpanel" slot="panel">Email</gb-tab-panel>
<x-tab role="tab" slot="tab">Database (14)</x-tab>
<x-tab-panel role="tabpanel" slot="panel">Database</x-tab-panel>
</x-tab-group>

17. Web Components – Compatibility
All major frameworks that exist nowadays fully support Web Components (only React has
some issues with advanced integration).
Browser support:
● IE 10–11 and Edge (Chakra based) are out of the game as they do not support Shadow
DOM.
● All other browsers (Chrome, FF, Safari, iOS, Android, considering 2 latest versions) work
just fine with all major techs we need.
Mobile: Ionic 4 heavily uses Web Components

18. Quirks and features
Of the Web Components

19. Server Side Rendering (SSR)
It’s theoretically possible to fully render WCs at server side (and it even works for
simple ones), but… There is no stable SSR implementation yet, as well as native
way to represent Shadow DOM in HTML 😟
But here is good news – you can live without it (for Design System components).
<good-components>hello world</good-components>
// It’s shadow tree is using a slot to get text contents
<bad-components></bad-components>
// "hello world" is hard-coded in its shadow tree.

20. Styling
Bad news:
● Some browsers still have an issues applying complex
CSS rules
● Sharing of the common CSS rules between
components is tricky
● Some other minor issues are present
Good news:
● There are no issues which can’t be workarounded w/o
heavy polyfills

21. Accessibility
How can we create accessible web pages with Web Components considering that HTML
tags will be custom and so will not have any semantic meaning?
Fortunately there is a solution, to bring semantic back to your custom elements you just
need to follow WAI-AIRA specification. So if you already take care about accessibility — no
much changes here. Let’s look at the accessible slider component built with Web
Components:
<custom-slider min="0" max="10" value="3" role="slider"
tabindex="0" aria-valuemin="0" aria-valuemax="10"
aria-valuenow="3" aria-valuetext="3"
aria-label="Movie rating"></custom-slider>

22. Available tools
Libraries you can use to author your Web Components (sorted by my preference, top to bottom):
● LitElement – written by the guys from Polymer@Google. Simple & capable. Optimal choice
IMO.
● Stencil – Web Components compiler plus base classes. Built by Ionic team. Has paid version
that is adapted for Design Systems creation.
● SkateJS – tiny wrapper around native APIs that allows to use various renderers. Built by Trey
Shugart who gave us WC SSR PoC.

23. Hmm, is there are any examples of
Design Systems built with
Web Components?

24. Design Systems that use Web Components
● Ionic 4 UI Components
● Material Web Components @Google (pre-release)
● Helix Design System @Rackspace
● UI5 Web Components @SAP
● Others

25. Demo time 😅

26. Vlad Fedosov
Director of R&D
@Namecheap, Inc
vlad.fedosov@gmail.com
Slides:
Or just scan it:
bit.ly/2Nxa02s
Demo:
github.com/StyleT/
lvivcss19