Why HTML5 will revolutionize web-applications

At Todoist we have implemented and forced a HTML5 switch for 350.000+ users and their millions of tasks. We would not have done this if HTML5 did not do amazing things for the user experience. Here's why we did it and why we think HTML5 will change how people use and perceive the web.

HTML5 is a very broad specification that isn't even fully developed yet. Most modern browsers implement parts of the specification, and the things that we use at Todoist are web storage and offline support. Even with only these two things, we can provide an experience that nothing else can match, including:

• Offline usage: When you can't connect to the Internet, Todoist automatically switches to offline mode, enabling you to access and update your projects and tasks. When you come back online, we sync your data with our servers.
• Stunning performance: Using Todoist is as fast and responsive as a desktop application. This is because everything is stored locally and the application does not need to speak with a server far away all the time. This provides an experience that non-HTML5 based web applications simply can't offer.

You can try out the HTML5 version of Todoist at todoist.com/html5 and see the difference for yourself.

What do reviewers think about the new version?

Lifehack.org, a popular productivity blog with about 100.000 readers, wrote following in their A First Look at the new Todoist:

I will say it does feel like using a native app. This is done by making the interface highly responsive while doing all of the data transfer of creating, updating, and deleting data asynchronously.

The app is fast and fluid and truly does feel like a desktop app when in use. Despite the few bugs I ran into (it’s a beta, remember), I’d have to say that the new Todoist is going to be one of the best web based productivity apps that will be available.

What about older browsers?

After looking at our analytics, we found out that only 10% of our users used browsers that did not support web storage. And only 20% used browsers that did not support offline support. To make Todoist work, we only needed web storage, which means that only 10% of our users would not be able to use our HTML5 version. We took the decision that it was more important to make the experience much better for 90% of our users.

HTML5: A new paradigm shift?

In the past, we have had paradigm shifts in how web technologies enable radical new usages. Here is a brief history of technologies and their effects:

• Ajax communication made the web much more dynamic. Currently, most of the modern web and mobile applications are built using lots and lots of Ajax. Two great examples are Facebook and Gmail.
• Comet (or HTTP server push) revolutionized realtime communication and realtime notifications. Comet made Facebook Chat and Gmail Chat possible, along with collaborative editing in Google Docs.

My guess is that HTML5 is a new paradigm shift that will change how users perceive and use web applications. Why? Because applications built using HTML5 have amazing desktop-like performance and enable full offline functionality.

To make it easier to understand how the web is evolving let’s look at how a user would interact using Ajax, Comet and an HTML5 enabled offline app.

Before Ajax

Before Ajax, the whole page had to change on each update. This isn’t fast, especially if the web page is very complex.

With Ajax

Ajax made a web page much more dynamic, since only parts of the web page could be updated. Updating only a small portion of the site is a lot faster, since only a portion of the data is fetched and changed.

With Comet

Comet made the web realtime, meaning that the server could push data in realtime to the client. This made applications such as Facebook Chat possible.

With HTML5

HTML5 makes web applications much, much faster since the data is stored and manipulated locally on the user’s computer. HTML5 also enables offline usage of the web application.

The challenges of HTML5 development

HTML5 introduces a lot of new challenges and it's probably the main reason why few web applications use it. Here are some of the main issues that we ran into:

• Everything has to be implemented on the client! Since you can't rely on having a server, you must build everything client side. This means using lots and lots of JavaScript - which is a hard language to build large web-applications in.
• Syncing data intelligently isn't easy and you need to handle things like temporary IDs, running the same commands twice etc.
• Browser support is sometimes lacking: HTML5 is still very new and there are a lot of rough edges where things don't work. For example, invalidation of the cache is difficult and does not always work. To solve this, we needed to build special handling to make sure that the user runs the newest version.

While HTML5 does introduce challenges and requires a new way of implementing web applications, it also provides a cleaner codebase: that's our experience, at least. The main reason for this is that you only need to handle server errors in one place (when syncing data) and not with every request (as you do with Ajax).

HTML5 on mobile platforms

Most of the smartphone browsers already have great support for HTML5. You can already see Facebook's amazing mobile application, which is built in lots and lots of JavaScript. Todoist's mobile application is built using HTML5 technologies and we reused a large part of the codebase between the web and mobile versions of Todoist.

This said, building mobile apps using HTML5 is still very difficult, and we are currently implementing native apps for iOS and Android. I am sure as mobile browsers become more mature that a lot of more things will become possible and the gap between a HTML5 and a native app will shorten. For the time being, I think it's best to use native apps for the mobile, since it's very hard to implement great user interfaces using web technologies. However, it’s not impossible: LinkedIn has created a great mobile app using modern web technologies!

HTML5 on the desktop

At Todoist, we are also looking at how we can reuse our HTML5 version to build "native" desktop applications for Windows, Mac OS and Linux. For us, it would be a very economical build, since we would only have one codebase and the front ends would just be CSS3 stylesheets for the different operating systems. Our users would get a cloud-enabled "native" app that integrates nicely with their desktop system.

We can also see vendors such as Microsoft embracing HTML5 and related web technologies. For example, Windows 8 makes it fast and easy to build “native” Windows applications using web technologies such as HTML5 and CSS3. I think similar technologies will emerge for Mac OS and Linux as well. This means that you could easily convert your HTML5 web application to a desktop application and open an even larger market. For us developers, this is a huge opportunity, since managing many different code bases is a huge challenge and very costly.

Conclusion

We have had great fun developing and releasing our HTML5 version. We have also had a lot of praise from our users regarding the new HTML5 experience. In general, we are really excited about where the web is going and we think that we will see a lot more applications built using HTML5 and related technologies.