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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

April 17, 2020
Tweet

Transcript

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

  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
  3. Can we build frontends without any framework but Web Components

    only? Web Components als Frameworkersatz Das Frontend-Experiment Experiment
  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
  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
  6. A Combination Of… Web Components als Frameworkersatz Das Frontend-Experiment Web

    Components Custom Elements <my-element> Shadow DOM #shadow-root HTML Templates <template>
  7. Browser Support Web Components als Frameworkersatz Das Frontend-Experiment Web Components

    80 10.1 63 54
  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
  9. Vanilla JS & Web Components Web Components als Frameworkersatz Das

    Frontend-Experiment Sample LIVE DEMO
  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
  11. Libraries Web Components als Frameworkersatz Das Frontend-Experiment Web Components

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

    current current current
  13. lit-element & vaadin Router Web Components als Frameworkersatz Das Frontend-Experiment

    Sample LIVE DEMO
  14. Pros: – Data binding – “Template magic” – Routing Cons:

    – Larger footprint (~207 K, > Angular app!) Web Components als Frameworkersatz Das Frontend-Experiment Recap
  15. – Rendering – Custom Elements – Templating – Data Binding

    – Routing – Dependency Injection (e.g., TSyringe) – Forms & Form Validation Web Components als Frameworkersatz Das Frontend-Experiment Recap
  16. Web Components als Frameworkersatz Das Frontend-Experiment Status Quo do it

    yourself bring your own libs all in one
  17. bit.ly/webcodemo Web Components als Frameworkersatz Das Frontend-Experiment Interoperability & Microfrontends

    LIVE DEMO
  18. Can we build frontends without any framework but Web Components

    only? Web Components als Frameworkersatz Das Frontend-Experiment Experiment
  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!
  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…
  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
  22. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com