How to build web apps with HTML5, CSS3 and JavaScript

Build web apps

HTML5CSS3, and JavaScript are now such powerful tools that you can create fully-fledged web apps as capable as desktop apps

WHAT IS A WEB APP? 

computer

The idea that skills acquired as a web designer can be applied to app design isn’t a big step, but a common concern amongst designers and developers interested in making the jump is how to translate their experience in one medium to another. In reality, a web app is nothing more than a specialized website running in isolation.
What makes a web app different to a regular website can be boiled down to the way data is stored, retrieved and processed. A typical website will use the client-side HTML layer to present information to the user. When an action is performed, whether it’s adding an item to a shopping cart, or marking a to-do item as complete, the website will send a message back to the server, where the action is performed.
In a web app, typically actions are performed on the client, and often the data is stored on the client too. 

Still, this isn’t universal, with exceptions such as Google’s range of productivity tools and Adobe’s online Photoshop app too.
Setting aside the many examples where the server still plays an active role, it’s a reasonable deduction to say that as a web designer or developer,

 you simply need to work on understanding the peculiarities of app-centric APIs – especially through JavaScript – in order to be able to develop standalone web apps. Thankfully, many of the available libraries and frameworks now make this task much easier. 

Good documentation and abstraction make it trivial to run a local database, for example, storing and retrieving data without ever having to go to a server.
At a basic level, web apps can be delivered through the browser just like any regular website, although by choosing this deployment method.

The specific benefits associated with a particular platform cannot be leveraged. HTML5 does have a number of useful APIs to make use of, allowing for the likes of geo-locational aware scripting, but these are generic and do tend to have a habit of interfering quite a bit with the user experience (by spawning a pop-up dialogue box, for example), which is far from ideal.
Still, your decision over the right way to develop and deploy an app will largely come down to the usage scenario and its appropriateness for the platform. A quick-fix game is likely to be well suited to mobile devices, while an in-depth accounting app is probably more at home on the desktop. See some examples below

Trello


Trello is a task management tool where users compile lists using cards. This is a lovely example of how a simple idea can be given a rich interface using standard web tools.


Evernote

Evernote is a great installable app – but there is also a web app that features all of that core functionality without the need to download anything to your device.


NUS Extra

This app for university students also makes use of the PhoneGap framework to offer a native app experience while leveraging standard web technologies.
This app takes advantage of GPS location to show useful products and services near the user.

Google Docs

Google Docs is one of the original set of applications in a browser that helped to demonstrate the power of the web toolset. It offers a range of functionality that rivals desktop-based word processors, but is entirely based in the browser. While it’s far from being the prettiest web app,

 it concentrates on providing a solution to the need for an authoring and collaboration environment, and it remains the standard against which others are compared.

HOW IS A WEB APP DIFFERENT FROM A WEBSITE?


It’s not uncommon to hear new developers asking the question: what makes a web app different from a normal website? Underneath it all,

the technologies being used are more or less identical between a website and a web app, so it’s a perfectly reasonable question to ask.

Furthermore, if you were to ask different developers you’d probably find that you get wildly different answers.
In simple terms, a web app is just a website that aims to perform a specific function. Turning that on its head,

you might prefer to say that a web app is an application that has been developed using web technologies, such as HTML, CSS, and JavaScript.
Of course, increasingly we are able to access web apps outside of the browser now. Sometimes they’re delivered using a wrapper such as Adobe AIR,

sometimes they masquerade as native applications for our Android or iOS devices. This makes it that much harder to recognize whether an app is actually a ‘web app’ or otherwise,

but in truth it doesn’t really matter!
Using the same tools, you can develop both a website and a web app, often tying into the specific device’s native functionality with the latter. This is hugely democratizing,

because now every web developer is now a potential app developer, and the world of apps will be a far richer place for it.

THE DESKTOP OPTIONS

THE DESKTOP 

Many web apps can be equally well deployed via the web browser as a native application.  Google Docs is a good example of a web app that exists in the browser. 

This is used as a selling point for the tool as it enables users to access the service regardless of which device they’re using.
There are occasions when it’s preferable to be able to provide a standalone desktop application that is installed, 

launched and closed just like any other native app. This used to be a limiting factor in developing web-based applications,

 but the landscape has changed dramatically over the past few years.
Spearheading the move to installable apps was Adobe’s AIR runtime. This solution provides a web environment (supporting both HTML and Flash) 

without the need to launch a web browser. The runtime isn’t limited to providing a basic environment, however.

 In addition to the standard web APIs you can access within the browser, AIR provides a series of specialist APIs that allow you to,

 for example, control and access the local file system.
One of the major benefits of systems such as AIR is the speed at which you can prototype and iterate application design.

 It’s also useful to be able to deploy the same app across many different operating systems, without the need to recode. 

Popular examples of AIR-powered apps include the original TweetDeck.
But AIR isn’t the only option available, and it’s especially worth having a look at the alternatives if you find you have specific needs,

 such as a game-orientated framework.