«listenable» – UX – ux workflows

View Github Repository Open presentation in a new window

realistschuckle

See all presentation from realistschuckle

«listenable» – UX – ux workflows

0 0

agile-ui-web-components

Presentation for Agile.Next Houston 2015

On Github realistschuckle / agile-ui-web-components

«listenable»

This is an audio-enabled presentation.

Make sure you have your volume up, your headphones on, and click that highlighted arrow in the lower-right corner after the audio has loaded.

autoplay the presentation

AD ot UE w WC

Agile Developmentof the User Experiencewith Web Components

You can pirate this

For more information about how you can digitally copy this and how it won't probably hurt my economy, please visit

Creative Commons Attribution-NonCommercial 4.0 International License

curtis@schlak.com

@realistschuckle

UX

ambience: look and sound

mechanics: application interaction

throughput: information presentation

ux workflows

traditional media

two teams / two goals

pure wireframing

from basic to beautiful

UX first

pretty. then, functional.

bootstrap'd

stick with bootstrap

or zurb

or pure

ಠ_ಠ

web components!

custom elements

register your custom element 
var prototype = Object.create(HTMLDivElement.prototype, {
  uri: { value: undefined },
  data: { value: undefined },
  attachedCallback: function () {
    this.uri = this.getAttribute('uri');
    // Do some AJAXy stuff here...
    this.data = content;
    // Fire a data-received event
  }
});
document.registerElement('declarative-ajax', HTMLDivElement.prototype);
and then use it in HTML 
<body>
  <declarative-ajax uri="http://example.com/api"></declarative-ajax>
</body>

templates

include it in your HTML 
<template id="example-template">
  <img src="http://example.com/dummy.png">
  <div>Bacon ipsum dolor amet brisket boudin</div>
  <script>alert('HELLO!');</script>
</template>
access and use it in your script 
function appendTemplate(imgSrc, content) {
  // Get the template and set the image's source
  var t = document.querySelector("template");
  t.querySelector('img').src = imgSrc;
  t.querySelector('div').innerHTML = content;

  // Clone the content and put it in the DOM
  var clone = document.importNode(t.content, true);
  document.querySelector("#template-example").appendNode(clone);
}

HTML imports

import html using a link tag 
<link id="my-tag-link" rel="import" href="/components/my-tag.html">
get the content from the link's import attribute 
var link = document.getElementById('my-tag-link');
var content = link.import;
var clone = content.cloneNode(true);
document.body.appendChild(clone);

Shadow DOM

In a document like this... 
<div id="hostElement"></div>
<p>This is in the normal DOM</p>
...create a shadow root and add DOM to it... 
var shadow = document.querySelector("#hostElement").createShadowRoot();
shadow.innerHTML = '<p id="my-paragraph">Here is some new text</p>' +
                   '<style>p { color: red };</style>';
...I can't get to the <p> tag in the shadow DOM... 
document.getElementById('my-paragraph'); // Returns undefined
...and the style only applies in the shadow DOM. 
Here is some new text


This is in the normal DOM

            

          
compatibility

            Technology
                  IE
                  Chrome
                  FF
                custom elements
                  maybe
                  yep
                  off
                <template>
                  in dev
                  yep
                  yep
                HTML Imports
                  maybe
                  yep
                  never
                Shadow DOM
                  maybe
                  yep
                  off
                
we can think a new way

          
a UX workflow with Web Components

          
interaction-oriented development

          
common tactics

            
  • build library of interaction metaphors
    • 
              
  • work one iteration ahead
    • 
              
  • identify cross-cutting components
    • 
              
  • identify one-off components
    • 
              
  • schedule screen/page and component creation separately
    • 
            
thorns

            
  • constant backlog prioritization change
    • 
              
  • old browser support
    • 
              
  • not building an app
    • 
              
  • page-centric definition of done
    • 
            
practical

          
using raw tools suxorz

          
polymer to the rescue

            

              



                

            

          
Polymer's catalog

            
elements.polymer-project.org

          
Community catalog

            
customelements.io

          
Build a Web Component

          
the world's dumbest button

            

              Push me

            
<dumb-button>Push me</dumb-button>

          
import polymer

            
<link rel="import" href="../polymer/polymer.html">

          
declare the dom-module

            
<dom-module id="dumb-button">
</dom-module>

          
put in the style

            
<style>
  :host {
    display: inline-block;
  }

  button {
    font-size: 24px;
    padding: 0.2em 0.4em;
    border: 0;
    background-color: white;
  }

  button:active {
    background-color: green;
  }
</style>

          
put in the template

            
<template>
  <button id="clickable"><content></content></button>
  <audio id="sound" src="./button-sound.wav"></audio>
</template>

          
put in the behavior

            
<script>
  Polymer({
    is: "dumb-button",

    ready: function () {
      var self = this;
      this.$.clickable.addEventListener('click', function () {
        self.$.sound.play();
      });
    }
  });
</script>

          
and you get the dumbest button. ever.

            

              Push me

            

              Push me
            

          
And, that's what I've got so far

          
contact info

            

              curtis@schlak.com
            

            

              @realistschuckle
            

          
conversation?

          

    





























































































































          «listenable»
          This is an audio-enabled presentation.
          
            Make sure you have your volume up, your headphones on, and click
            that highlighted arrow in the lower-right corner after the audio
            has loaded.
          
          
             autoplay the presentation