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

Rate This Session

Presented By

Steve Johnson