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.
Today we are talking a bit about the cool new world of HTML5 and how it affects backend developers.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
Popcorn is a Mozilla sponsored JavaScript library that makes it very easy to connect video and audio content with the rest of the document.
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.
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.
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.
This is a simple example how to draw a rectangle in canvas - this is all you need to do.
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.
You can also rotate the coordinate system easily. Again, the coordinates of the rectangle did not have to change.
You can also scale the canvas to resize everything without having to change the coordinates or dimensions.
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 is the big new thing for a lot of people. It brings 3D gaming to the web.
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.
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.
This is an impressive demo of simulating skin in WebGL - check the different discolourations and hair stubbles.
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 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.
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
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 is a helper library that makes it very easy to use SVG and it provides fallbacks for browsers that don't understand it.
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.
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.