Tomorrow's Web and Future Technologies - WDC2011

EB W ’S ome OW es R R is aw es O ology M chn bH aw k TO te Ro e r utu FHi, I’m Rob Hawkes and I’m here to talk a little about tomorrow’s Web and the awesometechnology that’s coming with it.

If you don’t already know, I work at Mozilla.My official job title is Technical Evangelist, but I prefer what it says on my business card.Part of my job is to engage with developers like yourselves about cool new technologies onthe Web.And for those of you with no idea of what a rawket is, I made a multiplayer game calledRawkets in which players ﬂy around in little rockets and shoot each other in the face with thelatest Web technologies. It’s quite addictive!http://rawkets.com

Please don’t hesitate to ask a question as we go along, but leave it to the end if it can wait.All I ask is that you raise your hand and I’ll get to you as soon as I can.It’s also worth noting that these slides will be online on my blog and the Mozilla Hackswebsite very soon.I’ll include all the links and notes mentioned throughout the talk.

So let’s start on our journey towards tomorrow’s Web…

Created by Phil Banks (@emirpprime)Our ﬁrst stop is HTML5.If you’ve met me before then you probably already know about my slight addiction to HTML5canvas and visual programming.

ipt Scr Java about? 5 & fuss L M at is all the HT h WBut why is it important?Well to put it simply, HTML5 & JavaScript are the underlying technologies behind everythingrelated to the future of the Web.Pretty much every new technology that is coming out within the browser-space is connectedto HTML5 and JavaScript in some way.And what’s great is that every major browser has invested in them, so they won’t be goinganywhere any time soon.But there’s more to it than that.

ies log n o de ch source te he co en t Op nv iew ca yone AnThey are open technologies.Anyone can get involved in their creation; through browser developers like Mozilla, orthrough standards organisations like the W3C.A few weeks ago I was in a W3C meeting to explore what is needed for making games withthese technologies. What was cool was that anyone was allowed to take part; which includedeveryday developers, employees of major browsers, and games companies.Also, these technologies are open in that anyone can view the resulting code that is usedwithin Web pages, which is a fantastic way of learning.

ie s lo g n o ith e c h lop w e t de ve Fre ree to se.F u to FreeThey are free technologies.Anyone can use these technologies without having to pay anything, both for using thetechnology and developing with it.This is unlike closed environments like Flash where you have to pay to use official codeeditors and production environments.

less - in ware lug P soft rty d-pa thir on ce elian orer NomThey are technologies baked directly into the browser, which means no more plugins!No longer do you have to rely on users having third-party software installed to use richmedia.

io n t ila ing m p st co nd te No en ta pm evelo ithd e w tim ve SaHTML5 and JavaScript doesnt require compiling, so development and testing can beextremely rapid.These technologies allow for quickly hacking stuff together to experiment then tidying thingsup later.It’s this rapid nature of JavaScript and HTML5 that make them so fun to develop with.

b le e ra s rop rm Inte ss pla tfo cro orka ttow buil are ey ThThese technologies are built to work across platforms; whether that’s desktop, mobile, TV, oranything else!This makes it great to develop this way because you can be sure that it will work on anyplatform that has support.

o rt p p s u ed se r up po rt ro w ares -b ures ross ajor feat C m ost MAs with any technology on the Web it’s important that you can use it across all the majorbrowsers.Fortunately the bigger features of HTML5 like video are supported by all the major browsers,with some of the newer and smaller features getting better support as time goes on.The situation isn’t perfect but we’re deﬁnitely in a position where these technologies can nowbe used in production.There’s a fantastic website called Can I Use? which lets you know what browsers support eachtechnology - http://caniuse.com

Before we move on I have a little disclaimer…

row or tom tn ow ns er igh ea thes w m ttou se orro te xpec Tom Do noI’ve painted a pretty rosy picture about HTML5 and JavaScript, but I should be honest withyou.The other technologies that I’m going to talk about today are called future technologies for areason.While tonnes of HTML5 and JavaScript technologies already exist and are ready to be used,these other future technologies aren’t fully developed and supported yet.Some are usable today, but for others it may be months, even years before they mature. Somemay never reach a cross-browser state.Consider this talk as inspiration about what the future may hold. An advanced warning aboutsome possible directions the Web is heading.

