Presentation: HTML5 and the near-future of the web

HTML5 and the near-future of the web

Christian Heilmann, Mosync Hackday 2012, Stockholm, Sweden, April 2012

Today I want to talk a bit about HTML5 and web technologies that allow us to build amazing things without having to lock ourselves in to a certain vendor or development environment.

Hooray for HTML5

Cheering fail

When HTML5 got out and several companies backed its ideas we had a lot of Rah-Rah about it. Marketing material about how amazing it is and how it is the future and bold statements like it being the "Killer" of other technologies rang loud and petered out as quickly. It is time to go back, reflect and see where we are and what we are working on.

HTML5 for everyone!

  • Web developers moving sites to interactive apps
  • Native app developers wanting to reach more users
  • Designers wanting to convert their brochureware or portfolios to mobile and tablet devices
  • Game developers
  • Game companies wanting to port their existing titles to a new platform
  • Mobile developers

As HTML5 promises to allow us to build high fidelity applications using web technologies a lot of different interest groups try their hand on it.

Different needs…

A Lab retriever

The pickle we are in right now is that each of those groups have different ideas and plans as to where this technology becomes useful to them and how to use it.

Conversion strategies

There are quite a few projects out there that allow you to convert HTML5 to native code and C++ to HTML5. You'll hear more about that later from others.

Weird comparisons

  • HTML5 will never be able to match native code
  • Native code can not match the power of HTML5
  • HTML5 is a new environment based on established principles

A lot of confusion happens because of weird comparisons. Native code will always be optimised for the current environment and only run there. This is something HTML5 can't match. HTML5, on the other hand can cover many more environments and allows for easy adaptation. You test what is supported and then give out the best result for this environment. This is something that is much harder to do in native code.

Something for everybody

Picknmix

The great thing about the current web technologies is that you can easily mix and match them to find the sweet spot for your use case.

Transforming/Animating in CSS

Hedgehog transformations

CSS moved on from being a technology that only allows you to colour and style typographically to a much richer experience, allowing for transformations in 3D and 2D space. The practical upshot is that all these things are also hardware accelerated.

Canvas - the pocket knife

  • Very low-level painting API
  • Can get video and audio data on a pixel level
  • Dynamic coordinate system
  • Hardware accelerated (Firefox since version 4, Chrome now)

Music/Sound

Professor Snape as a DJ

Let's start with a few things you can do with web technologies when it comes to music these days.

Native audio events

Native audio events

HTML defined audio and all kind of events a long time ago, and we should be able to do a lot with that. The issue is that there are a lot of bugs in browsers - especially iOS.

Kinda borked *sadface*

The sad reality is that sound in HTML5 is quite broken, because of various reasons. There is a lot of good information out there and here are some links on the topic.

Taking audio further

If you want to take audio further, as in analysing the music on a data level and reacting to it, there are a few APIs and libraries to use.

Dance.js

Building a game from HTML

Putting all of that together, it is pretty easy to build a game in HTML5, one that builds on top of semantic HTML and uses many input options.

Allowing for easy customisation

<li><img src="img/video.png" class="sprite" alt="Video" data-collision="energy:20" data-type="good"></li> <li><img src="img/flash.png" class="sprite" alt="Flash" data-collision="energy:-20" data-type="bad"></li>

In the data attributes of the images we define which of those should make the player lose energy and which should be good things to catch.

Mouse, keys, touch, orientation

container.addEventListener( 'keydown', onkeydown, false ); container.addEventListener( 'keyup', onkeyup, false ); container.addEventListener( 'touchstart', ontouchstart, false ); container.addEventListener( 'touchend', ontouchend, false ); container.addEventListener( 'click', onclick, false ); container.addEventListener( 'mousemove', onmousemove, false ); window.addEventListener( 'deviceorientation', tilt, false );

As HTML5 games should work across multiple devices it makes sense to make them work with different input types. Luckily all of them are available to us these days.

Think performance!

GetUserMedia (formerly <device>)

navigator.getUserMedia( {audio: true, video: true}, function(s) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(s); }, function(e) { console.log(e); } );

GetUserMedia (formerly <device>)

GetUserMedia (formerly <device>)

Game specific things

Game retriever

A few of the bleeding edge things of new web technologies are based on game development.

Where did it all go wrong?

Browserquest

With BrowserQuest, Mozilla showed that you can build a game in HTML5 that runs across many devices and with thousands of users simultaneously. Learn more from the screencast

Wishes of game makers

  • Fullscreen API (Demo)
  • Websockets
  • OpenGL == WebGL ( not really === )
  • Pointerlock API
  • Game controllers support

One of the big requests in the past was a fullscreen API for browsers. This is now available. You can make any element take over the whole screen, and users get notified that this happens.

Mouselock API

Another big issue with web technology for writing games is how browsers deal with mouse movements. There is no way to detect when the mouse is outside the screen and how far it should go. For 3D environments this is not good, which is why we have the Mouselock API which locks the mouse in the middle of the screen and lets you detect the movements to rotate a scene.

Gamepad API

The Gamepad API allows you to read joysticks and console gamepads in JavaScript.

Are we mobile yet?

Instagram unshredder

Are we mobile yet is a site that shows you the different parts of a mobile device and how many of those are available using open technologies. Quite a grim picture, but we're getting there.

APIs available for testing

  • Battery status
  • Camera access
  • IndexDB
  • Vibrator
  • Sending SMS

Mozilla is working to make a lot of this history. We have a few APIs in place that allows you to access the hardware of tablets and mobile phones.

Boot to Gecko

Boot to Gecko is Mozilla's project to create a native interface for mobiles. The screens you see here are html5 and based on the web API specifications defined by Mozilla and others. The texting facility already works and we have mobile devices running this interface.

WebRTC

WebRTC is the latest effort that several companies are working on. What it allows us to do is real-time IM systems with peer to peer connections.

Go and bet on the web!

Lego ad

Time to play!

Dog wants to play