Web Components als Frameworkersatz – das Frontend-Experiment

Wenn ein Frontend im Web benötigt wird, ist die Wahl schnell auf die üblichen Verdächtigen eingegrenzt: Angular, React oder Blazor. Durch Web Components könnte sich das in Zukunft ändern. Christian Liebel von Thinktecture wagt einen Blick in die Glaskugel: Mit Web Components hat das Web ein Komponentenmodell erhalten, das kontinuierlich weiterentwickelt wird. Vielleicht braucht es in Zukunft nicht mehr für jeden Anwendungsfall zwingend ein schweres Framework. Anhand eines Experiments wird demonstriert, ob sich Frontends schon heute komplett mit Web Components statt Frameworks aufziehen lassen.

Transcript

1. Web Components als Frameworkersatz
   Das Frontend-Experiment
   Christian Liebel
   @christianliebel
   Consultant
   

   View Slide

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

   View Slide

3. Can we build frontends
   without any framework
   but Web Components only?
   Web Components als Frameworkersatz
   Das Frontend-Experiment
   Experiment
   

   View Slide

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

   View Slide

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

   View Slide

6. A Combination Of…
   Web Components als Frameworkersatz
   Das Frontend-Experiment
   Web Components
   Custom Elements
   
   Shadow DOM
   #shadow-root
   HTML Templates
   
   

   View Slide

7. Browser Support
   Web Components als Frameworkersatz
   Das Frontend-Experiment
   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 als Frameworkersatz
   Das Frontend-Experiment
   Sample
   

   View Slide

9. Vanilla JS & Web Components
   Web Components als Frameworkersatz
   Das Frontend-Experiment
   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 als Frameworkersatz
    Das Frontend-Experiment
    Recap
    

    View Slide

11. Libraries
    Web Components als Frameworkersatz
    Das Frontend-Experiment
    Web Components
    

    View Slide

12. Browser Support
    Web Components als Frameworkersatz
    Das Frontend-Experiment
    lit-element
    11
    current
    current
    current
    

    View Slide

13. lit-element & vaadin Router
    Web Components als Frameworkersatz
    Das Frontend-Experiment
    Sample
    LIVE DEMO
    

    View Slide

14. Pros:
    – Data binding
    – “Template magic”
    – Routing
    Cons:
    – Larger footprint (~207 K, > Angular app!)
    Web Components als Frameworkersatz
    Das Frontend-Experiment
    Recap
    

    View Slide

15. – Rendering
    – Custom Elements
    – Templating
    – Data Binding
    – Routing
    – Dependency Injection (e.g., TSyringe)
    – Forms & Form Validation
    Web Components als Frameworkersatz
    Das Frontend-Experiment
    Recap
    

    View Slide

16. Web Components als Frameworkersatz
    Das Frontend-Experiment
    Status Quo
    do it yourself bring your own libs all in one
    

    View Slide

17. bit.ly/webcodemo
    Web Components als Frameworkersatz
    Das Frontend-Experiment
    Interoperability & Microfrontends
    LIVE DEMO
    

    View Slide

18. Can we build frontends
    without any framework
    but Web Components only?
    Web Components als Frameworkersatz
    Das Frontend-Experiment
    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
    Web Components als Frameworkersatz
    Das Frontend-Experiment
    Yes we can!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide