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

Web Components als Frameworkersatz – das Frontend-Experiment

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.

Christian Liebel
PRO

April 17, 2020
Tweet

More Decks by Christian Liebel

Other Decks in Programming

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
    [email protected]

    View Slide