HTML5 - time for some slicker apps

Today we are talking a bit about the cool new world of HTML5 and how it affects backend developers.

The big divide

Kitten behind a sofa

"Claws of doom" on Cheezburger Network

There has always been a tension between backend and frontend development. A lot of it is based on the fact that the structure of the web is a server and client structure with most of the work being on the server.

Into the great unknown

Google search for gambling addiction offering a 'I feel lucky' button

Working on the frontend has traditionally been a big gamble. You can not expect technologies to be supported, you have to test before you apply. You can't dictate the environment and it can be incredibly annoying to learn how browsers fail in different ways.

Fallback to the server

Unlocked lock

Photo by Tripp

A lot of frontend developers who get stuck at what they want to achieve start writing backend code that quickly solves the problem. In many cases this leaves security holes you can drive a truck through.

We need a developer!

Swiss army knives

Photo by Jürg Vollmer

The issue is that a lot of people don't see that backend and frontend are two different skillsets - developers are expected to do everything which leads to sub-par results. Right now, this is partly based on the fact that our technology is outdated.

The future is about cool interfaces

Futuristic interfaces uses in the movie Iron Man 2

The fun fact about that one is that all the cool things people really value are interfaces. Mobile devices and touch interfaces are making it much easier for people to interact with the web and we should have this as our main goal.

How to achieve that? Plugins?

Cable loop going from audio in to audio out

In the past we used plugins to, well, plug-in functionality into the web. Java applets, Flash and silverlight movies and even quicktime and realplayer content was embedded with object and embed elements.

Making ourselves happy

Pat on the back machine

Pat on the back machine, United States Patent 4608967 by Piro, Ralph R, published 09/02/1986

On the surface, this works. Well done, we fixed the web. The issue is that we are dependent on software that is alien to the web and - in a lot of cases - bound by patents.

Patching doesn't work

Potholes in a road

Photo by Alan Stanton

Plugins are a good stop-gap solution but really don't address the main issue. We need to fix the web, not rely on our users to fix it for us by installing extra software.

New layer of tarmac

Autobahn - fast motorway

Photo by Till Westermayer

The new web technologies we are using right now are a reboot of the web - we can turn the web into the long promised information superhighway with native technology.

Using existing infrastructure

Folding at home

Folding at home is an initiative by Stanford university to crowdsource analysis of protein folding - one of the causes of Alzheimer. By using people's computers it is now the biggest supercomputer on earth.

We can do the same with the web. People have powerful mobiles, tables and laptops. We should use them when we can.

What is HTML5?

HTML5 is much more than HTML. HTML is markup and it gives text semantic meaning. HTML5 as a standard has a lot of JavaScript APIs in it and is a larger "tool to build web applications" than just a markup language. Defined both by the WHATWG and the W3C HTML5 is meant to be open, interoperable across devices and browsers and backwards compatible, delivering value to any client.

Benefits of using HTML5

HTML5 takes a pragmatic approach to development instead of trying to force XML onto the web. It is based on an analysis of current development practices and making them into a standard. How a browser should work and digest HTML5 is part of the standard and that is new - in the past browsers made educated guesses.

HTML5 Boilerplate

Screenshot of HTML5 Boilerplate

HTML5 boilerplate is a great start to work with HTML5 - it is a zip containing the correct HTML, CSS and server settings to start using HTML5 and support old browsers and ensure predictive rendering across browsers.

Benefits of using CSS3

CSS3 is a hot topic especially as it goes beyond the capabilities of CSS2 as it includes transitions and animation. This allows designers to build engaging interfaces without needing to hand over to JavaScript developers. The new gradient and rounding options also make a lot of images unnecessary.

CSS Animation

This example shows how simple it is to create an animation with CSS. Notice that the main annoyance really is that there is a lot of repetition to support different browser prefixes.

CSS3 Dashboard

The CSS3 dashboard is a great overview of all the possible things in CSS these days. The source code is available on GitHub.

HTML5 forms rock!

One of the cool new features is that forms in HTML5 come with validation features which make in unnecessary to write your own JS validation and repeat the rules client and server side. This does of course not mean that you shouldn't check server side!

Form submission control

You can also give different buttons different actions to send the data to which makes it easier to create a step by step form and have different API calls for working with the data and storing the state of the process.

New form elements

HTML5 forms got a lot of new elements to use. The main benefit of these new elements is that on mobile devices they trigger different input keyboards and thus make it much easier to enter content.

The Meter, Progress and Output elements allow for simple multi step forms.

