Web Apps and the Chrome Web Store

Paul Kinlan (@Paul_Kinlan)
November 2010

You can follow along at http://3.ly/gddwebstore

You can ask questions on:

Google Moderator http://3.ly/webstoreqanda

I will show you how to:

build great web apps,
and get lots of users

Lets start in 1997

First Web apps

An app

Desktop apps were deep and complex!

But pretty much everything is stored locally!

Which is best?

VS

Web Apps = Cloud Goodness - Desktop Richness

Then....AJAX. BOOM!

Now.... HTML5

Web Apps = Cloud Goodness + Desktop Richness

Web Apps or Web Site?

What makes Web Apps special?

Are Task Orientated

Have a Tight Focus

Possess a Rich UX

http://everytimezone.com/

Practical Tips for an Awesome UX

Lazy registration

Lazy registration - Sample

Aviary Vector Editor

Transparent registration

Transparent registration - Sample

Diary.com

Automatic Persistence

ietherpad.com

Rich Interactions - Animations

Look at me Animate

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

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

Rich Interactions - Drag from the Desktop

drophere.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(aFile) {
      return function(evt) {
        var data = evt.target.result;
        ...
      }; })(file);
    reader.readAsDataURL(file);
  }
});

By http://monocubed.com

Rich Interactions - Drag to the Desktop

var dragElement = document.getElementById("dragImage");
  dragElement.addEventListener(
    "dragstart",
    function(e) {
    e.dataTransfer.setData("DownloadURL","image/png:test.png:http://test.com/test.png");
    },
    false);

Drag me!

Rich Interactions - Notifications

if (window.webkitNotifications.checkPermission() == 0) {
  window.webkitNotifications.createNotification(picture, title, text).show();
} else {
  window.webkitNotifications.requestPermission();
}

This presentation currently X permission to display notifications.

More ways to make Web Apps special

Make them Offline enabled:

App-Cache and Databases.

Utilize Background processing:

Web Workers.

Take advantage of Hardware acceleration:

3D, Canvas, CSS Transforms and Transitions

Great, so I have a cool app. Now what?

Get lots of users

Users: Finding great apps is hard!

What you want to be doing

Developers: Getting lots of users is hard!

Making money is hard!

Now for a little story.

I learnt

If your app is good, users
will be willing to pay for it!

But It's:

Hard to ask people to pay
Hard to integrate into your app

Chrome Web Store

Making complex things simple

Discovery

Make it easy for users to buy apps

Make it easy for developers to find users

Distribution

Make it easy for developers to sell apps

How do I get my app into the store?

Create a Manifest

{
  "name" : "Simple TODO's",
  "description" : "The simplest TODO list editor in the world",
  "version": "1",
  "icons": {
    "24": "logo24.png", "128": "logo.png"
  },
  "permissions": [
    "unlimitedStorage"
  ],
  "app" : {
    "urls": ["http://simpletodo-app.appspot.com/"],
    "launch": {
      "web_url": "http://simpletodo-app.appspot.com/index.html"
    }
  }
}

Get Started

Develop, Compress, Upload and Publish