So with that out of the way, let’s continue on our journey…

e ts ock bS ation e W omm un ic ec l-tim al rea ction ire Bi-dWebSockets is particular favourite of mine.It a JavaScript API that allows you to provide bi-directional real-time communication betweena browser and a server.This means you can instantly push data to and from the user as soon as it becomes available.

JA X A o re eaper o m nd ch N ickera QuBefore WebSockets you would probably have used AJAX to constantly check for changes onthe server.This is overkill in a lot of situations and uses an incredible amount of bandwidth incomparison to WebSockets, and well all know bandwidth doesn’t grow on trees.

e ts ock gs b S hin e W sort so ft ing all Us tfor rea It isgBut forget about bandwidth and just think about what a truly real-time experience can allowyou to do on the Web.WebSockets are being used in a whole variety of situations, particularly where speed isimportant.

in g g am rs y e r pla ye ipla een lt etw u gb M tin ica un mm CoWebSockets is perfect for multiplayer gaming.

Rawkets is the game I mentioned at the beginning that allows you to shoot your friends in theface with the latest Web technologies.It’s still not really at a beta release level yet hence the bugs you might notice in this video,but it’s a good demo of a game created using WebSockets for multiplayer communication.This performance would have been impossible with AJAX.http://rawkets.com

ti cs aly a n pu lse e he l-t im ger on t ea ur fin R ing yo ep KeAnother use of WebSockets that is becoming popular is real-time website analytics.

Gaug.es uses WebSockets to power their real-time website analytics dashboard.Who doesn’t want to know exactly where everyone is on their website at any point in time?It’s totally not creepy.But in all seriousness, knowing analytics data like this in real-time can make all the differencein some situations.http://gaug.es

n t nte co es g in tant u pd at am Ins stre LiveWebSockets is also perfect for subscribing to and distributing a live feed of data.

In another project of mine I used WebSockets to produce a real-time graph of sentiment onTwitter.The way this is done is by using Node.js to scrape tweets using the Twitter Streaming API,calculating the sentiment, then transmitting those values to the browser with WebSockets.This whole process takes just a few milliseconds.

ay d to ble e it sa Us isu t it x, bu flu of tate in as It isYou can definitely use WebSockets today.It’s supported by all the major desktop browsers, which includes IE from version 10, and issupported on iOS as well as Firefox and Opera mobile.However, the support for WebSockets is inconsistent across some browsers as there are manyversions of its specification in existence.It’s very much in a state of flux at the moment and it will probably be a little while until itsettles down and matures.http://caniuse.com/websockets

In the meantime you can use things like Socket.IO, which is a Node.js module that usesWebSockets when possible and falls back to Flash when it’s not supported.http://socket.io

T C bR We ion icat mun om oc ide dv an dio AuRelated to WebSockets but inherently different is WebRTC, which stands for Real-timeCommunications on the Web.It differs from WebSockets because its focus is on video and audio communication, much likeyou see in applications like Skype.

Mozilla is working on WebRTC, alongside Google and Opera.It’s pretty early days.http://www.webrtc.org

But it’s not just a pipe dream, it’s actively being worked on in various permutations byvarious companies.For example, Mozilla have been working on a project called Rainbow, which is a Firefoxaddon that allows you to access the webcam and microphone through nothing more thanJavaScript.http://mozillalabs.com/rainbow

What’s cool is that Rainbow is now shifting development to focus on implementing theWebRTC API, with the aim of not requiring the addon at all.http://mozillalabs.com/rainbow/2011/08/04/whats-next-rainbow-and-webrtc/http://jboriss.wordpress.com/2011/10/19/enabling-real-time-communication-on-the-web-platform/

Even Ericsson have been experimenting with WebRTC.What’s cool about Ericsson is that they got as far as releasing a working prototype that usesWebkit and requires no plugins. It’s pretty amazing!https://labs.ericsson.com/apis/web-real-time-communication/documentation

io n ca t n i TC u m t of W ebR co m uc r rod ee by-p o p ice r t A n ee PA great thing about WebRTC is that it inherently requires a peer to peer infrastructure.This further differentiates it from WebSockets which requires a server in the middle that actsas a mediator for messages sent between browsers.I won’t get into the nitty gritty but the basic reasoning behind why WebRTC needs peer topeer is that you just won’t get the required performance for voice and video communicationif you have to send data via a server. Every millisecond counts.This is great for developers because the peer to peer technology can be used in othersituations outside of those considered by WebRTC.Things like peer to peer gaming (like most RTS games), ﬁle transfers between browsers,amongst a whole range of other possibilities.

Our next stop is just a short distance from WebRTC.

P Is e A evic cript D aS Jav ith arew ardw h ssing ce AcDevice APIs is a catch-all term for the technologies that allow developers to access hardwareand operating system APIs using JavaScript.

At Mozilla we’re working on the WebAPI effort which is our attempt at solving this problem.In other camps it might be referred to as DAP, which is the Device APIs Working Group whoare producing a W3C speciﬁcation for accessing various parts of a device through JavaScript.The approach we’re taking is to try and replicate the functionality of a mobile phone withJavaScript.What APIs would you need to do that?http://hacks.mozilla.org/2011/08/introducing-webapi/http://arewemobileyet.com/

tes uri avo for y f ait tw M Ican no Is AP evice DThere are so many Device APIs in the pipeline when you combine all the efforts by the variousbrowser manufacturers.Here are just a few of my favourites.

PI A re tu phone ap ia C m icro ed era and M cam the ssing ce AcThe Media Capture API will let you access the camera and microphone on a device.Being able to do this with JavaScript will make a whole world of difference in so many areas.For example, instead of requiring a user to upload a proﬁle image you could take one usingthe webcam and use that instead. Simple but effective.You could also do things like using the microphone input for voice recognition in for inputareas. I know Google are already experimenting heavily in this area.

P I C A NF ion eb un icat W m om sc les wire -like RFIDThe WebNFC API is pretty cool.It gives you the ability to transmit and receive data within distances no larger than a fewcentimetres.The idea is that it can be used in phones for things like payment (like the new Barclaycard),travel (think Oyster Card), and ﬁle transfer.https://bugzilla.mozilla.org/show_bug.cgi?id=674741

P I S A SM f said eb uf W cript . ‘N avaS ithJ xtsw te ing nd SeThe WebSMS API isn’t the most glamorous, but the idea of sending text messages withJavaScript is quite appealing.https://bugzilla.mozilla.org/show_bug.cgi?id=674725

P I y A o n lls p h ca Tele receive eb akea nd W MThe WebTelephony API allows you to make and receive phone calls using JavaScript.I can just imagine something like this being used to hook into a Web-based version of Sirithat answers your calls for you if you’re busy.https://bugzilla.mozilla.org/show_bug.cgi?id=674726

P I r A ra to ies Vib hn olog eb nt ec W itho pe youw ating VibrBut my new favourite by far is the WebVibrator API, it just makes me laugh every time I hearit.https://bugzilla.mozilla.org/show_bug.cgi?id=679966

And just to show how fresh the development of these Device APIs is, just this WednesdayOpera released an experimental build with a webcam API built in.http://labs.opera.com/news/2011/10/19/

o* e ck G eb t to r the W titl e oo fo ork ing B system * W ing rat ope AnBoot to Gecko will be the result of Mozilla’s work in this area.It’s an operating system for the Web, focussed particularly on mobile and tablet devices.It’s similar in concept to Google’s Chrome OS, except we’re taking things a little further thanthat with the JavaScript APIs hooked directly into all the capabilities of the device.It’s still early days at the moment but you can expect to hear more about it in the near future.https://wiki.mozilla.org/B2G

PI n A re e ul Sc we rf ull et po F im ple ,y SThe Full Screen API allows you to expand any HTML element to ﬁll the users screen, even ifthe browser isn’t running full screen itself.It’s a really simple API that is useful for immersive visual media like video and games.The Mozilla implementation is not perfect yet because you can’t use the keyboard in full-screen mode, but it’s in the latest Nightly builds and works in all other respects.https://bugzilla.mozilla.org/show_bug.cgi?id=545812http://blog.pearce.org.nz/2011/09/mozilla-full-screen-api-progress-update.htmlhttps://wiki.mozilla.org/Platform/Features/Full_Screen_APIs

ut in p er ett dm ou se B rd an yboa ke the from free reak BAnother simple thing to look forward to is improved input.The ramiﬁcations of improvements in this area are profound for games and Web applications.For too long we’ve put up with simple keyboard and mouse controls for the browser.

P I A tick oys he W eb J t to ole cons he gt gin BrinThe Joystick API is one of the major improvement to input that is coming.Both Mozilla and Google are working an an implementation of this and there is actually anexperimental build of Firefox that has it working.What I ﬁnd most interesting about the Joystick API is that it might be just the thing we needto ﬁnally justify HTML5 gaming on a TV or console.Who wants to use a keyboard and mouse while sitting on the sofa?https://wiki.mozilla.org/JoystickAPI

P I A o ck ace L use no ne pl Mo rso ri cu he gt ockin LThe Mouse Lock API is an attempt at improving the mouse as an input device.It would be used in situations like games and 3D visualisations where the mouse positionrotates or moves you around a 3D space.As it stands there’d still be a cursor moving around the screen causing all sorts of troublewhen you want to click on something in your game.With the new API you can lock your mouse position and stop it from getting in the way andbeing a nuisance.Both Google and Mozilla are working on an implementation of this right now.https://bugzilla.mozilla.org/show_bug.cgi?id=633602

GL eb W form lat sp hic grap 3DNext up is WebGL, which brings the ability to provide advanced 3D graphics and accelerated2D graphic directly within the browser.It’s great for gaming and visualisations.I debated including this as it’s not massively new, but the browser support is pretty lackingand it’s constantly being improved.

Rome is a music video created with WebGL. It’s an amazing example of what the technologycan achieve in a real-world situation given a large team.http://ro.me

This is something I made especially for the ASSEMBLY event in Finland.It’s an audio visualiser that uses WebGL and the HTML5 Audio Data API.http://robhawkes.github.com/webgl-html5-audio-visualiser/

HelloRacer is a little game that lets you drive a Formula One car around your browser. It’s abeautiful example of WebGL in action.http://helloracer.com/webgl/

This is a rather freaky example of how realistic WebGL can be.It’s a demo that shows how well materials like skin can be rendered. This isn’t much unlikethe quality of modern games consoles!http://www.everyday3d.com/j3d/demo/014_Head.html

Tinkercad is probably the best use of WebGL that I’ve seen in a production situation.It’s a Web app that allows you to create 3D objects in your browser using WebGL, then getthem printed, in 3D, and sent to your doorstep in just a few simple clicks. It’s seriouslyawesome.https://tinkercad.com

n s tio plica bsite ap yw e eb ta fanc W ot jus NThe concept of Web apps is something that is gaining a lot of traction at the moment.No doubt this is as a result of the success of native applications on the desktop and mobile,particularly with iOS and Android.

Google are spending a lot of time on Web apps with the Chrome platform.https://chrome.google.com/webstore

It’s something we’re also spending a lot of time on at Mozilla.Although we’re approaching things a little differently.We envisage Web apps to run on any device, any browser, and to be distributed through anystore or website.https://apps.mozillalabs.comhttps://developer.mozilla.org/en/OpenWebApps

se ts a s line yw ay Off ern et an Int he st ed ne WhoOne of the main differences between Web apps and native apps is that native apps can be runoffline.New technologies like the application cache allow for a website or Web app to cachenecessary assets to that it can still run while offline.This includes things like JavaScript ﬁles, CSS and images.Combining this technique with intelligent use of things like local storage will allow yourapplication to continue working even if the Internet connection goes down. You just sync upall the changes when it gets connected again.https://developer.mozilla.org/en/Offline_resources_in_Firefox

nce erie exp scre en like ho me p- op or Ap eskt thed from RunSomething that needs to be tackled with Web apps is how to make them feel like realapplications rather than websites.One way that is being considered is completely removing the browser chrome and runningthe application in it’s own window.This will effectively mean that you have full control of the app UI and it won’t look like it’sbeing run in a browser.

This kind of approach isn’t anything new but it will be the ﬁrst time it will be baked intobrowser themselves.For now you can use things like Fluid, which is a Mac app that lets you turn a website into anapp that you can run from an icon on the desktop.It uses a browser engine behind the scenes but it hides away all the unnecessary chrome so itlooks native.

I currently use this approach for music streaming websites like Grooveshark to turn them intoan app.That way I don’t have to remember which tab they’re open in my browser.

n ts Inte b ejob e W tool for th ht rig he ingt FindWeb Intents is inherently attached to Web apps.It allows services on the Web to tell the browser that they’re capable of performing a speciﬁcaction; like uploading a photo, or posting a message on Twitter.Subsequent Web apps can then refer to this list of actions, or intents as they’re referred to,whenever you want to upload a photo or post a message to Twitter.This means that the browser can intelligently suggest which services are capable ofperforming the required task, rather than displaying them all.It’s going to be massively useful for situations like the sharing of content, performingpayments, etc.http://webintents.org

And that brings us to the end of our journey.

o l g co thin s now e m The timei f so ld o o resh ThSince I began developing on the Web I really can’t remember a time when all the browserswere working together like this on amazing technologies.We can now create rich and immersive applications, visualisations, and games that blur theboundary between the Web and the desktop.All of this with nothing more than the technologies normally used to build a website.We can even build an entire operating system for a phone using these technologies. That stillblows my mind.We really are on the threshold of something awesome here.

Rob Hawkes @robhawkes Rawkes.com Personal website and blog RECENT PROJECTS MORE COOL STUFF Twitter sentiment analysis Rawket Scientist Delving into your soul Technical Evangelist at Mozilla Rawkets.com jsCraft HTML5 & WebSockets game Minecraft port to JavaScriptGet in touch with me on Twitter: @robhawkesFollow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://rawkes.comI’ve recently worked on a project that analysis sentiment on Twitter: http://rawkes.com/blog/2011/05/05/people-love-a-good-smooch-on-a-balconyRawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.comI’m currently experimenting with WebGL to see how feasible a JavaScript port of Minecraftwould be. The working title is jsCraft.

Foundation HTML5 Canvas Out now Paperback and digital formats Become a canvas master Learn how to animate Make two cool space games RAWKES.COM/FOUNDATIONCANVASFoundation HTML5 Canvas is out now on Amazon and other reputable book stores.http://rawkes.com/foundationcanvas

Ask MDN One hour every fortnight Web development topics ASKMDN Hand-picked experts Great discussions @ASKMDN & #ASKMDN ON TWITTERAnd lastly, I’d like to quickly mention Ask MDN which is a project that I’m working on atMozilla.The concept is simple. One hour every fortnight we gather a bunch of experts on Twitter toanswer your questions about a particular topic.We’ve had 4 sessions to date and it’s going down really well. If you follow @AskMDN onTwitter you’ll be sure not to miss the next session.http://twitter.com/AskMDN

O U Y s? K tion N ues A yq TH An R b es wk es Ha wk ob ha ro @Thank you.If you have any questions feel free to grab me on Twitter (@robhawkes), or emailrob@rawkes.com

http://hacks.mozilla.org	801
http://www.skillett.com	41
http://paper.li	17
http://lanyrd.com	10
http://www.newsblur.com	4
http://webcache.googleusercontent.com	3
http://feeds.feedburner.com	1
http://translate.googleusercontent.com	1

Tomorrow's Web and Future Technologies - WDC2011

by Rob Hawkes on Oct 21, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 878

Statistics

Tomorrow’s Web and Future Technologies - WDC2011 — Document Transcript