Make Web Development Fun Again, with Web Components.

Presenter(s)

  • Bryan Ollendyke
  • Michael Potter

The year is 2010. AngularJS is released and people start flipping out that you can build amazing applications right in the browser! The only caveat, is that you have to ruin what it used to mean to be a web developer. Just learn tooling, dependency management, build flows, SASS, and all matter of abstraction to the point that you have no idea how to just write HTML tags and put them on the page in order to display!!!!! (deep cleansing breath)

Sound like you? Yeah, us too. Hi, we're developers from Penn State, and we're ready to make web development fun again! We want to introduce you to our new best friend: Web Components. Now it hasn't always been fun for Web Components; in fact the first 5 years were ROUGH since it was announced in 2011! In fact, many people thought it died a long time ago (No React, it is very alive thank you). Fast forward to 2018, Safari, Chrome, Opera, and Firefox (~85% of all browsing traffic) support Web components without a polyfill. As of Sep 2018, 99.64% of all web traffic globally can handle web components via client side rendering!

The remaining issue has been awareness, training, and tooling. That's where we all got an idea. Let's eliminate the tooling.. yeah. like all of it...

Introducing, the Web Component Factory, a CLI to...

  • build a mono-repo to manage your web component library
  • allow adding new elements consistently with a simple CLI
  • build Lit Element, Skate JS, SlimJS, Polymer and VanillaJS elements... by answering a CLI
  • automatically wire elements up to HAX to wire design assets up to editor experience
  • support Drupal 7, 8, Backdrop, static sites and more as build targets.. again.. via CLI

In other words, Web Component Factory is the fastest, easiest, most robust way to build web components and use them in Drupal (no matter how you Drupal!).

Outline of our talk

  • What/who/where/why/how of Web components and the business case for them

  • How Penn State is using Web components with code examples and production projects

  • Live demo going from 0 to Drupal boilerplate themes, utilizing different web component libraries

  • Illustration of the interoperability of every library because they #usetheplatform

Who Should Attend

  • Designers
  • Front-end Developers
  • Project Managers

Prerequisites

  • We'll look at and develop code live

  • Have an idea of what component based design is at a high level

  • An interest in learning the last library you'll ever need (web components)