These Aren't the Sites You're Looking For:

Modern Web Applications

MM DD, 2011 -

Agenda

What's a modern web application?
How can we achieve greatness?
Sharing our greatness with others!

What's a modern web application?

The Power Of The Cloud

Native & Desktop Richness

Modern Web Apps

Tight Focus

A great web application has a tight focus encouraging people to interact, engage, and accomplish something, rather than passively view content.

Provide Rich Visuals

A great web application provides rich visuals that will delight the eye without distracting the mind.

Great User Experiences

A great web application uses the latest web technologies enhance the user experience, so users can complete their work faster, easier and with confidence.

Lower the barrier to entry

Make it easy to try without signing up first
Provide an OpenID sign-up option
Try the Google Identity Toolkit

Use responsive layout for different form factors

Media Queries for Style Sheets

<link rel="stylesheet" media="all" href="/static/css/base.min.css" />
<link rel="stylesheet" media="only screen and (max-width: 480px)" 
  href="/static/css/mobile.min.css" />

Testing CSS media queries in JavaScript with window.matchMedia()

if (window.matchMedia('only screen and (max-width: 480px)').matches) {
  // Asynchronously provide experience optimized for phone
} else if (window.matchMedia('only screen and (min-width: 481px) and ' +
                             '(max-width: 1024px)').matches) {
  // Asynchronously provide experience optimized for table or smaller screen
} else {
  // Asynchronously provide full screen experience
}

Lib: http://formfactorjs.com

Make a single page app: navigation & deep linking

function updateHash(push) {
  if (push) {
    var slideNo = curSlide + 1;
    var hash = '#' + slideNo;
    window.history.pushState(slideNo, 'Slide ' + slideNo, hash);
  }
}

window.addEventListener('popstate', handlePopState, false);

function handlePopState(event) {
  if (event.state != null) {
    curSlide = event.state - 1;
    updateSlides(true);
  }
}

Lib: http://www.leviroutes.com Demo

Make importing files easier

<input type="file" id="dir-select" webkitdirectory />

document.querySelector('#dir-select').onchange = function(e) {
  var out = [];
  for (var i = 0, f; f = e.target.files[i]; ++i) {
    out.push(f.webkitRelativePath);
  }
  document.querySelector('output').textContent = out.join('/n');
};

Utilize desktop paradigms: file drag-in

document.querySelector('#dropzone').
  window.addEventListener('drop', function(e) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.querySelector('img').src = e.target.result;
    };
    reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);

Drop in images from your desktop

Utilize desktop paradigms: paste from clipboard

document.body.onpaste = function(e) {
  var items = e.clipboardData.items;
  for (var i = 0; i < items.length; ++i) {
    if (items[i].kind == 'file' && items[i].type == 'image/png') {
      var blob = items[i].getAsFile();

      var img = document.createElement('img');
      img.src = window.URL.createObjectURL(blob);

      document.body.appendChild(img);
    }
  }
};

Click in this window and paste and image ( Copy image from a right-click )

Utilize desktop paradigms: file drag-out

<a href="src/star.mp3" draggable="true" class="dragout"
  data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE">
download
</a>

var files = document.querySelectorAll('.dragout');
for (var i = 0, file; file = files[i]; ++i) {
  file.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
  }, false);
}

Drag each of these files onto your desktop: 3D Glasses [PDF] Star [MP3]

( this feature is only available in Google Chrome )

Utilize desktop paradigms: save data to folders

window.webkitRequestFileSystem(TEMPORARY, 1024*1024, initFs, fsError);

function saveFile(arrayBuffer, filename, type, callback) {
  fs.root.getFile(filename, {create: true}, function(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
      var bb = new WebKitBlobBuilder();
      bb.append(arrayBuffer);
      fileWriter.write(bb.getBlob(type));
      callback(fileEntry);
    }, fsError);
  }, fsError);
}

Terminal Demo

Make it work offline

Application Cache to for static content:

<html manifest="cache.appcache">

Store data locally:

window.webkitRequestFileSystem(PERSISTENT, 1024*1024, initFs, fsError);

var idbRequest = window.indexedDB.open('Database Name');

window.localStorage.setItem('key', 'value');

Detect online/offline states:

window.addEventListener('online', function(e) {
  // Re-sync stored data to server.
}, false);

Persist user data

