Slide 1
Slide 1 text
Web Components als Frameworkersatz
Das Frontend-Experiment
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Web Components als Frameworkersatz
Das Frontend-Experiment
Christian Liebel
Twitter:
@christianliebel
Email:
christian.liebel
@thinktecture.com
Angular & PWA
Slides:
thinktecture.com
/christian-liebel
Slide 3
Slide 3 text
Can we build frontends
without any framework
but Web Components only?
Web Components als Frameworkersatz
Das Frontend-Experiment
Experiment
Slide 4
Slide 4 text
What you can expect
Very quick Web Components
overview
Working 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 als Frameworkersatz
Das Frontend-Experiment
Expectations
Slide 5
Slide 5 text
Component-Based Software Engineering
(Mass Produced Software Components, McIlroy 1968)
– Isolated (black box)
– Well-defined inputs and outputs
– Repeatable
– Interchangable
– Marketplaces
Web Components als Frameworkersatz
Das Frontend-Experiment
Components
Slide 6
Slide 6 text
A Combination Of…
Web Components als Frameworkersatz
Das Frontend-Experiment
Web Components
Custom Elements
Shadow DOM
#shadow-root
HTML Templates
Slide 7
Slide 7 text
Browser Support
Web Components als Frameworkersatz
Das Frontend-Experiment
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 als Frameworkersatz
Das Frontend-Experiment
Sample
Slide 9
Slide 9 text
Vanilla JS & Web Components
Web Components als Frameworkersatz
Das Frontend-Experiment
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 als Frameworkersatz
Das Frontend-Experiment
Recap
Slide 11
Slide 11 text
Libraries
Web Components als Frameworkersatz
Das Frontend-Experiment
Web Components
Slide 12
Slide 12 text
Browser Support
Web Components als Frameworkersatz
Das Frontend-Experiment
lit-element
11
current
current
current
Slide 13
Slide 13 text
lit-element & vaadin Router
Web Components als Frameworkersatz
Das Frontend-Experiment
Sample
LIVE DEMO
Slide 14
Slide 14 text
Pros:
– Data binding
– “Template magic”
– Routing
Cons:
– Larger footprint (~207 K, > Angular app!)
Web Components als Frameworkersatz
Das Frontend-Experiment
Recap
Slide 15
Slide 15 text
– Rendering
– Custom Elements
– Templating
– Data Binding
– Routing
– Dependency Injection (e.g., TSyringe)
– Forms & Form Validation
Web Components als Frameworkersatz
Das Frontend-Experiment
Recap
Slide 16
Slide 16 text
Web Components als Frameworkersatz
Das Frontend-Experiment
Status Quo
do it yourself bring your own libs all in one
Slide 17
Slide 17 text
bit.ly/webcodemo
Web Components als Frameworkersatz
Das Frontend-Experiment
Interoperability & Microfrontends
LIVE DEMO
Slide 18
Slide 18 text
Can we build frontends
without any framework
but Web Components only?
Web Components als Frameworkersatz
Das Frontend-Experiment
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
Web Components als Frameworkersatz
Das Frontend-Experiment
Yes we can!
Slide 20
Slide 20 text
Some features are missing or tedious to use, you have to choose
libraries for your own Web Components toolbelt
No native form support yet – Forms Participation API may allow custom
components to take part in native form submit, reset, validation, etc. in
the future
Web Components als Frameworkersatz
Das Frontend-Experiment
But…
Slide 21
Slide 21 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 als Frameworkersatz
Das Frontend-Experiment
Summary
Slide 22
Slide 22 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]