The Realtime Web is Shocking!!

Phil Leggetter & Gary Short

Introduction

An interactive presentation

Agenda - The Realtime Web is Shocking!!

What is realtime?

* Used to be hung-up on this. But now I've decided that it's all about context and keeping things relevant. * If you receive the data and it's still relevant and usable then the delivery time is good enough. * e.g. a tweet 10 seconds after it's been posted * site analytics 10 seconds after a user comes online * Sometimes it's got to be instant: * stock quotes * game moves * alert notifications * break response in a car

What is the realtime web?

* The immediate availability of data * Searchable, discoverable, data available must faster than we'd seen before * The instant delivery of data * A search isn't just a one-off thing any more. You are registering your interest in something you are making a subscription. * Events signify something has just happened. New data is available. * Technology to achieve this has been around for ages, but it's just gone mainstream. * Pub/Sub to the masses * With this technology we can now offer/build: * Realtime data - financial data, sports data, betting odds, where instant updates matter * Notifications: New tweets, facebook status updates, calendar appointment prompts, users coming online prompt * Customer support chat, user to user chat (facebook chat) * Collaboration: Google Draw, Docs, Spreadsheets * Social media reaction/integration: Tweets, Facebook likes, Blog post notifications, Images from TwitPic or yFrog/ImageShack * Games - whether simple gamification updates or true realtime html5 multiplayer games * All of these can be used to improve the UX and UE * UX/UE improvements * We are constantly trying to improve web applications: * HTML * CSS * JavaScript * realtime communication

Examples

Image Source: http://nmap.org/favicon/
* How do we currently use the Internet * How does the realtime web change and enhance that.

Do you agree?

* Have I missed anything? * Do you agree or disagree?

Let's source
some realtime
data

Image Source: http://www.flickr.com/photos/casaleggio_associati/5435906285/

HTML5
WebSockets
Rock!

Focus on WebSockets

* Browser support * Chrome * Firefox * Opera * IE10 on Windows 8 * Flash or Silverlight fallback

WebSocket API (JavaScript) 


        
        
        
        

          * Browser support
            * Chrome
            * Firefox
            * Opera
            * IE10 on Windows 8
            * Flash or Silverlight fallback
        

        
      

      
      

        

          Building a realtime web app -


          But we're not going to use WebSockets directly!
        
      
        
        

        

        
      

      
      

        

          Connecting
        


        

        
        
        
        
Start: jsbin | Working: jsbin

        
        


        

        
      

      
      

        

          Screencast - Connecting
        

        
        
      

      
      

        

          Subscribing to Channels & Binding to Events
        


        

        
        
        
        
Start: jsbin | Working: jsbin

        
        


        

        
      

      
      

        

          Screencast - Subscribing to Channels & Binding to Events
        

        
        
      

      
      

        

          Hooking the data into charts
        

        
        

        
Start: jsbin | Working: jsbin
        
        
        
       
        

        
      

      
      

        

          Screencast - Hooking the data into charts
        

        
        
        
          
        
      

      
      

        

          Demos
        

        
        
Full Working Example

        
        

        

        
      

      
      

        

          Summary
        

        
      

      
      

        

          Questions & Answers
        

        
        
Please rate this talk: http://j.mp/rtw-shocking-dunDDD