Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Leveraging the Power of Custom Elements in Gutenberg

77 views

Published on

Originally presented at WordCamp Europe 2019

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Leveraging the Power of Custom Elements in Gutenberg

  1. 1. Felix Arntz / WordCamp Europe 2019 Leveraging the Power of
  2. 2. Pillars of Delightful Content Experiences SecurePerformant Integrated Engaging
  3. 3. 1998 2000 2002 2004 2006 2008 2010 2012 2014 2016 2018 2020 XMLHttpRequest ES5 HTML5 HTML4 GraphQL CSS2 XML-RPC Server Timing Web Workers Reporting API Service Workers Web App Manifest WAI-ARIA Feature Policy CSS4 ES10 ES7 Custom Elements ES9 CSS Shadow Parts WebAssembly Intersection Obs. NEL Shadow DOM Media Queries CSS3 REST ES3 XHTML 1.0 Evolution of the Open Web * * This is just a very small sample.
  4. 4. Content Complexity
  5. 5. Components to the Rescue Header Logo Responsive hero image Ad Article Image Headline Button Button
  6. 6. Component-based Frameworks React Vue Angular and many more...
  7. 7. Benefits of a Component-based Approach MaintainabilityReusability Encapsulation
  8. 8. Component-based Frameworks React Vue Angular and many more...
  9. 9. Problem: Fragmentation Reinventing the Wheel Lack of interoperability Separated Communities
  10. 10. Web Components https://developers.google.com/web/fundamentals/web-components/
  11. 11. Web Components are a standardized set of browser APIs that allow you to define your own HTML tags, reusable and self-contained.
  12. 12. Benefits of Web Components Improved Maintainability Improved Reusability Improved Encapsulation Standardization
  13. 13. Shadow DOM Allows style and markup to be encapsulated from the regular DOM. Custom Elements Allows developers to define their own HTML tags. HTML Templates Allows to place markup in a page that is only parsed once necessary. Key Web APIs
  14. 14. class Tab extends HTMLElement { constructor() { super(); this.attachShadow( { mode: 'open' } ); this.shadowRoot.innerHTML = ` <style> /* scoped styles */ </style> <slot></slot> `; } static get observedAttributes() { // Return list of attributes to watch. } attributeChangedCallback( name, oldValue, newValue ) { // Run functionality when one of these attributes is changed. } connectedCallback() { // Run functionality when an instance of this element is inserted into the DOM. } disconnectedCallback() { // Run functionality when an instance of this element is removed from the DOM. } } customElements.define( 'my-tab', Tab );
  15. 15. Current Browser Support See full browser support caniuse.com/#feat=custom-elementsv1 caniuse.com/#feat=shadowdomv1 caniuse.com/#feat=template Also, check out the polyfill! (github.com/webcomponents/custom-elements)
  16. 16. Interested in a technical deep dive? ● https://developers.google.com/web/fundamentals/web-components/customelements ● https://developers.google.com/web/fundamentals/web-components/shadowdom ● https://developers.google.com/web/fundamentals/web-components/best-practices https://youtu.be/tIAhDR5ohnc?t=7661
  17. 17. A Solid Foundation https://lit-element.polymer-project.org
  18. 18. Bye bye, component-based frameworks?
  19. 19. Standardized Leaf Components (e.g. in React) const { Component } = React; class MyComponent extends Component { render() { const { active } = this.props; return ( <my-leaf-component active={ active }> </my-leaf-component> ); } } class MyLeafComponent extends HTMLElement { static get observedAttributes() { return [ 'active' ]; } } customElements.define( 'my-leaf-component', MyLeafComponent );
  20. 20. Custom Elements as Blocks?
  21. 21. https://youtu.be/plt-iH_47GE
  22. 22. Source: https://softwareengineeringdaily.com/2018/10/22/google-javascript-with-malte-ubl/ Many frameworks are modeled around some notion of components. [...] So there's one thing that I am very sure of, which is that we will see Web Components as the basically only technology used for what I would call leaf components. Malte Ubl “ ”Tech Lead of the AMP Project
  23. 23. Web Components ❤ Application Frameworks!
  24. 24. https://amp.dev https://amp-wp.org Web Components in Frameworks today
  25. 25. AMP Components
  26. 26. Introducing Bento AMP
  27. 27. AMP Components in Gutenberg
  28. 28. Get Started with Web Components LitElement Following Best Practices Web Components Learning The Basics AMP Framework Reviewing Examples Gutenberg Building Blocks
  29. 29. Further Resources ● https://www.webcomponents.org ● https://lit-element.polymer-project.org ● https://amp.dev ● https://github.com/felixarntz/web-components-in-gutenberg
  30. 30. Proprietary + Confidential Thank You Felix Arntz @felixarntz

×