News

How to build web apps with HTML5, CSS3 and Javascript part1

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

webapps608

Over the past few years, the technologies we use to create websites have matured and developed at an amazingly rapid pace. Thankfully, this development hasn’t been limited solely to new features being introduced, although these do tend to attract most of the headlines.
In actual fact, much work has also been undertaken on enhancing the performance, reliability and scalability of the processing and rendering we rely on: both browser vendors and framework developers have been hard at work so that the JavaScript and CSS engines we use to render content today are dramatic improvements over those we had access to in 2008.
This is all great news for any web developer, but the rapid pace of progress has also coincided with an increase in average web access speeds, particularly on mobile devices, as broadband networks have improved and 3G networks have rolled out. At the same time, fully internet-capable smartphones and tablets have arrived and become the web-connected device of choice.
So, the world of the web has undoubtedly changed a lot over the past few years: the tools at our disposal have changed; the way users connect and consume all the content has changed; and the hardware characteristics and performance of the typical access device has substantially altered as well.
The phenomenal progress that the web has undertaken has brought numerous benefits toboth users and developers, but perhaps one of the most interesting aspects of the web as we find it today is that the way users interact with it has changed dramatically. Instead of using native applications on their computers or mobile phones, increasingly web-enabled functionality is being delivered either through the browser, or via an installable app that provides a customised window to the web.
The tools and technology we use to craft websites are now mature enough to enable all of us to become not just web designers, but now app designers too.

WHAT IS A WEB APP?

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 specialised 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 to 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 recognise 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 democratising, 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

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.

FRAMEWORKS AND RUNTIME – WHAT AND WHY?

Adobe AIR
get.adobe.com/air
Adobe AIR (Adobe Integrated Runtime) is one of the most established and long-standing solutions for deploying web technologies on the desktop. Originally developed as a solution for wrapping both native HTML/CSS/JavaScript and Flash content to the Mac, Windows and Linux platforms, it has since been extended to provide support for tablets and smartphones. Linux support has been withdrawn, but AIR remains a good solution for deploying web apps across a range of devices and operating systems.
One of the main benefits of the AIR system is the ability to install apps to desktop computers directly from the browser. This makes it easy to publish apps, although this doesn’t work for mobile devices.

PhoneGap
phonegap.com
PhoneGap is designed to provide the structure of a native mobile app, underpinning a processing and user interface powered by web technologies. PhoneGap apps are like having a branded browser that’s limited to displaying your chosen web content.
As the name implies, PhoneGap is firmly aimed at the smartphone and tablet market segment. It’s a good choice for anyone who subscribes to the Adobe Creative Cloud service as it’s included with the standard subscription (although note that you’ll still need an Apple developer account to submit apps to the Apple App Store).

Sencha Touch
bit.ly/19zoNfD
The Sencha Touch framework provides a boilerplate solution to developing web apps with the feel of a native application, without the need to compile and distribute via the App Store.
There are both benefits and limitations to this approach: as a developer you can reach the maximum number of users by simply encouraging them to visit your website on their mobile device and bookmarking, but you can’t charge for your app, and there are limitations to the native hardware you can access.
Sencha Touch is available free of charge, with additional paid-for support services also available to make use of.

Titanium
appcelerator.com/titanium
Titanium is a very capable alternative to PhoneGap. It works in a very similar way, providing a web-like environment in which your web app can work, and compiling it all into a native application.
However, Titanium differs from PhoneGap in the level of APIs exposed to the platform through the SDK. In short, there are more features available through the SDK, although this brings with it additional complexity.
One of the nicest features of Titanium is the price tag (or its lack of): it’s absolutely free to download and experiment with, making it a very good place to start if at the moment you’re just exploring the idea of developing mobile apps, rather than diving in head first!

×