The big divide

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

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

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!

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

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?

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.

New layer of tarmac

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 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

Evolution of HTML (die, XML,die)

Pragmatic approach to web development

New and richer semantics

Standard that defines the browsers

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 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

No images

Calculation + Animation

All visuals in one space

Hardware acceleration

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.

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!

Client side actions and validation

required

autocomplete

max, min, steps

regex patterns

spellcheck

Validation API (JS)

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

Dynamic enctype setting

Dynamic form actions

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

Date picker

Number fields

Email/URL/Phone

Range

Datalist

Meter / Progress / Output

Keygen (?)

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.

File APIs

Client side file conversion

Packing before uploading

Drag and drop from the desktop

…

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.

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

Native browser controls

Style-able

Rich API

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.

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.

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

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.

Canvas features

Simple but powerful API

Dynamic coordinate system

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.

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.

Help steer the browser wars

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.