var elems = document.querySelectorAll('textarea, input');
for (var i = 0, elem; elem = elems[i]; ++i) {
  elem.addEventListener('input', function(item) {
    localStorage[formName + '-' + item.srcElement.id] = 
      item.srcElement.value;
    var debug = document.getElementById('data-persistence-debug');
    debug.innerHTML = 'Last auto-saved at: ' + new Date();
  }, false);
}

LawnChair - simple json storage

Make entering information easy & understandable

<input type="text" required />

<input type="email" value="some@email.com" />

<input type="date" min="2010-08-14" max="2011-08-14" 
value="2010-08-14"/>

<input type="range" min="0" max="50" value="10" />

<input type="search" results="10" placeholder="Search..." />

<input type="tel"  placeholder="(555) 555-5555"
 pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />

<input type="color" placeholder="e.g. #bbbbbb" />

<input type="number" step="1" min="-5" max="10" value="0" />

Speech enable your app

<input type="text" x-webkit-speech />

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

Keep users informed

window.notifications = window.notifications ||
    window.webkitNotifications || window.mozNotifications;

function showNotifications(pic, title, text) {
  if (notifications.checkPermission() == 0) {
    return;
  }

  var note = notifications.createNotification(pic, title, text);
  note.show();
    
  setTimeout(function(note) { // close note after a timeout  
    note.cancel();
  }, 6000, notification);
}

Treat performance like a feature

AppCache for faster initial load:

<html manifest="cache.appcache">

Store data locally:

window.webkitRequestFileSystem(TEMPORARY, 1024*1024, initFs, fsError);

var idbRequest = window.indexedDB.open('Database Name');

window.localStorage.setItem('key', 'value');

Animate with CSS3 instead of JS:

transition: all 1s ease-in-out;

Workers for non-blocking (responsive) UI:

var worker = new Worker('myworker.js');

More great tips at http://bit.ly/rizNVE

A preview of a new structured language for the Web
Familiar and natural, yet new

Class-based
Optional typing
New DOM API

Try the early preview at dartlang.org, and share your feedback!

interface Shape {
  perimeter(); // return type optional
}

class Rectangle implements Shape {
  final num height, width; 
  // Compact constructor syntax
  Rectangle(num this.height, num this.width);
  // Terse function syntax
  perimeter() => 2*height + 2*width;
}

class Square extends Rectangle {
  Square(num size) : super(size, size);
}

main() {
  var p = new Square(5).perimeter(); // dynamic type
  print('Perimeter=$p'); // String interpolation
}

How about older browsers?

HTML5 Cross Browser Polyfills

Step 1. Build web app
Step 2. ???????
Step 3. Profit!

Internet adage

Make it easy for user to discover great apps, extensions, and themes

Make it easy for developers and brands to reach the 200+ million Chrome users

Multiple monetization models, including one-time, subscriptions and in-app payments
One-time $5 developer registration fee
No review or approval process
No restrictions on advertising
No restrictions on the platform

Available in 41 Languages

Play 23% more and spend 147% more

http://bit.ly/nMCxgo

100% more engagement

http://bit.ly/p59XJb

Step 1. Create application manifest
Step 2. Upload manifest & graphics
Step 3. Publish

OR

AppMator

Chrome Web Store manifest file

{
  "name": "My Chrome Web Store",
  "description": "Discover great apps, games, extensions and...",
  "version": "1.0", 
  "icons": {
    "16": "16.png",
    "128": "128.png"
  },
  "app": {
    "urls": ["*://chrome.google.com/webstore"],
    "launch": { 
      "web_url": "https://chrome.google.com/webstore"
    }
  },
  "permissions": ["unlimitedStorage", "notifications", 
                  "offline_enabled"]
}

5%

In App Payments

No per transaction fees
No monthly fees
No sign up fees
PCI compliance

Aim for a great experience, everything else will follow.

Resources

Developer Guides

Chrome Web Store Developer Guides http://bit.ly/r3K8bm
Tutorial http://bit.ly/pYwzkY
Background - Extending your app's life http://bit.ly/pc5HiT
Using the Notifications API http://bit.ly/qNfeeN
OpenID & Identifying Your User http://bit.ly/oqsAfI

Best Practices

What makes for a great web app? http://bit.ly/nJWZQA
Anatomy of a Great Chrome Web Store Listing http://bit.ly/iUdFLb