The year is 2020. “I just broke the app!!! :(” flashes across your smartwatch, and you nearly crash your hoverboard into a self-driving car. The marketing director has copied some 3D video carousel HTML code from a different app, minus some important JS and CSS. “These creative people are going to be the death of me!” But in a moment your despair turns to resolve, as the solution becomes obvious… build them a <video-carousel> Web Component.
2020 looks a lot like 1995, when the marketing director could add a scrolling text <marquee> without a single line of JS or CSS**.
“Web Components” are a set of emerging, cutting-edge standards that:
- Encapsulate all of the HTML, CSS, and JS for a UI/UX widget
- Allow reliable reuse of your <awesome-widget> element
- Prevent the <awesome-widget> from interfering with the rest of a page
- Are being quickly implemented by major browser vendors
You don’t have to wait until 2020 for a utopia of designer-developer happiness. We’ll build a Web Component together!
** With great power comes great responsibility.
What You'll Learn:
- Why you should care about Web Components
- Important caveats
- Designers and developers, living in harmony (mass hysteria!)
- 4 layers of the cake: Templates, Custom Elements, Shadow DOM, and Imports
- What the… a Shadow DOM?
- Real world examples of Web Components
- Live-coding a Web Component with Polymer
- Numerous references to the “Back to the Future” film trilogy