![Web
Components
Workshop
APEREO 2019
Bryan Ollendyke
[at]btopro
BTO108@psu.edu](https://image.slidesharecdn.com/webcomponentsworkshop-190604052937/85/Open-Apereo-Web-components-workshop-1-320.jpg)
![[[date]] – <beginning-of-web-platforms date=“1996”>](https://image.slidesharecdn.com/webcomponentsworkshop-190604052937/85/Open-Apereo-Web-components-workshop-4-320.jpg)
![2014 - <html5-ratified length=“6”>
HTML
[[length]] YEARS!!!!!!!!!!](https://image.slidesharecdn.com/webcomponentsworkshop-190604052937/85/Open-Apereo-Web-components-workshop-13-320.jpg)
Open Apereo - Web components workshop
- 2. Agenda 1. Why & What are Web components 2. Tutorial – LitElement 3. HTMLElement vs LitElement vs PolymerElement vs ??? 4. WCFactory 1. Installing & making your first element 2. Using other’s elements 3. Communicating between elements 4. ShadowDOM
- 4. [[date]] – <beginning-of-web-platforms date=“1996”>
- 5. 1997 - 2006 – Nothing good happens IE 4 IE 5 IE 6 IE 7
- 6. 2007 – <video> tag manifesto
- 7. 2008 – HTML5 Draft proposed
- 8. 2009 – Original #usetheplatform
- 9. 2010 – Google sees framework as platform
- 10. 2011 – 1st presentation about web components
- 11. 2013 – Facebook sees framework as platform
- 12. 2013 – Google starts a library called polymer 0.x
- 13. 2014 - <html5-ratified length=“6”> HTML [[length]] YEARS!!!!!!!!!!
- 14. 2015 –Polymer goes 1.0 #usetheplatform!
- 15. 2016 –Polymer goes 2.0 #usetheplatform!!!
- 16. Feb 2017 – we start saying #usetheplatform
- 17. May 2018 –Polymer goes 3.0 w/ js modules #usetheplatform!!!
- 18. Jan 2019 – ELMS:LN team publishes 168 repos
- 19. Today – we have over 440 web components
- 20. Web component 4 part meta-specification
- 23. Palm / HP Lost the battle, but was right http://www.techgadgets.in/images/palm-pre-webos-phone.jpg
- 24. How can we share “the platform”?
- 26. Npmjs.com
- 27. What web components solve
- 28. My interface designer makes a simple “button” for us to use
- 29. My interface designer makes a simple “button” for us to use My team has to integrate my designer’s “button” X number of buttons X number of projects
- 30. My interface designer makes a simple “button” for us to use My team has to integrate my designer’s “button” X number of buttons X number of projects ...My “team” will screw this up
- 31. Shadow DOM keeps CSS scoped Custom elements makes HTML semantic Both make JS scoping simple WC keeps design intentional WC makes design sustainable WC make web professionals happy!
- 32. Accessibility becomes manageable Maintenance costs collapses Cost of development collapses Project churn is eliminated All Future projects cost less Each new project expands capabilities WC make web managers happy!
- 34. W3C standard (that makes everybody but React happy)
- 35. Barriers to Adoption ● Lots of libraries (all compatible) ○ Polymer, LitElement, Patternfly Elements, SkateJS, Svelte, SlimJS ● JS Knowledge ○ Less training wheels than typical libraries ● Tooling Tree ○ lerna - gulp - npm - yarn - git - rollup - polymer cli - webpack – node ● Integration knowledge ○ webcomponents-loader.js - compiling for prod / local dev headaches ● Documentation!?!
- 39. Installing Tooling $ yarn global add @wcfactory/cli $ yarn global add polymer-cli $ yarn global add lerna
- 40. Upcoming talks! Lot’s of web components talks throughout the event 1 almost every time slot of the event! Look for HAXTheWeb & HAXcms at the Lightning talks!
Editor's Notes
- #35: Icon created by Creative Stall from the Noun Project
- #36: Web Components villain is multi layered Libraries Users confused why there are so many libraries. What does “flavor” of web component mean Is Polymer really that different from SkateJS How can a Svelte component talk to a LitElement? JS Knowledge JS has evolved ES6 features Class based DOM is scary Javascript Events Tooling I don’t care about tooling I just want it to work! Introduction to monorepos Compiling for different browser versions Integration Figuring out correct Pollyfills per browser Documentation Give me one website that has all of this written down Leaves you feeling like...
- #37: Our goal is not to hook you on a toolchain It’s to help you over the initial barriers