What is a modern web application?

On Sept. 10th I attended a presentation by two Developer Advocates at Google, Pete Lepage and Jan Kleinert. Pete was kind enough to share the slide show he used for the presentation on his website. I found it very informative and thought I’d share a summary.

The subject of the presentation was : What is a modern web application?

The overarching theme is : Use the cloud and provide native desktop richness.

Springpad and Gojee were mentioned as excellent of keeping with this philosophy. What these do right is look exactly like an application you’d install on your computer and use screen real estate effectively. Gojee presents the user with an uncluttered, straightforward interface and full screen images that make the food look amazing

Pete demoed a project called DJ BreakPoint, which is basically Turntable.fm done totally in HTML 5.

He listed some MVC frameworks like SproutcoreBackbone.jsExt JS 4 as well as CSS frameworks like LessSass

They talked about making it easy to jump right into using a web app. For example, with Springpad you can author a document without signing up, but you have to sign up to save. Users are more likely to sign up once they have test driven an apps features and have invested some of their time either playing with the app or creating content with it

Once the user commits to signing up, make the process super easy. Let them sign in with OpenID, Facebook, Google credentials so they don’t have to fill out a form with their personal information. The Google Identity Toolkit makes hooking these up easy.

Fit the medium: 

Test for screen size and resolution with media queries for stylesheets and/or css media queries in js with window.matchMedia() (demo here, resize the window to watch it try and auto detect the device)

Deep linking – He gave the example of how Netflix used to be designed. The URL would never change because the same page was just being rewritten with javascript. When you hit the back button as you were browsing through movies you would be sent back to the previous website you were looking at before Netflix instead of the Netflix movie listings page. Leviroutes (“a routes framework for JS that hooks into HTML5 history”) *Notice that even links to presentation the slideshow are appended with #[slidenumber].*

New ways of moving files (starts on slide 19)

In Webkit browsers only (Safari and Chrome) you can add the webkitdrectory tag to an <input /> to make file uploading simple.

Keeping with the concept of mimicking desktop applications :

  • You can drag and drop files with by adding ‘draggable=”true” to anchor tags (and setting a MIMEtype) (works on Chrome only)
  • This goes both ways, with the ability to drag files and images from your desktop into Chrome to upload them
  • The addition of local filesystems ups the local storage capacity from 5MB and the filesystem runs in a sandbox in Chrome so it’s secure.
  • Application Cache lets applications work offline if they lose internet connection and resynchronize when the connection comes back. This is already available in some apps such as Disqus. If you’re writing a comment and you reload the page or lose your connection the comment is reloaded from cache when you come back. ‘ (slide 23-24) Make this easy with LawnChair (persistent json objects)
  • Desktop notifications – Popup windows that can contain even contain multimedia (slide 26)

Voice control is the hottest thing nowadays, with Siri just being announced and Google recently enabling spoken-word searches (in Chrome only). Just add x-webkit-speech to an input and Google handles the rest on their end (in-the-cloud processing).

It’s cool that any device with an accelerometer (phones, as well as many laptops have them for fall detection) Device orientation demo 

Full 3D acceleration in Chrome with WebGL. Demo here

Native audio alalysis. Demo here

What good is all of this stuff if it only works in Chrome? Solution: Chromeframe

It doesn’t require superuser to install so even people with limited account access can install it!

 

Resources

Chromestatus.com

HTML5Rocks.com

What Makes A Great Web App?

Bootstrap

Golden Grid

Less

Sass

TheNextWeb.com

Pete LePage’s blog

CanIUse.com (list of HTML5 compatibility)

FormFactorJS.com

Leviroutes

Comments are closed.