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.

WordCamp Brighton - Why use web components

328 views

Published on

In this talk I will show, the key web APIs behind web components and show how create your web component and integrate with a Gutenberg block.

Published in: Technology
  • Login to see the comments

  • Be the first to like this

WordCamp Brighton - Why use web components

  1. 1. Why use web components? Fellyph Cintra Solutions Engineer Deloitte Digital !1
  2. 2. @Fellyph !2
  3. 3. !3 Call for Speakers: https://2019.dublin.wordcamp.org/call-for-speakers/ Speakers Application until 20th August
  4. 4. Web Components !4
  5. 5. Web Components • It is a set of four specs from Web API. • Web components creates custom and reusable elements natively !5
  6. 6. Benefits? !6
  7. 7. !7 Reusability Maintainability Encapsulation
  8. 8. But… !8
  9. 9. Web components + frameworks !9https://custom-elements-everywhere.com/
  10. 10. JavaScript frameworks support !10 100% 100% 71%91% https://custom-elements-everywhere.com/
  11. 11. Motivation !11
  12. 12. Support !12 end of 2018
  13. 13. header Menu User dropdown card Sidebar card card Footer header User dropdown card card Footer !13 header cardSidebar card card Footer Cross application
  14. 14. Design system !14
  15. 15. How it works !15
  16. 16. Fantastic 4 !16 Custom Elements Shadow DOM ES modules HTML Templates +
  17. 17. ● The specification allows us to create new types of DOM elements, where we have two types: ○ Autonomous elements where the entire definition created by the developer ○ Customised element when the new element extends from a Default HTML element !17 Custom Elements
  18. 18. ● Independent DOM tree that provides encapsulation. ● Keeps the markup in a different layer, to keep the code clean. ● Needs extra attention with cross-functionality Light DOM X Shadow DOM !18 Shadow DOM
  19. 19. HTML Templates ● Permits to create reusable HTML template without rendering them. ● Images won't load until we attach the template on the DOM. !19
  20. 20. code time! !20
  21. 21. Objective !21
  22. 22. !22 Style
  23. 23. !23 Future https://github.com/w3c/webcomponents/issues/759
  24. 24. !24 Template
  25. 25. !25 Constructor
  26. 26. !26 Our component: Attributes
  27. 27. !27 Our component: Listening attributes
  28. 28. !28 Almost done
  29. 29. !29 Creating custom element
  30. 30. !30 My Gutenberg block
  31. 31. !31
  32. 32. Can we make it simple? !32
  33. 33. https://lit-element.polymer-project.org/ !33
  34. 34. !34 lit-element
  35. 35. Where can I learn more? !35
  36. 36. webcomponents.org !36
  37. 37. Web fundamentals !37https://developers.google.com/web/fundamentals/web-components/
  38. 38. Developer Guide !38 https://open-wc.org/
  39. 39. Obrigado Thank you !39
  40. 40. @fellyph !40 https://github.com/fellyph/wcbrighton2019

×