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

Modern Web Applications


  -  

Of course we're using Geolocation!

Who?


+

@

Agenda

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.

IO Reader

Demo [Source]

How do I build something like that?

...with a great user experience!

Lower the barrier to entry

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

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

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?

Chrome Frame

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Other helpful libraries

Step 1. Build web app
Step 2. ???????
Step 3. Profit!
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
100% more engagement
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

One last thing...

Aim for a great experience, everything else will follow.

chromestatus.com

HTML5Rocks.com

Resources

Developer Guides

Best Practices

Thanks!

Questions?

The web is what you make of it.