Successfully reported this slideshow.
Your SlideShare is downloading. ×

Tomorrow's Web and Future Technologies - WDC2011

Tomorrow's Web and Future Technologies - WDC2011

Download to read offline

The future of the Web is awesome, it's as simple as that. Just think about it, we'll soon have the ability to construct an entire phone OS with HTML5 and JavaScript. Now that is seriously cool! But what are the technologies that are coming, and which ones should you be keeping an eye on? In this session, Rob will give you an insight into the future of the Web, highlighting some the key technologies that are moving it into a new era.

The future of the Web is awesome, it's as simple as that. Just think about it, we'll soon have the ability to construct an entire phone OS with HTML5 and JavaScript. Now that is seriously cool! But what are the technologies that are coming, and which ones should you be keeping an eye on? In this session, Rob will give you an insight into the future of the Web, highlighting some the key technologies that are moving it into a new era.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Tomorrow's Web and Future Technologies - WDC2011

  1. 1. EB W ’S ome OW es R R is aw es O ology M chn bH aw k TO te Ro e r utu F Hi, I’m Rob Hawkes and I’m here to talk a little about tomorrow’s Web and the awesome technology that’s coming with it.
  2. 2. 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 on the Web. And for those of you with no idea of what a rawket is, I made a multiplayer game called Rawkets in which players fly around in little rockets and shoot each other in the face with the latest Web technologies. It’s quite addictive! http://rawkets.com
  3. 3. 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 Hacks website very soon. I’ll include all the links and notes mentioned throughout the talk.
  4. 4. So let’s start on our journey towards tomorrow’s Web…
  5. 5. Created by Phil Banks (@emirpprime) Our first stop is HTML5. If you’ve met me before then you probably already know about my slight addiction to HTML5 canvas and visual programming.
  6. 6. ipt Scr Java about? 5 & fuss L M at is all the HT h W But why is it important? Well to put it simply, HTML5 & JavaScript are the underlying technologies behind everything related to the future of the Web. Pretty much every new technology that is coming out within the browser-space is connected to HTML5 and JavaScript in some way. And what’s great is that every major browser has invested in them, so they won’t be going anywhere any time soon. But there’s more to it than that.
  7. 7. ies log n o de ch source te he co en t Op nv iew ca yone An They are open technologies. Anyone can get involved in their creation; through browser developers like Mozilla, or through standards organisations like the W3C. A few weeks ago I was in a W3C meeting to explore what is needed for making games with these technologies. What was cool was that anyone was allowed to take part; which included everyday developers, employees of major browsers, and games companies. Also, these technologies are open in that anyone can view the resulting code that is used within Web pages, which is a fantastic way of learning.
  8. 8. ie s lo g n o ith e c h lop w e t de ve Fre ree to se.F u to Free They are free technologies. Anyone can use these technologies without having to pay anything, both for using the technology and developing with it. This is unlike closed environments like Flash where you have to pay to use official code editors and production environments.
  9. 9. less - in ware lug P soft rty d-pa thir on ce elian orer Nom They 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 rich media.
  10. 10. io n t ila ing m p st co nd te No en ta pm evelo ithd e w tim ve Sa HTML5 and JavaScript doesn't require compiling, so development and testing can be extremely rapid. These technologies allow for quickly hacking stuff together to experiment then tidying things up later. It’s this rapid nature of JavaScript and HTML5 that make them so fun to develop with.
  11. 11. b le e ra s rop rm Inte ss pla tfo cro orka ttow buil are ey Th These technologies are built to work across platforms; whether that’s desktop, mobile, TV, or anything else! This makes it great to develop this way because you can be sure that it will work on any platform that has support.
  12. 12. o rt p p s u ed se r up po rt ro w ares -b ures ross ajor feat C m ost M As with any technology on the Web it’s important that you can use it across all the major browsers. 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 definitely in a position where these technologies can now be used in production. There’s a fantastic website called Can I Use? which lets you know what browsers support each technology - http://caniuse.com
  13. 13. Before we move on I have a little disclaimer…
  14. 14. row or tom tn ow ns er igh ea thes w m ttou se orro te xpec Tom Do no I’ve painted a pretty rosy picture about HTML5 and JavaScript, but I should be honest with you. The other technologies that I’m going to talk about today are called future technologies for a reason. 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. Some may never reach a cross-browser state. Consider this talk as inspiration about what the future may hold. An advanced warning about some possible directions the Web is heading.
  15. 15. So with that out of the way, let’s continue on our journey…
  16. 16. e ts ock bS ation e W omm un ic ec l-tim al rea ction ire Bi-d WebSockets is particular favourite of mine. It a JavaScript API that allows you to provide bi-directional real-time communication between a browser and a server. This means you can instantly push data to and from the user as soon as it becomes available.
  17. 17. JA X A o re eaper o m nd ch N ickera Qu Before WebSockets you would probably have used AJAX to constantly check for changes on the server. This is overkill in a lot of situations and uses an incredible amount of bandwidth in comparison to WebSockets, and well all know bandwidth doesn’t grow on trees.
  18. 18. e ts ock gs b S hin e W sort so ft ing all Us tfor rea It isg But forget about bandwidth and just think about what a truly real-time experience can allow you to do on the Web. WebSockets are being used in a whole variety of situations, particularly where speed is important.
  19. 19. in g g am rs y e r pla ye ipla een lt etw u gb M tin ica un mm Co WebSockets is perfect for multiplayer gaming.
  20. 20. Rawkets is the game I mentioned at the beginning that allows you to shoot your friends in the face 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
  21. 21. ti cs aly a n pu lse e he l-t im ger on t ea ur fin R ing yo ep Ke Another use of WebSockets that is becoming popular is real-time website analytics.
  22. 22. 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 difference in some situations. http://gaug.es
  23. 23. n t nte co es g in tant u pd at am Ins stre Live WebSockets is also perfect for subscribing to and distributing a live feed of data.
  24. 24. In another project of mine I used WebSockets to produce a real-time graph of sentiment on Twitter. 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.
  25. 25. ay d to ble e it sa Us isu t it x, bu flu of tate in as It is You can definitely use WebSockets today. It’s supported by all the major desktop browsers, which includes IE from version 10, and is supported on iOS as well as Firefox and Opera mobile. However, the support for WebSockets is inconsistent across some browsers as there are many versions 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 it settles down and matures. http://caniuse.com/websockets
  26. 26. In the meantime you can use things like Socket.IO, which is a Node.js module that uses WebSockets when possible and falls back to Flash when it’s not supported. http://socket.io
  27. 27. T C bR We ion icat mun om oc ide dv an dio Au Related to WebSockets but inherently different is WebRTC, which stands for Real-time Communications on the Web. It differs from WebSockets because its focus is on video and audio communication, much like you see in applications like Skype.
  28. 28. Mozilla is working on WebRTC, alongside Google and Opera. It’s pretty early days. http://www.webrtc.org
  29. 29. But it’s not just a pipe dream, it’s actively being worked on in various permutations by various companies. For example, Mozilla have been working on a project called Rainbow, which is a Firefox addon that allows you to access the webcam and microphone through nothing more than JavaScript. http://mozillalabs.com/rainbow
  30. 30. What’s cool is that Rainbow is now shifting development to focus on implementing the WebRTC 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/
  31. 31. Even Ericsson have been experimenting with WebRTC. What’s cool about Ericsson is that they got as far as releasing a working prototype that uses Webkit and requires no plugins. It’s pretty amazing! https://labs.ericsson.com/apis/web-real-time-communication/documentation
  32. 32. 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 P A 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 acts as a mediator for messages sent between browsers. I won’t get into the nitty gritty but the basic reasoning behind why WebRTC needs peer to peer is that you just won’t get the required performance for voice and video communication if 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 other situations outside of those considered by WebRTC. Things like peer to peer gaming (like most RTS games), file transfers between browsers, amongst a whole range of other possibilities.
  33. 33. Our next stop is just a short distance from WebRTC.
  34. 34. P Is e A evic cript D aS Jav ith arew ardw h ssing ce Ac Device APIs is a catch-all term for the technologies that allow developers to access hardware and operating system APIs using JavaScript.
  35. 35. 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 who are producing a W3C specification 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 with JavaScript. What APIs would you need to do that? http://hacks.mozilla.org/2011/08/introducing-webapi/ http://arewemobileyet.com/
  36. 36. tes uri avo for y f ait tw M Ican no Is AP evice D There are so many Device APIs in the pipeline when you combine all the efforts by the various browser manufacturers. Here are just a few of my favourites.
  37. 37. PI A re tu phone ap ia C m icro ed era and M cam the ssing ce Ac The 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 profile image you could take one using the webcam and use that instead. Simple but effective. You could also do things like using the microphone input for voice recognition in for input areas. I know Google are already experimenting heavily in this area.
  38. 38. P I C A NF ion eb un icat W m om sc les wire -like RFID The WebNFC API is pretty cool. It gives you the ability to transmit and receive data within distances no larger than a few centimetres. The idea is that it can be used in phones for things like payment (like the new Barclaycard), travel (think Oyster Card), and file transfer. https://bugzilla.mozilla.org/show_bug.cgi?id=674741
  39. 39. P I S A SM f said eb uf W cript . ‘N avaS ithJ xtsw te ing nd Se The WebSMS API isn’t the most glamorous, but the idea of sending text messages with JavaScript is quite appealing. https://bugzilla.mozilla.org/show_bug.cgi?id=674725
  40. 40. P I y A o n lls p h ca Tele receive eb akea nd W M The 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 Siri that answers your calls for you if you’re busy. https://bugzilla.mozilla.org/show_bug.cgi?id=674726
  41. 41. P I r A ra to ies Vib hn olog eb nt ec W itho pe youw ating Vibr But my new favourite by far is the WebVibrator API, it just makes me laugh every time I hear it. https://bugzilla.mozilla.org/show_bug.cgi?id=679966
  42. 42. And just to show how fresh the development of these Device APIs is, just this Wednesday Opera released an experimental build with a webcam API built in. http://labs.opera.com/news/2011/10/19/
  43. 43. o* e ck G eb t to r the W titl e oo fo ork ing B system * W ing rat ope An Boot 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 than that 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
  44. 44. PI n A re e ul Sc we rf ull et po F im ple ,y S The Full Screen API allows you to expand any HTML element to fill the users screen, even if the 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=545812 http://blog.pearce.org.nz/2011/09/mozilla-full-screen-api-progress-update.html https://wiki.mozilla.org/Platform/Features/Full_Screen_APIs
  45. 45. ut in p er ett dm ou se B rd an yboa ke the from free reak B Another simple thing to look forward to is improved input. The ramifications 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.
  46. 46. P I A tick oys he W eb J t to ole cons he gt gin Brin The 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 an experimental build of Firefox that has it working. What I find most interesting about the Joystick API is that it might be just the thing we need to finally 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
  47. 47. P I A o ck ace L use no ne pl Mo rso ri cu he gt ockin L The 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 position rotates or moves you around a 3D space. As it stands there’d still be a cursor moving around the screen causing all sorts of trouble when 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 and being a nuisance. Both Google and Mozilla are working on an implementation of this right now. https://bugzilla.mozilla.org/show_bug.cgi?id=633602
  48. 48. GL eb W form lat sp hic grap 3D Next up is WebGL, which brings the ability to provide advanced 3D graphics and accelerated 2D 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 lacking and it’s constantly being improved.
  49. 49. Rome is a music video created with WebGL. It’s an amazing example of what the technology can achieve in a real-world situation given a large team. http://ro.me
  50. 50. 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/
  51. 51. HelloRacer is a little game that lets you drive a Formula One car around your browser. It’s a beautiful example of WebGL in action. http://helloracer.com/webgl/
  52. 52. 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 unlike the quality of modern games consoles! http://www.everyday3d.com/j3d/demo/014_Head.html
  53. 53. 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 get them printed, in 3D, and sent to your doorstep in just a few simple clicks. It’s seriously awesome. https://tinkercad.com
  54. 54. n s tio plica bsite ap yw e eb ta fanc W ot jus N The 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.
  55. 55. Google are spending a lot of time on Web apps with the Chrome platform. https://chrome.google.com/webstore
  56. 56. 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 any store or website. https://apps.mozillalabs.com https://developer.mozilla.org/en/OpenWebApps
  57. 57. se ts a s line yw ay Off ern et an Int he st ed ne Who One of the main differences between Web apps and native apps is that native apps can be run offline. New technologies like the application cache allow for a website or Web app to cache necessary assets to that it can still run while offline. This includes things like JavaScript files, CSS and images. Combining this technique with intelligent use of things like local storage will allow your application to continue working even if the Internet connection goes down. You just sync up all the changes when it gets connected again. https://developer.mozilla.org/en/Offline_resources_in_Firefox
  58. 58. nce erie exp scre en like ho me p- op or Ap eskt thed from Run Something that needs to be tackled with Web apps is how to make them feel like real applications rather than websites. One way that is being considered is completely removing the browser chrome and running the 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’s being run in a browser.
  59. 59. This kind of approach isn’t anything new but it will be the first time it will be baked into browser themselves. For now you can use things like Fluid, which is a Mac app that lets you turn a website into an app 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 it looks native.
  60. 60. I currently use this approach for music streaming websites like Grooveshark to turn them into an app. That way I don’t have to remember which tab they’re open in my browser.
  61. 61. n ts Inte b ejob e W tool for th ht rig he ingt Find Web Intents is inherently attached to Web apps. It allows services on the Web to tell the browser that they’re capable of performing a specific action; 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 of performing the required task, rather than displaying them all. It’s going to be massively useful for situations like the sharing of content, performing payments, etc. http://webintents.org
  62. 62. And that brings us to the end of our journey.
  63. 63. o l g co thin s now e m The timei f so ld o o resh Th Since I began developing on the Web I really can’t remember a time when all the browsers were working together like this on amazing technologies. We can now create rich and immersive applications, visualisations, and games that blur the boundary 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 still blows my mind. We really are on the threshold of something awesome here.
  64. 64. 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 JavaScript Get in touch with me on Twitter: @robhawkes Follow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://rawkes.com I’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-balcony Rawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.com I’m currently experimenting with WebGL to see how feasible a JavaScript port of Minecraft would be. The working title is jsCraft.
  65. 65. Foundation HTML5 Canvas Out now Paperback and digital formats Become a canvas master Learn how to animate Make two cool space games RAWKES.COM/FOUNDATIONCANVAS Foundation HTML5 Canvas is out now on Amazon and other reputable book stores. http://rawkes.com/foundationcanvas
  66. 66. Ask MDN One hour every fortnight Web development topics ASKMDN Hand-picked experts Great discussions @ASKMDN & #ASKMDN ON TWITTER And lastly, I’d like to quickly mention Ask MDN which is a project that I’m working on at Mozilla. The concept is simple. One hour every fortnight we gather a bunch of experts on Twitter to answer your questions about a particular topic. We’ve had 4 sessions to date and it’s going down really well. If you follow @AskMDN on Twitter you’ll be sure not to miss the next session. http://twitter.com/AskMDN
  67. 67. 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 email rob@rawkes.com

×