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.

1. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Is 2019 the year of Web
Components?
Fellyph Cintra
Solutions Engineer
Deloitte Digital
1

2. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
@Fellyph
2

3. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Web Components
3

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. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Fantastic 4
5
Custom
Elements
Shadow
DOM
ES modules
HTML
Templates

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. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Autonomous element
7
<ph-button></ph-button>

8. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Customised element
8
<button is=“ph-custom-button“>Click Me :)</button>

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. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Shadow DOM Example
10

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. 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. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Is 2019 the year of Web
Components?
13

14. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 14

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. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Support
16
end of
2018

17. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 17

18. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 18
Is 2019 the year of Web Components?

19. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 19

20. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 20

21. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Web components + frameworks
21https://custom-elements-everywhere.com/

22. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
JavaScript frameworks support
22
100% 100% 71%91%
https://custom-elements-everywhere.com/

23. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin 23

24. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Where can I start?
24

25. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Developer Guide
25https://open-wc.org/

26. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
open-wc
● Web component recommendations with pre-configured
● automation
● tooling
● test
● lint
● demo
26

27. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
npm init @open-wc
27

28. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Lit Element
28

29. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
webcomponents.org
29

30. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Web fundamentals
30https://developers.google.com/web/fundamentals/web-components/

31. Share your moments! #io19extended | @gdgdublin | @gdgclouddublin
Obrigado
Thank you
31

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