Web Components: 10 Things to Know

Web Components are an exciting, standards-based way to build web apps. However, not everyone knows much about them! We’ll discuss 10 things to know about Web Components including the main technologies involved in the standards and how LitElement and open-wc can help when building Web Components.

Transcript

1. WEB COMPONENTS: 10 THINGS TO KNOW
2. ABOUT ME @DevWithTheHair
3. JAIME LOPEZ JR @DEVWITHTHEHAIR HTTPS://GITHUB.COM/ DEVWITHTHEHAIR
4. MORE THAN JUST CODE HTTP://MTJC.FM @DevWithTheHair
5. 1) WHAT ARE WEB COMPONENTS? @DevWithTheHair
6. UMBRELLA TERM ☂ @DevWithTheHair
7. CUSTOM ELEMENTS SHADOW DOM HTML TEMPLATES @DevWithTheHair
8. 2) READY FOR PRODUCTION? @DevWithTheHair
9. SPACEX DRAGON !"# @DevWithTheHair
10. 3) BROWSER SUPPORT? @DevWithTheHair
11. CHROME OPERA SAFARI FIREFOX EDGE (CHROMIUM-BASED) @DevWithTheHair
12. (ALSO IE 11...WITH A POLYFILL) HTTPS://WWW.WEBCOMPONENTS.ORG/POLYFILLS @DevWithTheHair
13. 4) LOT OF CODE? @DevWithTheHair
14. YES...HOWEVER @DevWithTheHair
15. YES: STANDARDS DEFINE LOW- LEVEL PROTOCOLS @DevWithTheHair
16. YES: WE HAVE INTEROPERABILITY AND FLEXIBILITY @DevWithTheHair
17. HOWEVER: PAIN IS MOSTLY FELT BY LIBRARY AUTHORS @DevWithTheHair
18. HOWEVER: MANY OPTIONS TO HELP MAKE WRITING EASIER @DevWithTheHair
19. 5) LITELEMENT @DevWithTheHair
20. LIT-HTML LITELEMENT HTTPS://LIT-ELEMENT.POLYMER-PROJECT.ORG/ @DevWithTheHair
21. 6) FAST @DevWithTheHair
22. @MICROSOFT/FAST-ELEMENT @MICROSOFT/FAST-FOUNDATION @MICROSOFT/FAST-COMPONENTS @FLUENTUI/WEB-COMPONENTS HTTPS://WWW.FAST.DESIGN/ @DevWithTheHair
23. 7) HOW MANY DIFFERENT WAYS TO BUILD? @DevWithTheHair
24. AT LEAST 33 (AND PROBABLY MORE) HTTPS://WEBCOMPONENTS.DEV/BLOG/ALL-THE-WAYS-TO-MAKE-A-WEB-COMPONENT/ @DevWithTheHair
25. 8) ...BUT REACT? @DevWithTheHair
26. YES! (BUT MOSTLY FOR STRUCTURE) BE CAREFUL OF EVENT PROPAGATION HTTPS://REACTJS.ORG/DOCS/WEB-COMPONENTS.HTML @DevWithTheHair
27. 9) OPEN-WC @DevWithTheHair
28. DEVELOPING LINTING TESTING BUILDING DEMOING DEPLOYING AUTOMATING HTTPS://OPEN-WC.ORG/ @DevWithTheHair
29. 10) EASIER WAY TO GET STARTED? @DevWithTheHair
30. BROWSER-BASED IDE HTTPS://WEBCOMPONENTS.DEV/ @DevWithTheHair
31. JAIME LOPEZ JR @DEVWITHTHEHAIR HTTPS://GITHUB.COM/ DEVWITHTHEHAIR
32. MORE THAN JUST CODE HTTP://MTJC.FM @DevWithTheHair
33. THANK YOU! @DevWithTheHair