Make web development fun again, with web components!

Recording: https://www.youtube.com/watch?v=Akn6keIYZ3k

Slides: http://bit.ly/dcon19-web-components

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 kinds of abstraction to the point that you can't even remember how to write HTML tags and put them on the page anymore!!!!! (deep cleansing breath)

 

Sound like you? Yeah, us too. Hi, we're developers from Red Hat and 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!

 

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 Red Hat is using web components with code examples and production projects

• 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

• Discussion of web components techniques from multiple perspectives

 

What you need to know ahead of time

• You should be comfortable looking at code

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

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

 

Audience take aways

• Web components are legit, use them; Red Hat and Penn State do in production
• WCFactory is something they can take and start using within minutes of install
• Web components make Drupal theming concerns (and back end complexity) easier