Getting started with HTML5 apps

Zachary Kessin on the skills you need to build apps with HTML5 and JavaScript.

HTML5 logoBuilding apps in HTML5 and JavaScript may be easier than using other development tools, but there’s still a learning curve. In the following interview, “Programming HTML5 Applications” author Zachary Kessin (@zkessin) discusses the skills you’ll need — and the mistakes you should avoid — if you want to create solid HTML5 applications.

What’s the difference between an HTML5/JavaScript app and a regular website?

Zachary Kessin: There isn’t a line you can draw and say that things on this side are “web pages” and on that side they’re “apps.” It’s more of a common-sense definition: Google Docs is an app, Wikipedia is not. If I had to define one factor, it would be how long do you go between page loads? In an app, you may work for an hour or more before reloading the page.

That being said, many of the ideas behind apps can be used in web pages to improve the user experience. For example, having an office wiki that cached the data on your local computer so you could use it offline would be a very useful feature.

How much programming experience do you need to take on HTML5 app development?

Zachary Kessin: There are two key things you need. First, an ability to do some amount of functional programming, and second, you need an understanding of asynchronous operations. In a web app, there are lots of times when a function does not return a value; it takes a callback that is called at some point in the future when the value is available. This takes some getting used to and it can often hit you in a strange way.

OSCON JavaScript and HTML5 Track — Discover the new power offered by HTML5, and understand JavaScript’s imminent colonization of server-side technology.

Save 20% on registration with the code OS11RAD

What are most common mistakes you see in HTML5/JavaScript apps?

Zachary Kessin: JavaScript, like PHP, is one of those languages that lets a beginner cut and paste code and get something that more or less works. The novice doesn’t really need to understanding what’s going on. This can lead to some really bad code. Common mistakes include:

  • Directly using the DOM. It is buggy and a pain to use. Use jQuery instead.
  • Overuse of the global name space, by design or not understanding things. Keep things lexically scoped.
  • Not really understanding the language. I think people see the “-script” in JavaScript and treat it as a “toy language,” which is a shame.
  • Not using JSLint. I can think of so many problems that would be caught in advance with JSLint.

What about HTML5/JavaScript apps most needs to be improved?

Zachary Kessin: The state of the local storage interfaces is kind of a mess. We’ve got IndexDB, SQLite and a few others, and it’s not quite clear what to use. The vendors need to get their acts together there.

Being able to do Web Workers is nice, but it would be great if there was some way to step through code and set breakpoints with Firebug or Chrome dev tools. I expect that will happen eventually.


Programming HTML5 Applications — This practical guide shows you how HTML5’s JavaScript APIs give you the power to take web development into fields that used to require more platform-specific development — particularly mobile deployment.

Related:

tags: , , , ,

Get the O’Reilly Programming Newsletter

Weekly insight from industry insiders. Plus exclusive content and offers.

  • http://www.micky2be.com micky2be

    Use jQuery instead?
    What’s the purpose to load a full library to use less than 10% of it.
    If you are not gonna use more than 70% of it, don’t use it.

  • http://domin8k.blogspot.com/ domin8k

    I also think that small manipulation with my own JS is way better than loading whole library with lots of unnecessary stuff… I don’t understand why we need it all?

  • http://jeremiahlee.com Jeremiah

    I also strongly disagree with “Directly using the DOM.” as a “common mistake”.

    DOM methods themselves are not buggy. IE 8 and below have buggy implementations of DOM methods. Firefox and Webkit have had reliable implementations for quite some time. IE 9 and 10 beta have proven to be stable in my testing. DOM methods are verbose, but they’re also the most efficient way for JS to access the DOM.

    If anything, the common mistake would be using jQuery where it’s unnecessary. Overcomplicated selectors, repeated selection of the same element, and other bad techniques are less obvious to new developers when using jQuery.