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.

1. Web Components
Fellyph Cintra
Solutions Engineer
Deloitte Digital
!1

2. @Fellyph
Deloitte digital
!2

3. !3

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. Web Components
!5

6. Web Components
• It is a set of four specs from Web API.
• Web components creates custom and reusable
elements natively
!6

7. Benefits?
!7

8. !8
Reusability Maintainability Encapsulation

9. But…
!9

10. 10

11. 11

12. Web components + frameworks
!12https://custom-elements-everywhere.com/

13. JavaScript frameworks support
!13
100% 100% 71%91%
https://custom-elements-everywhere.com/

14. Support
!14
end of 2018

15. Real World
!15
header Menu User
dropdown
card Sidebar card
card
Footer

16. Real World
!16
header Menu User
dropdown
card Sidebar card
card
Footer

17. Real World
!17
header Menu User
dropdown
card Sidebar card
card
Footer

18. Fantastic 4
!18
Custom
Elements
Shadow
DOM
ES modules
HTML
Templates
+

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. Autonomous element
!20

21. !21
Customised element

22. !22

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. ● 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. ● 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. Where can I start?
!26

27. Developer Guide
!27
https://open-wc.org/

28. open-wc
● Web component recommendations with pre-configured
○ automation
○ tooling
○ test
○ lint
○ demo
!28

29. npm init @open-wc
!29

30. Lit Element
!30

31. webcomponents.org
!31

32. Web fundamentals
!32https://developers.google.com/web/fundamentals/web-components/

33. Obrigado
Thank you
!33

34. We are hiring!
https://jobs2.deloitte.com/ie/en/job/DELOA003X524790/Consulting-
Deloitte-Digital-Full-Stack-Developer
!34