Frameworks and webcomponents
•
2 likes•633 views
Comparing usage and exporting to webcomponents from popular frameworks as React, Angular and VueJS. Talk from #ngVikings 2019.
Report
Share
Frameworks and webcomponents
- 2. @filipbech
- 6. WRITEONCE-USEANYWHERE the promise of webcomponents
- 8. THISTALKWILLBE • Webcomponents - what and why • How (basic tech intro) • Using Webcomponents in your framework • Your framework-component as a Web-component
- 9. WHY • Interoperability - portability • Native components brings us native performance • Framework == implementation detail
- 11. SPECS • custom elements • shadow dom • <template> • es-modules
- 17. NAMEDSLOTS
- 18. STYLING • scoped to shadowRoot • custom-properties • special selectors - eg. :host, :slotted etc. • ::parts on the horizon
- 19. WITHFRAMEWORKS
- 20. HOWTOUSEFROMWITHINFRAMEWORKS • angular • vue • react (preact)
- 22. COMPARINGFEATURE-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
- 38. 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
- 39. YOURFRAMEWORK-COMPONENT ASACUSTOM-ELEMENT the why, the how and all the details
- 40. 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
- 41. HOW • Native Webcomponent framework • Wrap in custom-element
- 42. WRAPPING • Element-properties for data • Dom-events for events • Slots • Style encapsulation w. shadowDOM
- 43. THECOMPARISON • features • css encapsulation • slots • properties (inputs) • events (outputs) • ease of use (for dev) • size of bundle • NOT framework integration (too hard to compare)
- 44. EXPORTTOWEBCOMPONENTS • Angular (official) • Vue (official) • React (community)
- 45. WHATAREWEBUILDING • 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. ivy
- 57. IVYELEMENTS • smaller, simpler, faster (~15kb) • not in v8 • lazyNgElement https://www.youtube.com/watch?v=JX5GGu_7JKc
- 63. BUILDING
- 64. WITHVUE • feels elegant and light • e.detail is an array or 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)
- 66. REACT
- 67. REACTISDIFFERENT • Passing callbacks as props instead of custom events • CSS-in-JS
- 68. REACT… • no official wrapper • react-web-component • web-react-components • @adobe/react-webcomponent • skateJS
- 69. 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
- 75. WEDON’THAVETIMEFOR • @adobe/react-webcomponent • skatejs • something else
- 76. THERESULTSAREIN… Angular Vue React Consume 100 % 100 % 71 % Wrap - features 😀 🙂 😕 Wrap - DX 🙂 😀 😀 Wrap - bundlesize ~50kb ~36kb ~39kb
- 77. DOWENEEDFRAMEWORKS can we use webcomponents alone?
- 78. USINGWEBCOMPONENTSALONE • 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
- 79. THEPLATFORMSTILLHAVESOMEGAPS • ::parts • scoped registries • import maps • polyfilling is non-trivial
- 80. CONCLUSION
- 81. CONCLUSION • Very interesting and promising future • but it is still early days… • 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 https://github.com/filipbech/framework-webcomponents
- 82. THANKYOU! This was “frameworks and webcomponents” Im @filipbech Follow for slides