Slide 1
Slide 1 text
Web Components
An Overview
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Web Components
An Overview
Christian Liebel
Twitter:
@christianliebel
Email:
christian.liebel
@thinktecture.com
Angular & PWA
Slides:
thinktecture.com
/christian-liebel
Slide 3
Slide 3 text
What you can expect
Very quick Web Components
overview
Working (very basic) frontend
based on native web technology
(plus some libraries and modern
JS features)
Evaluation based on frontend
mechanics
What you can not expect
Web Components Deep Dive
(lifecycle, custom attributes/
properties/events, slots, …)
Styling/Layouting
Shadow Parts
è bit.ly/webcointro
Web Components
An Overview
Expectations
Slide 4
Slide 4 text
Can we build frontends
without any framework
but Web Components only?
Web Components
An Overview
Experiment
Slide 5
Slide 5 text
Component-Based Software Engineering
(Mass Produced Software Components, McIlroy 1968)
– Isolated (black box)
– Well-defined inputs and outputs
– Reusable
– Interchangable
– Marketplaces
Web Components
An Overview
Components
Slide 6
Slide 6 text
A Combination Of…
Web Components
An Overview
Web Components
Custom Elements
Shadow DOM
#shadow-root
HTML Templates
Slide 7
Slide 7 text
Browser Support
Web Components
An Overview
Web Components
80
10.1
63
54
Slide 8
Slide 8 text
Vanilla JS & Web Components
– Article management software (read-only)
– Master-detail navigation
– List of articles
– Detail view
– Data is retrieved via HTTP
– Routing
Web Components
An Overview
Sample
Slide 9
Slide 9 text
Vanilla JS & Web Components
Web Components
An Overview
Sample
LIVE DEMO
Slide 10
Slide 10 text
Vanilla JS & Web Components
Pros:
– Very small footprint (~4 K compressed)
– Web Components are very easy to use
Cons:
– No data binding
– No “template magic”
– Routing is tedious
Web Components
An Overview
Recap
Slide 11
Slide 11 text
Libraries
Web Components
An Overview
Web Components
Slide 12
Slide 12 text
Browser Support
Web Components
An Overview
lit-element
11
current
current
current
Slide 13
Slide 13 text
lit-element & vaadin Router
Web Components
An Overview
Sample
LIVE DEMO
Slide 14
Slide 14 text
Pros:
– Data binding
– “Template magic”
– Routing
Cons:
– Larger footprint (~207 K, > Angular app!)
Web Components
An Overview
Recap
Slide 15
Slide 15 text
– Rendering
– Custom Elements
– Templating
– Data Binding
– Routing
– Dependency Injection
– Forms & Form Validation (Form-Associated Custom Elements)
Web Components
An Overview
Recap
Slide 16
Slide 16 text
Web Components
An Overview
Status Quo
do it yourself bring your own libs all in one
Slide 17
Slide 17 text
bit.ly/webcodemo
Web Components
An Overview
Interoperability & Microfrontends
LIVE DEMO
Slide 18
Slide 18 text
Can we build frontends
without any framework
but Web Components only?
Web Components
An Overview
Experiment
Slide 19
Slide 19 text
You can build frontends with web components only.
Extremely small footprint (4.2 K vs. 100+ K basic Angular app)
Fully interoperable
Abstractionless
No time-consuming build process required
But: Some features are missing or tedious to use, you have to choose
libraries for your own Web Components toolbelt
Web Components
An Overview
Yes we can!
Slide 20
Slide 20 text
You can build frontends with Web Components only.
Not all websites/applications need a full-blown framework
But: (Larger/business) applications need architectural means that other
frameworks provide you for free, so frameworks remain a good choice!
The result is more or less the same è Web Components are another
feasible option!
All four major browser vendors are on board – Web Components might
get even more powerful in the future
Web Components
An Overview
Summary
Slide 21
Slide 21 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]