Back to the future with web components

JONATHON CREENAUNE • DEV MANAGER • ATLASSIAN • @JCREENAUNE

<aui-header>

An example

var d = document;d.addEventListener(‘meme-generate-start’, startSpinning);d.addEventListener(‘meme-generate-end’, endSpinning);d.addEventListener(‘meme-generate-error’, endSpinning);

Why?

ADG AUI

<div class="aui-message aui-message-info“> <p class="title"> <strong>Backup stale</strong> </p> <p>This instance was last backed up on Thursday, 18 September 2011.</p> </div>

<div class=“aui-message aui-message-info”> <p class="title"> <strong>Backup stale</strong> </p> <p>This instance was last backed up on Thursday, 18 September 2011.</p> </div>

<header class="aui-page-header"> <div class="aui-page-header-inner"> <div class="aui-page-header-image"> <span class="aui-avatar aui-avatar-large aui-avatar-project"> <span class="aui-avatar-inner"> <img alt=“Angry nerds" src=“images/angry-nerds-64.png”> </span> </span> </div> <div class="aui-page-header-main"> <h1>Angry nerds</h1> </div> </div> </header>

<header class="aui-page-header"> <div class="aui-page-header-inner"> <div class="aui-page-header-image"> <span class="aui-avatar aui-avatar-large aui-avatar-project"> <span class="aui-avatar-inner"> <img alt="Angry nerds" src="images/angry-nerds-64.png"> </span> </span> </div> <div class="aui-page-header-main"> <h1>Angry nerds</h1> </div> </div> </header>

<div class="aui-tabs horizontal-tabs"> <ul class="tabs-menu"> <li class="menu-item active-tab"> <a href="#tabs-example-first"> <strong>Tab 1</strong> </a> </li> <li class="menu-item"> <a href="#tabs-example-second"> <strong>Tab 2</strong> </a> </li> </ul> <div class="tabs-pane active-pane" id="tabs-example-first"> <h2>This is Tab 1</h2> <p>First tab content</p> </div> <div class="tabs-pane" id="tabs-example-second">

<div class="aui-message aui-message-info“> <p class="title"> <strong>Backup stale</strong> </p> <p>This instance was last backed up on Thursday, 18 September 2011.</p> </div>

Once the product's task is known, design the interface first; then implement to the interface design.J E F R A S K I N

”“

<aui-message type=“info” title=“Backup stale”> <p>This instance was last backed up on Thursday, 18 September 2011.</p> </aui-message>

<aui-page-header title=“Angry nerds”> <aui-avatar src=“images/angry-nerds-64.png” type=“project” /> </aui-page-header>

Interface driven

Web standards

Backwards compatible

Holdup …

Interface driven

Web standards

Backwards compatible

Interface driven

Web standards

Backwards compatible

OK …

What sucks about it?

polyfilling

skate.js

9+

performance

we’re answering questions

<aui-select id=“my-product-picker”> <aui-option>Hipchat</aui-option> <aui-option>JIRA</aui-option> <aui-option>Confluence</aui-option> <aui-option>Stash</aui-option> </aui-select>

<label for=“?????”>Product</label> <aui-select id=“my-product-picker”> … </aui-select>

Product:

<aui-label for=“my-product-picker”>Product</label> <aui-select id=“my-product-picker”> … </aui-select>

Product:

Web components:

They’re ready to use

They solve a bunch of problems

You will end up using them

Thank you!

JONATHON CREENAUNE • DEV MANAGER • ATLASSIAN • @JCREENAUNE

Back to the future with web components

Submit your feedback: go.atlassian.com/acfuture