HTML5 Web App Hackathon

Ernest Delgado, Pete LePage, Boris Smus
Daniel Hermes, Mihai Ionescu, Nadim Ratani, Peng Ying

August 1-11, 2011 (NYC, CHI, KIR, MTV)

#HTML5Hack

Schedule

• 12:00-1:30 - Lunch & Presentation
• 1:30-2:00 - Pitches & Team organization
• 2:00-7:00 - Hacking
• 7:00-8:00 - Dinner & Finish hacking
• 8:00-9:00 - Presentations, Voting & Prizes

Agenda

• Thinking web apps
• Introducing DJBreakPoint
• HTML5 makes building apps fun
• Messaging / realtime
• File APIs
• Audio hotness
• Distribution using Chrome Web Store
• Monetization with In-App Payments

CSS3: transitions/transforms/drop shadow/border radius

• Techniques in the HTML4 era: DHTML transitions, Microsoft filters for transforms, repeated sprites for shadows, absolute image positioning for rounded corners.

   -moz-border-radius: 12px; /* FF1-3.6 */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
        border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome,
                                FF4, iOS 4, Android 2.1+ */

Web fonts

• Techniques in the HTML4 era: Font Image Replacement

@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot?#') format('eot'),  /* IE6–8 */
       url('myfont.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, 
                                              Saf5.1+*/
       url('myfont.ttf') format('truetype');  /* Saf3—5, Chrome4+, 
                                                 FF3.5, Opera 10+ */
}

classList/dataset

• Techniques in the HTML4 era: custom Javascript for class manipulation, long class names to store application status

var el = document.querySelector('#main').classList;
el.add('highlight');
el.remove('shadow');
el.toggle('highlight');

<div id="out" data-id="good" data-name="joe"></div>
document.querySelector('#out').dataset['name'] // joe

querySelectorAll(), querySelector()

• Techniques in the HTML4 era: Walking the DOM or using external libraries

var els = document.querySelectorAll("ul li:nth-child(odd)");
var tds = document.querySelectorAll("table.test > tr > td");
var el = document.querySelector("table.test > tr > td");
var els = document.getElementsByClassName('section');

Page Layout with Flex Box

• Techniques in the HTML4 era: negative margins, clearfix, tables!, hasLayout (zoom:1), Block Formatting Context

.box {
  display: -webkit-box;
  -webkit-box-orient:  
      horizontal 
      vertical 
    ;
}
.box .one, .box .two {
  -webkit-box-flex: 1;
}
.box .three {
  -webkit-box-flex: 3;
}

HTML5 Drag and Drop

• Techniques in the HTML4 era: Emulate drag events (cross browser!)

addEvent(drop, 'dragover', cancel);
addEvent(drop, 'dragenter', cancel);
addEvent(drop, 'drop', function (event) {
  // stops the browser from redirecting off to the text.
  if (event.preventDefault) {
    event.preventDefault();
  }
  this.innerHTML += '<p>' + event.dataTransfer.getData('Text') + '</p>';
  return false;
});

Speech Input

function startSearch(event) {
  if (event.target.results.length > 1) {
    var second = event.target.results[1].utterance;
    document.getElementById("second_best").value = second;
  }
  event.target.form.submit();
}

In DJBreakpoint - Better Coded UI

Drag and Drop + Speech Input + Rounded Corners + CSS Gradients + CSS Tranforms + CSS Transitions + etc

Messaging and Real Time Communication

Web Sockets

• Full-duplex, bi-directional communication over the web
• Low overhead (no HTTP headers)

var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
socket.onmessage = function(event) { console.log(event.data); };

In DJBreakpoint - Socket.IO

• We use Socket.IO to wrap around websockets.
• Client: connect to server and send msg

var socket = io.connect('http://localhost');
socket.emit('message', {data: 'hello'})
socket.on('update', function(data) {
  console.log(data);
});

• Server: track clients and relay msgs

var io = require('socket.io').listen(80);
io.sockets.on('message', function(socket) {
  socket.emit('update', {messages: messageBuffer});
});

Cross page messaging with postMessage

• Safely enabling cross-origin communication
• Sending a message

