Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components: An Overview

Web Components: An Overview

A brief overview of web components in regard to the question "can web components replace SPA frameworks?".

Christian Liebel

September 02, 2020

More Decks by Christian Liebel

Other Decks in Programming


  1. Hello, it’s me. Web Components An Overview Christian Liebel Twitter:

    @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
  2. 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
  3. Can we build frontends without any framework but Web Components

    only? Web Components An Overview Experiment
  4. 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
  5. A Combination Of… Web Components An Overview Web Components Custom

    Elements <my-element> Shadow DOM #shadow-root HTML Templates <template>
  6. 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
  7. 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
  8. Pros: – Data binding – “Template magic” – Routing Cons:

    – Larger footprint (~207 K, > Angular app!) Web Components An Overview Recap
  9. – Rendering – Custom Elements – Templating – Data Binding

    – Routing – Dependency Injection – Forms & Form Validation (Form-Associated Custom Elements) Web Components An Overview Recap
  10. Can we build frontends without any framework but Web Components

    only? Web Components An Overview Experiment
  11. 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!
  12. 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