O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Dublin js 2019 Fellyph Ctintra - Why use web components?

94 visualizações

Publicada em

Web components have been around since the first spec was written in 2011, but they only started getting full support from the main browsers in 2018. And this year I decided to give a chance to web components and after my first project with web components what I've learned from that? In this talk, I'll discuss the four key specs that make the magic of web components happen and explain how they can help improve our workflow.
After showcasing the advantages of using web components, I will explain how to use web components in an environment with different applications and highlight the tools and developer guides.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Dublin js 2019 Fellyph Ctintra - Why use web components?

  1. 1. Web Components Fellyph Cintra Solutions Engineer Deloitte Digital !1
  2. 2. @Fellyph Deloitte digital !2
  3. 3. !3
  4. 4. !4 Call for Speakers: https://2019.dublin.wordcamp.org/call-for-speakers/ Call for volunteers: https://2019.dublin.wordcamp.org/call-for-volunteers/
  5. 5. Web Components !5
  6. 6. Web Components • It is a set of four specs from Web API. • Web components creates custom and reusable elements natively !6
  7. 7. Benefits? !7
  8. 8. !8 Reusability Maintainability Encapsulation
  9. 9. But… !9
  10. 10. 10
  11. 11. 11
  12. 12. Web components + frameworks !12https://custom-elements-everywhere.com/
  13. 13. JavaScript frameworks support !13 100% 100% 71%91% https://custom-elements-everywhere.com/
  14. 14. Support !14 end of 2018
  15. 15. Real World !15 header Menu User dropdown card Sidebar card card Footer
  16. 16. Real World !16 header Menu User dropdown card Sidebar card card Footer
  17. 17. Real World !17 header Menu User dropdown card Sidebar card card Footer
  18. 18. Fantastic 4 !18 Custom Elements Shadow DOM ES modules HTML Templates +
  19. 19. ● 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 !19 Custom Elements
  20. 20. Autonomous element !20
  21. 21. !21 Customised element
  22. 22. !22
  23. 23. ● 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 !23 Shadow DOM
  24. 24. ● Permits to create reusable HTML template without rendering them. ● Images won't load until we attach the template on the DOM. 24 HTML Templates
  25. 25. ● 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. 25 ES modules
  26. 26. Where can I start? !26
  27. 27. Developer Guide !27 https://open-wc.org/
  28. 28. open-wc ● Web component recommendations with pre-configured ○ automation ○ tooling ○ test ○ lint ○ demo !28
  29. 29. npm init @open-wc !29
  30. 30. Lit Element !30
  31. 31. webcomponents.org !31
  32. 32. Web fundamentals !32https://developers.google.com/web/fundamentals/web-components/
  33. 33. Obrigado Thank you !33
  34. 34. We are hiring! https://jobs2.deloitte.com/ie/en/job/DELOA003X524790/Consulting- Deloitte-Digital-Full-Stack-Developer !34

×