Web Components: An Overview

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

Transcript

1. Web Components
   An Overview
   Christian Liebel
   @christianliebel
   Consultant
   

   View Slide

2. Hello, it’s me.
   Web Components
   An Overview
   Christian Liebel
   Twitter:
   @christianliebel
   Email:
   christian.liebel
   @thinktecture.com
   Angular & PWA
   Slides:
   thinktecture.com
   /christian-liebel
   

   View Slide

3. 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
   

   View Slide

4. Can we build frontends
   without any framework
   but Web Components only?
   Web Components
   An Overview
   Experiment
   

   View Slide

5. 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
   

   View Slide

6. A Combination Of…
   Web Components
   An Overview
   Web Components
   Custom Elements
   
   Shadow DOM
   #shadow-root
   HTML Templates
   
   

   View Slide

7. Browser Support
   Web Components
   An Overview
   Web Components
   80
   10.1
   63
   54
   

   View Slide

8. 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
   

   View Slide

9. Vanilla JS & Web Components
   Web Components
   An Overview
   Sample
   LIVE DEMO
   

   View Slide

10. 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
    

    View Slide

11. Libraries
    Web Components
    An Overview
    Web Components
    

    View Slide

12. Browser Support
    Web Components
    An Overview
    lit-element
    11
    current
    current
    current
    

    View Slide

13. lit-element & vaadin Router
    Web Components
    An Overview
    Sample
    LIVE DEMO
    

    View Slide

14. Pros:
    – Data binding
    – “Template magic”
    – Routing
    Cons:
    – Larger footprint (~207 K, > Angular app!)
    Web Components
    An Overview
    Recap
    

    View Slide

15. – Rendering
    – Custom Elements
    – Templating
    – Data Binding
    – Routing
    – Dependency Injection
    – Forms & Form Validation (Form-Associated Custom Elements)
    Web Components
    An Overview
    Recap
    

    View Slide

16. Web Components
    An Overview
    Status Quo
    do it yourself bring your own libs all in one
    

    View Slide

17. bit.ly/webcodemo
    Web Components
    An Overview
    Interoperability & Microfrontends
    LIVE DEMO
    

    View Slide

18. Can we build frontends
    without any framework
    but Web Components only?
    Web Components
    An Overview
    Experiment
    

    View Slide

19. 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!
    

    View Slide

20. 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
    

    View Slide

21. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide