browserscene: creating demos on the web

BROWSERSCENE

Creating demos on the Web

Rob Hawkes

Hi, I’m Rob Hawkes and I’m here tonight to talk a little about creating demos using the latest Web technologies.

I call it the browserscene, but feel free to call it the demoscene on the Web.

If you don’t already know, I work at Mozilla.

My official job title is Technical Evangelist, but I prefer Rawket Scientist, which is what it says on my business card.

Part of my job is to engage with people like you and me about cool new technologies on the Web.

Created by Phil Banks (@emirpprime)

Aside from that I spend most of my time experimenting with HTML5 and other cool technologies.

I basically have an addiction to visual programming and hacking around with code.

It’s fun!

I’ve never been to Finland before, and for some reason I thought it would be really cold over here.

Turns out it’s hotter than England, and way flatter than I imagined!

Browsers are ready for you

The technology exists

Over the past few years browsers have come on leaps and bounds with the types of things that they can do.

What’s been particularly interesting is the focus on audio and visual media with the introduction of HTML5 and JavaScript APIs.

This now allows us to create things like this…

This is No Comply, a WebGL and audio demo created by Mozilla volunteers to show off the technologies.

http://hacks.mozilla.org/2011/03/nocomply/

What are the technologies?

Features in today’s browsers

Let’s run through some of the most interesting of these new technologies, the kind of ones you might want to use.

Canvas & WebGL

2D and 3D graphics

Canvas & WebGL

https://developer.mozilla.org/en/html/canvashttps://developer.mozilla.org/en/WebGL

Video

Video playback and manipulation

Video API

https://developer.mozilla.org/en/Using_audio_and_video_in_Firefox

Audio & Audio Data

Audio playback and manipulation

Audio API + the Audio Data API

https://developer.mozilla.org/en/Using_audio_and_video_in_Firefoxhttps://developer.mozilla.org/en/Introducing_the_Audio_API_Extension

Geolocation

Finding out where you are

Geolocation

https://developer.mozilla.org/en/Using_geolocation

WebSockets

Real-time communication

WebSockets

https://developer.mozilla.org/en/WebSockets

CSS3 & Web Fonts

Upgraded stylesheets and typography

CSS3 & Web Fonts

https://developer.mozilla.org/en/CSShttps://developer.mozilla.org/en/css/@font-face

Local Storage & IndexedDB

Storing data in the browser

Local Storage & IndexedDB

https://developer.mozilla.org/en/DOM/Storagehttps://developer.mozilla.org/en/IndexedDB

Why use these technologies?

Lots of reasons

So these technologies are cool and all, but why should you be using them over others, like Flash?

Threshold of something cool

The time is now

In short, the time is now; we’re on the threshold of something awesome.

We can now create amazing demos, visualisations, and games with nothing more than the technologies we would normally use to build a website.

This is definitely a good time to be developing on the Web.

Keeping things to a minimum

The code is lightweight

The code and assets are inherently lightweight.

Text and image files don’t take up much space.

No reliance on plugins

Things just work

You don’t have to download and install anything for a demo to run; it just works.

It’s just HTML and JavaScript.

Development is free

Free as in beer and speech

Development can be completely free.

You don’t need to pay for any editing tools.

You could easily use a simple text editor, or the browser itself.

Code isn’t compiled or hidden

Sharing the love

No compilation; the code is completely open for others to look at and learn from.

I find this kind of open development gives me a warm and fuzzy feeling inside, but that might just be because I’m slightly crazy.

Existing browserscene demos

What others have already created

Now, let’s take a look at some of the cool demos that others have put together with these technologies.

Flight of the Navigator

https://developer.mozilla.org/en-US/demos/detail/flight-of-the-navigator

Globe Tweeter

https://developer.mozilla.org/en-US/demos/detail/globetweeter

Rofox

https://developer.mozilla.org/en-US/demos/detail/rofox-css3-animation-by-anthony-calzadilla

CSS Nyan Cat

https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat

Slamdown from the Mozilla Flame Party Helsinki

http://traction.untergrund.net/slamdown/

Infinite beanstalk

http://www.inear.se/2011/07/the-beanstalk/

WebGL spiders

http://oos.moxiecode.com/js_webgl/spiders/index.html

Silk

http://weavesilk.com

Rome

http://ro.me

WebGL photo particles

http://lab.aerotwist.com/webgl/photoparticles/

HelloRacer

http://helloracer.com/webgl/

Keylight

http://hakim.se/experiments/html5/keylight/

This is something I made especially for Assembly.

It’s an audio visualiser that uses WebGL and HTML5 Audio.

If you stick around for my seminar at 1pm I’ll be running through the code behind this.

Hundreds of other demos

There are websites dedicated to them

These are really just a few demos that are out there right now, and the list is growing every day!

There are some great sites to keep track of the latest ones.

Mozilla Demo Studio

https://developer.mozilla.org/en-US/demos/

Chrome Experiments

http://www.chromeexperiments.com/

Creative JS

http://creativejs.com

Things to watch out for

Browser compatibility, amongst others

Creating demos with these technologies is great, but there are a few things to watch out for.

Canvas performance

Optimisation and acceleration

Canvas performance and support.

requestAnimationFrame, hardware acceleration, etc.

WebGL support

Not all browsers have it

Lack of WebGL support in some browsers.

It’s not on IE, Opera, iOS, or Android… yet.

Audio Data API support

Not all browsers have it

Lack of Audio Data API support in browsers.

Right now, only Firefox and Chrome have some sort of Audio Data API.

WebSockets support

Not all browsers have it

And again lack of support, this time with WebSockets.

Learning the browserscene

Tutorials and resources

If you want to learn more about the browserscene and these technologies then you can find all you need online.

Here are just a few of them…

Mozilla Developer Network

https://developer.mozilla.org

Paul Lewis

http://aerotwist.com/lab/

HTML5 Rocks

http://www.html5rocks.com/en/

Libraries and frameworks

Speeding up development

You don’t always have to roll your own solutions, though.

There are a variety of libraries and frameworks out there that provide basic functionality and generally speed up development.

I’m going to go over just a few of them, but I advise you to look for more if these don’t fulfil your requirements; there are a lot more out there.

jQuery

Three.js

Socket.IO

Box2dWeb

Gaming engines, like Impact and Isogenic Engine.

What does the future hold?

Cool stuff coming soon

So what does the future hold for the browserscene?

Joystick controls

No more mouse and keyboard

Joystick DOM events so you can get a console-like experience.

Device APIs

Accessing the microphone and webcam

Devices API to access data from peripherals, like a microphone or webcam.

http://www.w3.org/2009/dap/http://mozillalabs.com/rainbow/2011/08/04/whats-next-rainbow-and-webrtc/

Hardware acceleration

Better performance all round

Better hardware acceleration and performance in all areas.

Rawkets.comHTML5 & WebSockets game.

Twitter sentiment analysisDelving into your soul.

RECENT PROJECTS

Rawkes.comPersonal website and blog

MORE COOL STUFF

ExplicitWeb.co.ukWeb development podcast.

Mozilla Technical EvangelistMy job

ROB HAWKES@robhawkes

Twitter - @robhawkesRawkes - http://rawkes.com

DEV DERBYExperimenting with the latest Web technologies

Manipulate browser history

DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY

Every month

This month is the History API

Win prizes (like an Android)

Next month is Geolocation

Also, you should definitely take part in the Dev Derby, which is a monthly competition run by the Mozilla Developer Network to see what can be done with the latest Web technologies.

This month the focus is on the History API, which allows you to manipulate the history of the browser so things like AJAX don’t break anything.

The winners get cool prizes, like an Android phone. It’s a great excuse to play around with these technologies.

https://developer.mozilla.org/en-US/demos/devderby

Become a canvas master

RAWKES.COM/FOUNDATIONCANVAS

Out now

Paperback and digital formats

Learn how to animate

Make two cool space games

FOUNDATION HTML5 CANVASMy amazing book on canvas, animation, and making games.

THANK YOU

Any questions?

Rob Hawkes

@robhawkes

Thank you.

If you have any questions feel free to grab me on Twitter (@robhawkes), or email rob@rawkes.com