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.

Google I/O extended 2019 Fellyph Cintra

576 views

Published on

Is 2019 the year of Web Components, on this presentation we are going to look back on time and see the last key points related to this topic.

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Google I/O extended 2019 Fellyph Cintra

  1. 1. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Is 2019 the year of Web Components? Fellyph Cintra Solutions Engineer Deloitte Digital 1
  2. 2. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin @Fellyph 2
  3. 3. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Web Components 3
  4. 4. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Web Components It is a set of four specs from HTML5 and JavaScript. Web components creates custom and reusable elements natively 4Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
  5. 5. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Fantastic 4 5 Custom Elements Shadow DOM ES modules HTML Templates
  6. 6. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin ● 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 6 Custom Elements
  7. 7. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Autonomous element 7 <ph-button></ph-button>
  8. 8. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Customised element 8 <button is=“ph-custom-button“>Click Me :)</button>
  9. 9. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin ● 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 9 Shadow DOM
  10. 10. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Shadow DOM Example 10
  11. 11. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin ● The ES Module specification defines the inclusion and reuse of JS documents in other JS documents. ● ES Modules enable web components to be developed in a modular way. 11 ES modules
  12. 12. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin ● Permits to create reusable HTML template without rendering them. ● Images won't load until we attach the template on the DOM. 12 HTML Templates
  13. 13. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Is 2019 the year of Web Components? 13
  14. 14. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 14
  15. 15. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 15 Google I/O 2012 - The Web Platform’s Cutting Edge JS.LA 2014 - Zeno Rocha: A future called Web Components Google I/O 2014 - Polymer and Web Components change everything you know about Web development Google I/O 2016 - Pratical lessons from a year of building Web Components Google I/O 2108 - Polymer 3.0 and beyond
  16. 16. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Support 16 end of 2018
  17. 17. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 17
  18. 18. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 18 Is 2019 the year of Web Components?
  19. 19. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 19
  20. 20. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 20
  21. 21. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Web components + frameworks 21https://custom-elements-everywhere.com/
  22. 22. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin JavaScript frameworks support 22 100% 100% 71%91% https://custom-elements-everywhere.com/
  23. 23. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 23
  24. 24. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Where can I start? 24
  25. 25. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Developer Guide 25https://open-wc.org/
  26. 26. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin open-wc ● Web component recommendations with pre-configured ● automation ● tooling ● test ● lint ● demo 26
  27. 27. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin npm init @open-wc 27
  28. 28. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Lit Element 28
  29. 29. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin webcomponents.org 29
  30. 30. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Web fundamentals 30https://developers.google.com/web/fundamentals/web-components/
  31. 31. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Obrigado Thank you 31
  32. 32. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin Links Documentation https://www.webcomponents.org/ https://open-wc.org/ https://developers.google.com/web/fundamentals/web-components/ https://custom-elements-everywhere.com/ I/O talks Google I/O 2012 - https://www.youtube.com/watch?v=2txPYQOWBtg Google I/O 2014 - https://www.youtube.com/watch?v=8OJ7ih8EE7 Google I/O 2016 - https://www.youtube.com/watch?v=zfQoleQEa4w Google I/O 2018 - https://www.youtube.com/watch?v=7CUO7PyD5zA

×