jQuery Realtime Markup

write less, do realtime

I'm attending the jQuery UK 2012 conference in Oxford so it got me thinking about how I could use jQuery with Pusher in a fun and interesting way. I also started thinking about why jQuery seems to be the JavaScript library (54% of the top 17,000 sites use jQuery) to include whenever a web application is built; what makes it so popular? To me, it seems to be that it's simple yet powerful. It's made common tasks simple to perform for advanced developers and advanced tasks accessible to newer developers and designers. Hence the jQuery tagline, "write less, do more".

One of our goals is to make Pusher the go-to technology whenever you want realtime functionality within your web app. We aim to make our libraries as accessible, yet powerful, as possible. So, I thought I'd try and find a way of combining the Pusher JavaScript library with jQuery, and I came up with jQuery Realtime Markup. Why not "write less, do realtime"!

The idea is simple: include jQuery and jQuery Realtime libraries, add HTML5 compliant data- attributes to your HTML markup and watch realtime data stream into your page.

<div class="nba-latest-scores">

   <div data-pusher-channel="warriors-v-nuggets">
     <span>Warriors</span>
     <span data-pusher-event="home_points_updated"
           data-pusher-value="points">0</span>
     <span> - </span>
     <span data-pusher-event="away_points_updated"
           data-pusher-value="points">0</span>
     <span>Nuggets</span>
   </div>

   <div data-pusher-channel="rockets-v-suns">
     <span>Rockets</span>
     <span data-pusher-event="home_points_updated"
           data-pusher-value="points">0</span>
     <span> - </span>
     <span data-pusher-event="away_points_updated"
           data-pusher-value="points">0</span>
     <span>Suns</span>
   </div>

   <div data-pusher-channel="thunder-v-kings">
     <span>Thunder</span>
     <span data-pusher-event="home_points_updated"
           data-pusher-value="points">0</span>
     <span> - </span>
     <span data-pusher-event="away_points_updated"
           data-pusher-value="points">0</span>
     <span>Kings</span>
   </div>

 </div>
 
 <script src="../src/jquery.realtime.js" data-pusher-app-key="d152b997cf7cc629e97c"></script>
    

Let's see this in action

Note: I've written the plugin but haven't had time to write the code that sources and pushes the data so the updates are pushed through the Pusher library, but are generated on the client. Sorry!

The idea is that you specify a channel to subscribe to by placing the data-pusher-channel attribute on an element. Within that element you can identify events to bind to on that channel using the data-pusher-event attribute. Then on, or within, that event you can specify a value to extract from the event data object and inserted into the page using the data-pusher-value attribute. Also, if you add a data-pusher-app-key to the jquery.realtime.js script tag plugin will automatically connect and data will start streaming in.

Hopefully this makes it really easy to enhance a page with realtime data.

The markup looks cluttered!

Yes it does! The attributes are a bit verbose. You can change the data attributes that are used. Have a look at the plugin code to see how.

It might also make a lot of sense to use this in combination with a JavaScript templating library and the markup could be reduced a lot further and a page made much more dynamic.

Code & is this useful?

The code for this idea is available in github so feel free have a play and come up with other ideas. I'd also love to hear if you think this sort of markup is useful. Do you agree that it makes realtime data more easily accessible? What features would you like to see added?

• Flashing updates to make changes more visible
• The ability to call transform or formatting functions when inserting values into the page
• Additional callbacks so values can be derived from two or more other values

For all those at the jQuery UK conference, I hope you are enjoying yourself and please head over if you see me and say 'hi'.