This presentation is an HTML5 website

Press -> key to advance.

Zoom in/out: Ctrl or Command + +/-

Having issues seeing the presentation? Read the disclaimer

What is an App?

A Tour

Paul Kinlan (@Paul_Kinlan)

http://bit.ly/9k8ziK

A not so accurate History
So, what is an App?
  • Tight Focus
  • Big Screen
  • Rich Experiences
  • Beauty
  • Speed
Web vs Native

Web

  • Ease of Development
  • Universal Coverage
  • Deploy Once

Native

  • Advanced Device Support
  • Deep Integration
  • Discoverability
Why now?
  • Device Support
    • Some devices can only run web apps
  • Browser Support
Tight focus

A web app should do one thing, and one thing well.


Big Screen

"UI utilizes the entire browser window, with no extraneous or unrelated content."

Rich Experience

A Native feel?

  • Touch
  • Server Push Events
  • Notifications
  • Animations
  • Hardware Acceleration
  • Drag and Drop
  • File System API
  • Persitence
Rich Experience

Touch

This presentation supports touch

  • primary interface for many devices
    • iPad
    • iPhone
    • Android
    • Palm
Rich Experience

Server Push Events - WebSockets

Data to your users as it happens

Demo using http://pusherapp.com/

Note: Use this button if you also want to reset the permissions


Rich Experience

Animations + Hardware Acceleration

Rich Experience

DnD + File APIs

DROP ZONE
dropZone.addEventListener("drop", function(e) {
  e.preventDefault();

  var files = event.dataTransfer.files;
  for(var i = 0, file; file = files[i]; i++) {
    var reader = new FileReader();

    reader.onload = function(evt) {
      var imgs = document.getElementById("images");
      var img = document.createElement("img");
      img.src = evt.target.result;
      imgs.appendChild(img);
    };

  reader.readAsDataURL(file);
}
Rich Experience

Auto-magical Persistence

Beauty

"Wow! HubbaHubba!"

  • CSS3
    • Fonts
    • Gradients
    • Animations
  • Canvas
  • SVG
Beauty

CSS3

Beautiful Typeography
@-webkit-keyframes pulse {
  0%   { -webkit-transform: scale(1) rotate(5deg); }
  50%  { -webkit-transform: scale(1.5) rotate(-15deg);  }
  100% { -webkit-transform: scale(1) rotate(5deg); }
}

.container {
  border: solid black 2px; 
  border-radius: 10px; 
  -webkit-box-shadow: #222 0px 0px 10px; 
  background: -webkit-gradient(radial, 64 64, 100, 25 25, 325, from(#00C1FC), to(#0E68CF))
}

.pulse {
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  text-shadow: black 1px 1px 1px;
  font-family: Lobster;
  text-shadow: black 5px 5px 2px;
  -webkit-transform-origin: 50% 0%;
}
Beauty

Canvas

Inspired by http://wdnuon.blogspot.com/2010/05/implementing-ibooks-page-curling-using.html

Beauty

SVG

Old

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<rect width="300" height="100" style="fill:rgb(255,0,0); stroke-width:2;"/>

</svg>

New

<html>
  <body>
    <svg>
      <rect 
        width="300" 
        height="100" 
        style="fill:rgb(255,0,0); stroke-width:2;"/>
    </svg>
  </body>
</html>
Beauty

SVG - Inline SVG?

  • Simple and Integrated
  • Can apply SVG Filters to CSS
  • Clipping
  • Masks
Speed

"A web app is extremely responsive, both in user perception and actual behavior."

  • App Cache
  • Workers
  • Offline Storage
Speed

App Cache

Demo: http://3.ly/timer

Simply create a cache manifest file, linked from your HTML

<html manifest="timer.manifest>"
CACHE MANIFEST
timer.html
timer.css
timer.js
timer.png
AddType text/cache-manifest manifest

Overview: http://is.gd/cpUUP

Speed

Workers

main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function (event) { alert(event.data); };

extra_work.js:
  postMessage(some_data);

Paint here

Difference

Speed

Offline Storage

  • Web SQL Database
  • IndexedDB
  • File API's
Speed

Offline Storage - Web SQL

var db = window.openDatabase("Database Name", "1.0");
function createTable() {
  db.transaction(function(tx) {
    tx.executeSql("CREATE TABLE test (id INTEGER PRIMARY KEY ASC, text TEXT)",
      [], function(tx) {  log.innerHTML = 'test created!' }, onError);
  });
}
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

db.transaction(function(tx) {
  tx.executeSql("INSERT INTO test (text) VALUES (?)", [document.querySelector('#todoitem').value],
    function(tx, result) {
      showRecords();
    }, 
    onError);
});
Speed

Offline Storage - Indexed DB

var db = indexedDB.open('tweets', 'Tweet store', false);
db.createObjectStore('tweets', 'id'); // 'id' is the key
db.createIndex('ByScreenname', 'tweets', 'screen_name', false);
var store = db.openObjectStore('tweets');
var objKey = store.put({id: 12345667, text: 'Hello World', screen_name: "Joe"});
var index = db.openIndex('ByScreenname');
var matching = index.get('Joe');
if (matching) {
  report(matching.id, matching.screen_name, matching.text);
}
What's not in HTML5

The stuff that makes applications easy

  • MVC
  • Data Binding (One-way, Two-way)
  • Data Templating
  • Testing
But where are the Tools?

Application Frameworks

  • Angular.js ("It is what HTML would have been, if it was designed for building web applications.")
  • SproutCore (Cocoa Inspired)
  • Cappucino (Objective-J and Cocoa)
So you still want to make a Native App!

There are frameworks to help you

  • Nitobi PhoneGap
  • Appcelerator Titanium
How does the Chrome Webstore fit in?

Use all your existing HTML5

More Information

Need to learn more about HTML5