Webcomponents are your frameworks best friend
- 1. WEBCOMPONENTS ARE YOUR FRAMEWORKS BEST FRIEND
- 2. @filipbech
- 3. colibo.com
- 5. WRITE ONCE - USE ANYWHERE the promise of webcomponents
- 7. THIS TALK WILL BE • Webcomponents - what and why • How (basic tech intro) • Using Webcomponents in your framework • Your framework-component as a Web-component
- 8. WHY • Interoperability - portability • Native components brings us native performance • Framework == implementation detail
- 11. SPECS • custom elements • shadow dom • <template> • es-modules
- 16. CONTENT PROJECTION WITH SLOT
- 17. NAMED SLOTS
- 18. STYLING • scoped to shadowRoot • custom-properties • special selectors - eg. :host, :slotted etc. • ::parts on the horizon
- 19. WITH FRAMEWORKS
- 20. HOW TO USE FROM WITHIN FRAMEWORKS • angular • vue • react (preact)
- 22. COMPARING FEATURE-COMPLETENESS • The tests checks that a framework supports the usage of custom elements • Each test has an associated weight, based on how critical it is. The final tally of pass/fails is combined with these weights to create a weighted average score. • Testing in browsers with native support AND in old browser with polyfill • All credit goes to @rob_dodson https://custom-elements-everywhere.com/
- 23. ANGULAR
- 27. VUE
- 30. REACT
- 37. PREACT TO THE RESCUE..?
- 40. SO… • You can do it yourself • Get a reference to the custom-element, and pass properties to it • get a reference to the custom-element and addEventListener
- 41. YOUR COMPONENT AS A CUSTOM-ELEMENT the why, the how and all the details
- 42. WHY • Interoperability • Framework is an implementation detail • The component-developer chooses their preferred tools • Write a datepicker in React - use it in an Angular form
- 43. HOW • Native Webcomponent framework • Wrap in custom-element
- 44. WRAPPING • Element-properties for data • Dom-events for events • Slots • Style encapsulation w. shadowDOM
- 45. THE COMPARISON • features • css encapsulation • slots • properties (inputs) • events (outputs) • ease of use (for dev) • size of bundle • NOT framework integration (too hard to compare)
- 46. EXPORT TO WEBCOMPONENTS • Angular (official) • Vue (official) • React (community)
- 47. WHAT ARE WE BUILDING • a custom-button component • takes a label as a property • Has a Slot for content • counts clicks • emits a custom event (“action”) when clicked • contains an h1, and styles applied to h1
- 55. DISABLE NGZONE
- 56. RESULTS
- 57. ivy
- 58. ANGULAR 9 NEXT 16
- 59. IVY ELEMENTS • Maybe with 9? Later? • smaller, simpler, faster (~15kb) • lazyNgElement https://www.youtube.com/watch?v=JX5GGu_7JKc
- 65. BUILDING
- 66. WITH VUE • feels elegant and light • e.detail is an array of additional arguments to $emit() • Doesn’t handle styles => points to css-modules as the solution • The bundle is tiny - but requires a global vue (cannot be tree-shaken)
- 67. RESULTS
- 68. REACT
- 69. REACT IS DIFFERENT • Passing callbacks as props instead of custom events • CSS-in-JS
- 70. REACT… • no official wrapper • react-web-component • web-react-components • @adobe/react-webcomponent • skateJS
- 71. WEB-REACT-COMPONENTS • Looks like the real deal - but also not maintained • Register()-method to wrap and register • props.children is a <slot> • Hack styles with <style dangerouslySetInnerHTML…> • Requires the polyfill as it ships es5 😒 https://github.com/ChristophP/web-react-components
- 76. RESULTS
- 77. THE RESULTS ARE IN… Angular Vue React Consume 100 % 100 % 71 % Wrap - features 😀 🙂 😕 Wrap - DX 🙂 🙂 😀 Wrap - bundlesize ~49kb ~36kb ~42kb
- 78. DO WE NEED FRAMEWORKS can we use webcomponents alone?
- 79. USING WEBCOMPONENTS ALONE • Sugar on top • LitElement, Stencil, Svelte, • Helpers below • Utility-libraries for http, state-management, etc… https://developers.google.com/web/fundamentals/web-components/best-practices
- 81. PLATFORM RESULTS LitElement Consume 100 % All features 😀 Developer experience 😀 Wrap - bundlesize ~7kb
- 82. THE PLATFORM STILL HAVE SOME GAPS • ::parts • scoped registries • import maps • polyfilling is non-trivial
- 83. CONCLUSION
- 84. CONCLUSION • Webcomponents and your framework complement each other. • Doable today, but still a little complicated and some missing features • Vue and Angular are good in using webcomponents. React not so much atm • The wrappers are pretty cool, but incomplete, large and/or complex (and no official wrapper for react) • <slot>’s don’t mix/match so well with framework-features • Lets make this happen… https://github.com/filipbech/framework-webcomponents
- 85. THANK YOU! This was “webcomponents are your frameworks best friend” Im @filipbech Follow for slides