Making apps with the web

The pieces are coming together: you can can use the web (HTTP, HTML, JS, CSS) to package focused pieces of functionality as apps, with the possibility to make money.

This post outlines how it is coming together, and how you can get involved. While I work in the Mozilla Labs group and I am sure this post will have a Mozilla slant, this is my personal outlook.

What is a web app

I am old school, so when I hear "web app" I associate that with the "more of an app style than document style" web page. Something more like GMail instead of the New York Times.

However, it seems to be getting a more focused definition, something that implies characteristics around the actual usage of the app. Here is a fuzzy definition of it:

A web app is a focused piece of functionality implemented using web technologies. These pieces of functionality are grouped in an "app dashboard".


In the ancient web times, the app dashboard was just your browser bookmarks. However, the newer dashboards have a richer relationship to the apps. There are app icons/sections that can change state, and with Windows Metro, even provide some data display services. There are other associated concepts like an app being purchased and working offline.

So, in a way, everything old is new again, but better and richer. The "native app" success on mobile devices has set the stage and help define what should be possible.

While web apps may not be completely equivalent with the capabilities of native apps yet, the stars are moving into position.

Alignment of the stars

Using web apps to deliver functionality is coming together because to the following forces:

• Platforms and money
• Design practices
• Development tools

Platforms and money

Here are the platforms where you can use the web to make apps, and how you can make money doing so.

Today's mobile: PhoneGap/Cordova

The PhoneGap approach works now, today. Apps are made with just plain HTML/JS/CSS and wrapped up in an platform-specific binary that gives the code access to the device capabilities.

Cordova is the Apache-housed, open source parts that PhoneGap is built on. Work in Cordova feeds into web standards discussions. The hope is to not need Cordova at all, but just have all the capabilities built into the web platform.

Make money the usual ways via the platform-specific app stores: charge up front, do freemium, in-app purchases, use ads.

Future mobile: Boot to Gecko (B2G)

Mozilla is working on a web-only mobile OS called Boot to Gecko (B2G). The great thing about this platform: it is just plain web technologies. All apps are fetched from URLs, and they can work offline through web technologies like AppCache.

The tagline for B2G is "the web is the platform". The "native" in B2G is the web. If the web is not sufficient in some way, Mozilla is putting real effort into improving it. Just like Cordova, the development is all out in the open. You can be the change you want to see by participating.

The B2G effort includes a set of default web apps, including a web app "home screen". This set of web apps is called Gaia. You can "install" your app into the home screen using the web app APIs, and Mozilla is working on a marketplace and APIs to allow other marketplaces for apps. There is an identity API via Persona, and efforts to work out other details like digital receipts. The apps roadmap page will help you get acquainted with some of the moving pieces if you want to get involved.

Right now the B2G code is still really early in development. It is a bit rough to get going. Think of it as getting access to iOS a year before the first iPhone shipped.

Desktop

Both Firefox and Chrome will know how to install web apps. The hope is that all the browser vendors can converge on some common APIs and get those uplifted into all browsers.

Mozilla is also working out a way to "install" a web app from your browser into your desktop operating system. A small OS app shell will be wrapped around a web renderer that is tied to that specific web app. For the end user, it just looks like any other app installed on their desktop.

You will be able to use web technologies for Windows 8 Metro apps and in Windows Phone. Microsoft is making the web stack a first class development option for their platform.

On the money side:

There is the Chrome Web Store for Chrome browsers, and Mozilla is working on a Marketplace. The hope is to work out open, standardized APIs that would allow other marketplaces and integration with any web browser. There is a Windows Phone Marketplace, and I fully expect a marketplace for Metro apps for Windows 8.

While marketplaces by themselves do not translate directly into money, they establish ways for users to buy functionality and discover new apps. They set up a fertile environment. Using ads and providing apps for free with money coming in from other channels will still be possible.

Design practices

There are a few design practices that fit well with web app development:

Mobile first

The number of mobile, non-desktop PC devices are growing like crazy. The "app" phase was brought on by these mobile devices. By focusing on these mobile experiences first, it sets you up to reach a very big market.

Focused execution

This falls out of the Mobile First design approach. When you start with mobile, the interfaces are usually more focused. This is a great way to do any app design -- make sure to distill the design problem to the smallest user goal possible, and then build up from there as necessary.

Responsive design

Different kinds of devices that have different resolutions and input methods are best served with some custom work done for each device. However, there is a lot of code that can be shared by moving away from a "pixel perfect" and device-specific look to more of a "web aesthetic" using responsive design.

URL-based design

"Mobile Apps Must Die" brings up some interesting points when apps are addressable via URLs. It opens up new discovery possibilities and different ways to "organize" your apps.

Developer tools

Here are some APIs that can help with web app plumbing:

• Application Cache: learn it. Yes, it has its quirks, but for serving offline UI, it is the state of the art.
• localStorage: for storing smaller name/value paires of data offline.
• IndexedDB: for storing larger amounts of data offline. Right now iOS/Android devices do not support IndexedDB, just the older, deprecated Web SQL. However, that should change over time. Lawnchair can provide an adapter layer if you need to target platforms with uneven storage support today.

The best part: you can start using some of these technologies today, even for apps that target traditional desktop browser deployment.

I hope to share more tools and approaches as I discover them.

Under construction

As you jump into making web apps you will discover some rough edges. You may get frustrated. This is OK. The future is under construction.

If you want to see change, get involved. Move the Web Forward is a great resource that can help you figure out how you want to engage.

I am a web hacker and my current interest is the B2G platform, so I will be checking out Gaia. I will share what I find as I go along. If you want to engage on a lower level, check out the Gonk and Gecko layers in B2G.


I am really excited to see web apps come into their own for many different platforms that include ways to make money. It is great to see some smart designers figure out how to design for the web app world.