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.

of

Leveraging the Power of Custom Elements in Gutenberg Slide 1 Leveraging the Power of Custom Elements in Gutenberg Slide 2 Leveraging the Power of Custom Elements in Gutenberg Slide 3 Leveraging the Power of Custom Elements in Gutenberg Slide 4 Leveraging the Power of Custom Elements in Gutenberg Slide 5 Leveraging the Power of Custom Elements in Gutenberg Slide 6 Leveraging the Power of Custom Elements in Gutenberg Slide 7 Leveraging the Power of Custom Elements in Gutenberg Slide 8 Leveraging the Power of Custom Elements in Gutenberg Slide 9 Leveraging the Power of Custom Elements in Gutenberg Slide 10 Leveraging the Power of Custom Elements in Gutenberg Slide 11 Leveraging the Power of Custom Elements in Gutenberg Slide 12 Leveraging the Power of Custom Elements in Gutenberg Slide 13 Leveraging the Power of Custom Elements in Gutenberg Slide 14 Leveraging the Power of Custom Elements in Gutenberg Slide 15 Leveraging the Power of Custom Elements in Gutenberg Slide 16 Leveraging the Power of Custom Elements in Gutenberg Slide 17 Leveraging the Power of Custom Elements in Gutenberg Slide 18 Leveraging the Power of Custom Elements in Gutenberg Slide 19 Leveraging the Power of Custom Elements in Gutenberg Slide 20 Leveraging the Power of Custom Elements in Gutenberg Slide 21 Leveraging the Power of Custom Elements in Gutenberg Slide 22 Leveraging the Power of Custom Elements in Gutenberg Slide 23 Leveraging the Power of Custom Elements in Gutenberg Slide 24 Leveraging the Power of Custom Elements in Gutenberg Slide 25 Leveraging the Power of Custom Elements in Gutenberg Slide 26 Leveraging the Power of Custom Elements in Gutenberg Slide 27 Leveraging the Power of Custom Elements in Gutenberg Slide 28 Leveraging the Power of Custom Elements in Gutenberg Slide 29 Leveraging the Power of Custom Elements in Gutenberg Slide 30 Leveraging the Power of Custom Elements in Gutenberg Slide 31 Leveraging the Power of Custom Elements in Gutenberg Slide 32 Leveraging the Power of Custom Elements in Gutenberg Slide 33 Leveraging the Power of Custom Elements in Gutenberg Slide 34 Leveraging the Power of Custom Elements in Gutenberg Slide 35
Upcoming SlideShare
What to Upload to SlideShare
Next

2 Likes

Share

Leveraging the Power of Custom Elements in Gutenberg

Originally presented at WordCamp Europe 2019

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • TomHall119

    Jun. 29, 2020
  • IvanSkokovskyi

    Oct. 18, 2019

Originally presented at WordCamp Europe 2019

Views

Total views

1,889

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

2

×