otherWindow.postMessage(message, targetOrigin);

• Receiving a message

window.addEventListener("message", function(event) {
  if (event.origin != "http://myurl.com/foo") { /* do stuff */ }
}, false);

In DJBreakpoint - postMessage

• Chat implemented in a separate frame
• Chat frame sends message to parent:

socket_.on('chat', function(data) {
  window.parent.postMessage(data, document.location.origin);
}

• Main frame listens for the event and renders bubble:

window.addEventListener('message', function(e) {
  document.querySelector('#dudes').append(createBubble(e.data));
});

Importing tunes

<input type="file" accept="audio/*" multiple>

document.querySelector('input[type="file"]').onchange = function(e) {
  var files = e.target.files; // FileList

  for (var i = 0, f; f = files[i]; ++i) {
    // f.name
    // f.type // mimetype
    // f.size // bytes
    // f.lastModifiedDate.toLocaleDateString()
  }
};

Importing a directory of tunes

<input type="file" webkitdirectory />

• Files in the FileList will have a webkitRelativePath property

Reading file content

Asynchronously read binary data into memory:

var reader = new FileReader();

reader.readAsBinaryString(File|Blob);

reader.readAsText(File|Blob, opt_encoding); // default UTF-8

reader.readAsDataURL(Blob|File);

reader.readAsArrayBuffer(Blob|File);

Reading byte ranges:

var blob = file.webkitSlice(startingByte, offset, opt_contentType);
reader.readAsBinaryString(blob);

Importing tunes using drag & drop

var reader = new FileReader();
reader.onload = function(e) {
  document.querySelector('img').src = e.target.result;
};

function onDrop(e) {
  reader.readAsDataURL(e.dataTransfer.files[0]);
};

Sending form data

function submitForm() {
  var fd = new FormData(); // or prefill: FormData(window.myform)
  fd.append("username", "Groucho");
  fd.append("accountnum", 123456);

  // Append File. Creates a multipart/form-data upload.
  var file = document.querySelector('#afile').files[0];
  if (file) {
    fd.append('afile', file);
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function(e) { ... };
  xhr.send(fd);
}

Uploading a file

function upload(blob, opt_callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  if (opt_callback) {
    xhr.onload = opt_callback;
  }
  xhr.send(blob);
}

window.BlobBuilder = window.BlobBuilder ||
    window.WebKitBlobBuilder || window.MozBlobBuilder;

var bb = new BlobBuilder(); // Create a .txt file on the fly.
bb.append('Hello World');

uploadFile(bb.getBlob('text/plain'), function(e) {
  console.log('upload complete');
});

Downloading a file

function download(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);

  xhr.responseType = 'arraybuffer'; // A raw buffer of bytes.

  xhr.onload = function(e) {
    callback(this, this.response); // Note: not xhr.responseText
  };
  xhr.send();
}

download('song.mp3', function(xhr, arrayBuffer) {
  // Create a file.
  var bb = new BlobBuilder();
  bb.append(arrayBuffer);
  var blob = bb.getBlob('audio/mpeg');
});

Audio hotness

Web Audio API

• Audio tag brings flashless audio and limitations
• Single channel, no access to raw stream
• WebAudio: powerful API to process and synthesize sound in web apps

context = new webkitAudioContext();
source = context.createBufferSource();
analyser = context.createAnalyser();
source.connect(analyser);
analyser.connect(context.destination);

In DJBreakpoint - playing tunes

• Loading mp3 via XHR2

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";

xhr.addEventListener('load', function() {
  var buffer = context.createBuffer(xhr.response, false);
});
xhr.send();

• Getting raw data out:

analyser.getByteFrequencyData(freqs);

Interlude: Visualization with HTML5 Canvas

• Canvas a simple 2D immediate mode drawing library
• Painters model

  var canvas = document.getElementById('a');
  var context = canvas.getContext('2d');
  context.fillRect(50, 25, 150, 100);

Use requestAnimationFrame for render callbacks:

window.requestAnimationFrame = window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame || window.msRequestAnimationFrame;

window.requestAnimationFrame(animate, opt_elem /* bounding elem */);

In DJBreakpoint - visualization

• Using ByteFrequencyData from WebAudio API
• Plotting frequency graph of the music that's playing

for (var i = 0; i < NUM_BINS + 1; ++i) {
  var value = freqs[i * width];
  var percent = value / 256;
  var height = NUM_BINS * percent;
  drawContext.fillStyle = 'hsl(' + computedColor + ', 100%, 50%)';
  drawContext.fillRect(...);
}

In DJBreakpoint - beat detection

• Feeding signal into an external library to get beat
• Using CSS3 animations to animate avatars

this.dancingImages[i].style.webkitTransform =
  'scale(' + scaleX + ',' + scaleY + ') skewX(' + skewAngle + 'rad)';

Let's do it - Building the manifest

{ "app": {
    "launch": {
      "urls": ["https://chrome.google.com/webstore"],
      "web_url": "https://chrome.google.com/webstore",
      "container": "tab"
    }
  },
  "permissions": [],
  "icons": {
    "16": "16.png",
    "128": "128.png"
  },
  "name": "Chrome Web Store - Apps, Extensions and Themes",
  "description": "Discover great apps, games, extensions and...
     themes for Google Chrome.",
  "version": "1.0."
}

Let's do it - Creating the images

Let's do it - Uploading to the Chrome Web Store

1. Zip the manifest and two icon files together
2. Upload the zip file to the Chrome Web Store via the Developer Dashboard

Let's do it - Edit & Publish

1. Upload additional resources like screen shots & promotional images
2. Pick a category and provide a detailed description
3. Choose a price or use a freemium model
4. Verify your website, and provide analytics token
5. Publish!

What's up with Freemium

Transaction growth at Google

Introducing In-App Payments

In-App Payments - The big picture

Users - click, pay, use

Developers - Monetize in two calls

API flow - Full picture

Lets integrate - Create account

Sign up as a seller Get your Seller Id Get your Seller Key Configure your postback URL

Lets integrate - Create JSON web token

Python:

cakeJwt = jwt.encode(item, "1ZRJNFIOSJSIDFJNVHF");

Ruby:

@cakeJwt = JWT.encode(item, "1ZRJNFIOSJSIDFJNVHF")

Lets integrate - Include JavaScript library

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script>
  google.load('payments', '1.0', {
  'packages': ['sandbox_config']
  });
</script>

Lets integrate - Define JavaScript purchase handler

function purchase() {
  ...
  goog.payments.inapp.buy({
    'jwt'     : cakeJwt,
    'success' : successHandler,
    'failure' : failureHandler
  });
}

<button onclick="purchase()">Buy</button>

Lets integrate - Define postback handler

Python:

def post(self):
encoded_jwt = self.request.get('jwt', None)
if encoded_jwt is not None:
  decoded_jwt = jwt.decode(str(encoded_jwt), SELLER_SECRET)
  order_id = decoded_jwt['response']['orderId']
  self.response.out.write(order_id)
    

Lets integrate - Tying information together

• Use the sellerData parameter to hold user identification data
• Encrypt sellerData to protect user info
• Example: Identifying users -
  sellerData = encrypt('user_id: 12345')
• Example: Identifying context -
  sellerData = encrypt('sale: "happy hour"')

In DJBreakpoint - IAP

context.buy = function (item){
xhr.open('POST', window.location.href + 'buy', true);
xhr.onreadystatechange = function(jwt){
  if(xhr.readyState == 4){
    if(xhr.status == 200){
      goog.payments.inapp.buy({
        'jwt' : xhr.responseText,
        'success' : successHandler,
        'failure' : failureHandler
      });
    }
    else{
      console.log("error" + xhr.status)
    }
  }
}
    

chromestatus.com

Resources

• Chrome's DevTools - invaluable
• html5rocks.com - learn by tutorial
• google.com/payments - Payments signup & documentation
• chrome.google.com/webstore - Chrome Web Store
• HTML5 Boilerplate and Modernizr - foundation
• caniuse.com - compatibility tables
• Google Chrome Frame - plugin. Brings Chrome to IE6-9
• Twitter: @ChromiumDev @GoogCommerceDev