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)

https://www.drupalcampnj.org/sessions/make-web-development-fun-again-web-components

Drupal is a registered trademark of Dries Buytaert.