File APIs

The new file APIs allow us to read and create files from the system easier than by going via a server. You can for example convert files before uploading them and allowing people to get their offline documents easier into an online system than with old-school file upload forms.

Motivational poster

This Mozilla demo shows how you can drop an image into the browser, annotate it and upload the solution as an image to different social sharing sites.

HTML5 video

Video is one of the big break-through technologies for HTML5. As video elements are just like any other element in the page it makes it very easy to deliver engaging and interesting video solutions. The native browser controls makes it also much easier to make video more accessible for example to keyboard users.

Syncing HTML5 video with page content

This demo shows how easy it is to sync page content with video in HTML5. Notice that the JavaScript is very simple and by using data- attributes on the HTML I can maintain the syncing without any JS knowledge.

Popcorn

Screenshot of popcorn

Popcorn is a Mozilla sponsored JavaScript library that makes it very easy to connect video and audio content with the rest of the document.

Issues with HTML5 video

The biggest issue with HTML5 video fro implementers is right now that in order to support all the capable browsers, you need to offer your videos in 3 formats. Automatic conversion services can make that really easy, though.

Canvas

etch-a-sketch

photo by Kevin Simpson

The canvas element allows you to paint in the browser. On a first glance it looks like an etch-a-sketch. You can paint lines, you can move the pen without painting and you can wipe the canvas to delete it.

Inspired by my last slide, Gregory Koberger wrote an etch-a-sketch in canvas.

Canvas features

Digging deeper into canvas you find that the API - though simple - is very clever. You can paint lines, rectangles, arches and bezier curves and you can define the fill modes and line styles. Furthermore you can do gradients and drop-shadows. But the coolest feature is that the coordinate system on canvas is not fixed bug flexible. You can have a different coordinate system for each thing you paint onto the canvas.

Simple canvas

This is a simple example how to draw a rectangle in canvas - this is all you need to do.

Translating canvas

By default, the coordinate system of a canvas starts at the top left. This example shows how to shift it to the centre of the canvas. Notice that the coordinates of the rectangle did not change.

Rotating canvas

You can also rotate the coordinate system easily. Again, the coordinates of the rectangle did not have to change.

Scaling canvas

You can also scale the canvas to resize everything without having to change the coordinates or dimensions.

Browser fountain

The Browser Fountain is a demo that shows how simple it is to create a particle system in canvas by using the dynamic changes in the coordinate system.

WebGL

WebGL is the big new thing for a lot of people. It brings 3D gaming to the web.

three.js by Mr. Doob

Screenshot of Three.js

Three.js is a JavaScript library that makes it much easier for not-3D developers to start with WebGL. Check out the demos on the page - there are many cool examples.

WebGL Water

This is one of the winners of the Mozilla Demo Scene competition. It is fully featured simulation of water - complete with reflections, ripples and proper gravity simulation.

WebGL Skin

This is an impressive demo of simulating skin in WebGL - check the different discolourations and hair stubbles.

Old school storage

Cookie monster

Photo by Dan Cederholm

In the past all we could do to store content on the user's computer for re-use or for keeping the state of an application was using cookies.

Local Storage

Local Storage (persistent) and Session Storage (deleted when the tab is closed) are a very simple way to store content on the user's machine without having to go through the pains of cookies.

Offline

Offline storage makes sure that our apps give a real native app feeling. If a user gets disconnected it shouldn't be the end of the world.

History API

GitHub using the history API

GitHub is a great example of using the history API - click on files and folders to see that the interface loads and changes and the URL changes accordingly. All without reloading the whole page

d3.js

Screenshot of D3

SVG is Scalable Vector graphics, a W3C standard based on XML to paint in the browser. SVG images can easily be interactive. D3 is a library to turn data in your pages (like tables) into highly interactive graphs and charts.

Raphaël

Screenshot of raphael

Raphaël is a helper library that makes it very easy to use SVG and it provides fallbacks for browsers that don't understand it.

Evolution of the web

To celebrate the birthday of Chrome, Google released this wonderful timeline animation of how the web evolved. It uses SVG and is a great example of an interactive dashboard.

Help steer the browser wars

Browser wars

Illustration by shoze (Galit Weisberg)

One big issue was the browser wars. Instead of following a standard or agreeing on one a lot of the competition in the past was about which browser comes up with more proprietary things that look cool.

We now need you to use the technologies we provide to give us a benchmark on what really needs our attention rather than falling into the same trap.

The future is bright!

Thanks!