Conffab by Web Directions
  • Speakers
  • Presentations
  • Conferences
  • Live streams
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Live streams
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In

Search Conffab

Search presentations, speakers, transcripts, slides and topics.

Searching Conffab

Back to the Future with Web Components

Jonathon Creenaune at Code 2015
Sign up for Conffab Free to watch this and hundreds of other videos for free
  • Details
  • References
  • Keypoints

Almost every web developer has heard of web components; some have played with them; and a handful are deploying them to production. This talk aims to teach you about using web components: why they’re important, what’s different about using web components compared to other MVC-style solutions, and what rough patches we’ve hit landing web components to millions of users.

Slides

Works at Atlassian on their style guide and the UI library that implements it (AUI).

His message: you can start using web components today!

Demo: JC’s meme generator web component. “Y U NO PUT STRUCTURE IN DOM!” (bitbucket:jcreenaune/meme-or-die)

It’s all DOM. The structure, events and methods are all DOM.

So why would you do this stuff?

The raw markup of a library has a lot of boilerplate and code you can’t change. It’s nice to abstract that away so people just supply the information you actually need to supply to make things work; and to make the API clear.

[Aside: essentially web components are a universal templating option. Otherwise you need to build out a set for every stack that needs it.]

Web components spec is pretty huge – currently they’re just using Custom Elements.

Atlassian created skate.js (IE9+). They’re not providing an API to style the component, because that’s directly opposed to having a style guide.

So… what sucks about this stuff?

  • Client-side performance – a lot of Atlassian’s products have very big DOM views (think Bitbucket diff pages). They had to do heaps of optimisation.
  • Server-side rendering – still an unanswered question, SEO could be a problem
  • Trying to link the original API to the exploded component, eg. For ARIA attributes which need to use common IDs to link elements together.

Web components = separation of interface and implementation of HTML.

You may also be interested in

Thumbnail for Pop-up Accessibility

Pop-up Accessibility

Rhiana Heath

Code 2015

Thumbnail for What Comes Next for the Web Platform?

What Comes Next for the Web Platform?

Alex Russell

Code 2015

Thumbnail for Console Dot

Console Dot

Warwick Cox

Code 2015

Thumbnail for Crossing The Streams

Crossing The Streams

Simon Knox

Code 2015

Thumbnail for Dawn of the Progressive Single Page App

Dawn of the Progressive Single Page App

Mark Dalgleish

Code 2015

Thumbnail for Eliminate JavaScript Code Smells

Eliminate JavaScript Code Smells

Elijah Manor

Code 2015

Thumbnail for ES6 Symbols, What They Are and How to Use Them

ES6 Symbols, What They Are and How to Use Them

Clark Pan

Code 2015

Thumbnail for What Does HTTP/2 Mean for Front End Engineers?

What Does HTTP/2 Mean for Front End Engineers?

Mark Nottingham

Code 2015

More presentations from Code 2015

Thumbnail for The State of the Animation

The State of the Animation

Rachel Nabors

Code 2015

Thumbnail for What Comes Next for the Web Platform?

What Comes Next for the Web Platform?

Alex Russell

Code 2015

Thumbnail for Async and Await

Async and Await

James Hunter

Code 2015

Thumbnail for Async Frontiers in JavaScript

Async Frontiers in JavaScript

Domenic Denicola

Code 2015

Thumbnail for Classing up ES6

Classing up ES6

Andy Sharman

Code 2015

Thumbnail for Canvas Cold War

Canvas Cold War

Simon Swain

Code 2015

Thumbnail for Current Best Practice in Front End Ops

Current Best Practice in Front End Ops

Alex Sexton

Code 2015

Thumbnail for Stop the Fanaticism – Using the Right Tools for the Job

Stop the Fanaticism – Using the Right Tools for the Job

Kassandra Perch

Code 2015

© 2026

  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up