Building the Realtime User Experience
rheotaxis writes "Many professional web developers have spent years building dynamic, database-driven web applications, but some of us, like myself, want to make the user experience more interactive and instantaneous. The book Building the Realtime User Experience, by Ted Roden, is an introduction to some new techniques making that happen now. New web servers like Cometd and Tornado power solutions that keep HTTP connections open until data is available for the clients requesting it, a technique called 'long-polling.' This means web developers can provide a real-time user experience using HTTP for all sorts of client devices now connecting to the Internet, not just web browsers, but mobile devices as well." Read below for the rest of rheotaxis's review.
Building the Realtime User Experience
author
Ted Roden
pages
320
publisher
O'Reilly Media
rating
8/10
reviewer
rheotaxis
ISBN
0596806159
summary
Shows you how to build realtime user experiences by adding features on your site without making big changes to the existing infrastructure
This book covers SUP and PubSubHubbub syndication, messaging with Bayeux protocol and Cometd, and asynchronous Python using Tornado, contrasting these with well-known client-side JavaScript methods. It then demonstrates how long-polling can implement and integrate chat, IM, SMS, and analytics. The last chapter wraps up with an example using all these technologies, a multi-user, real-time, interactive game using geo-location with mobile clients. Ted's writing style is concise and to the point, focused exclusively on the challenges presented and solved in each chapter, including just enough details for experienced programmers to download and setup the software tools being used, including the Google App Engine. The code samples are straight-forward, but be forewarned, it will be easier for readers with some experience building server-side scripts like PHP, Python, or Java, and a database server like MySQL. On the other hand, even if you never used Google App Engine before, that's OK, because Ted covers that in enough detail to get you started quickly. The sample code wasn't yet available on the O'Reilly web site, so you'll need to type in the code samples to try them. Check the O'Reilly errata page for the book to get a head start making the code work. (Full disclosure: I posted some of the errata.) The sample code for Cometd and Tornado ran easily on my laptop (HP 2.2 GHz with Windows Vista), and should be fine on Linux or Mac. Everything you need is open-source and easily downloaded.
The author explains that real-time web development puts the user at the center of all web interactions, and that developers have struggled with solving the push versus pull problem. The pull method requires multiple, periodic queries for updates from server information feeds, something that wastes server CPU and bandwidth when no changes have occurred, and is compounded by the number of different users making these queries. The push method allows the servers to contact the clients when information feeds have been updated, saving CPU and bandwidth.
RSS was designed for easy syndication of information feeds, but it suffers from the limitations of the pull methodology. While several push technologies have been proposed to solve this problem, only Simple Update Protocol (SUP) and PubSubHubbub are covered in detail here. Both of these are demonstrated with PHP code, so they should be easy to implement on hosted web account with PHP and MySQL. The author explains that while SUP isn't a real push methodology, it does address some the CPU and bandwidth issues. PubSubHubbub, a true push methodology when compared to SUP, is described with an equal amount of detail.
Next, the book covers techniques already familiar to JavaScript programmers who have experience building AJAX enabled web pages. Skim the text and glance at the code and diagrams in Chapter 3, if you already have this experience. The subtitle for this chapter is "Widgets in Pseudorealtime", and the key take away from this chapter is that client-side JavaScript can be used with pull or push technologies, depending upon the server-side implementation. If you don't yet have experience with AJAX, then be sure you can follow these code examples, because AJAX will be used in all the other chapters.
Have you ever wished your blog could send live updates to your readers the moment you post them? You'll learn how, using Bayeux protocol, Java, Cometd, and the Jetty web server. The sample code allows you to grasp how long-polling works with modern browsers. Once a client browser opens an HTTP connection to a web server using a POST method, the server leaves this connection open until it has data to deliver to the client. This chapter suggests using Firebug, a Firefox plugin for debugging web applications from the client side, to discover and track long-polling seasons.
Do you need to handle a large amount of incoming data, and then redisplay it on client browsers with almost no delay? Tornado, the Python web server, provides a solution. Tornado was created by FriendFeed, and made open source after being acquired by Facebook. Kudos to Facebook for making Tornado available. Please read Chapter 5 and 6 together, since they both explain how the Tornado server works. The sample code starts with Python threads that cache a Twitter feed, process and filter it, then send it out to web browsers already connected to Tornado using long-polling and asynchronous callbacks. Tornado is then used to implement a peer to peer chat system using long-polling. Again, each client stays connected to the Tornado server until messages are ready to deliver to each chat participant. Taken together, Chapter 5 and 6 lay the groundwork for more advanced Tornado web applications covered later in the book.
This is followed by two chapters using the Google App Engine to support real-time user experiences even though the Google App Engine does not support long-polling. If you have never used Google App Engine before this, don't worry. The author spends 10 pages explaining how to sign up. Then you build an application in the cloud and connect with your IM client, instead of the web browser. You can make your IM server accept commands and respond with information from other web services. The section, "Setting Up an API", gives you a tantalizing glimpse of possibilities explored later in the book. After adding Python code from the next chapter, you have SMS capabilities. Why would you want to do this? Because it allows users to keep informed while they're away from the web, making SMS another part of the real-time user experience.
Once you have implemented and deployed your real-time application, you can add analytics that give you immediate feedback about user interactions with your site. Instead of paying for a service, you can build your own custom web analytics using Tornado and client-side JavaScript. I especially like the authors approach to summarizing all the incoming web usage data into a single, super-simple, HTML template that is immediately updated as web usage changes. It should satisfy your curiosity to watch users interact with your web site in real-time, and you can make it track IM and SMS traffic connecting to your server too. Finally, the last chapter demonstrates how all the know-how you learn from the rest of the book can be combined in new and highly imaginative ways. The author provides all the details you need to setup a location-based, multi-user, real-time, interactive, game played by users with mobile web devices.
This book would be good for anyone that needs to quickly learn how to use Tornado and integrate it with other web services. It's also helpful for people who want to integrate the Google App Engine with other web services. Whether you're going to build a real-time web experience from the ground up, or just add a few more dynamic features to an existing site, the lessons you can learn from this book will help you.
You can purchase Building the Realtime User Experience from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
The author explains that real-time web development puts the user at the center of all web interactions, and that developers have struggled with solving the push versus pull problem. The pull method requires multiple, periodic queries for updates from server information feeds, something that wastes server CPU and bandwidth when no changes have occurred, and is compounded by the number of different users making these queries. The push method allows the servers to contact the clients when information feeds have been updated, saving CPU and bandwidth.
RSS was designed for easy syndication of information feeds, but it suffers from the limitations of the pull methodology. While several push technologies have been proposed to solve this problem, only Simple Update Protocol (SUP) and PubSubHubbub are covered in detail here. Both of these are demonstrated with PHP code, so they should be easy to implement on hosted web account with PHP and MySQL. The author explains that while SUP isn't a real push methodology, it does address some the CPU and bandwidth issues. PubSubHubbub, a true push methodology when compared to SUP, is described with an equal amount of detail.
Next, the book covers techniques already familiar to JavaScript programmers who have experience building AJAX enabled web pages. Skim the text and glance at the code and diagrams in Chapter 3, if you already have this experience. The subtitle for this chapter is "Widgets in Pseudorealtime", and the key take away from this chapter is that client-side JavaScript can be used with pull or push technologies, depending upon the server-side implementation. If you don't yet have experience with AJAX, then be sure you can follow these code examples, because AJAX will be used in all the other chapters.
Have you ever wished your blog could send live updates to your readers the moment you post them? You'll learn how, using Bayeux protocol, Java, Cometd, and the Jetty web server. The sample code allows you to grasp how long-polling works with modern browsers. Once a client browser opens an HTTP connection to a web server using a POST method, the server leaves this connection open until it has data to deliver to the client. This chapter suggests using Firebug, a Firefox plugin for debugging web applications from the client side, to discover and track long-polling seasons.
Do you need to handle a large amount of incoming data, and then redisplay it on client browsers with almost no delay? Tornado, the Python web server, provides a solution. Tornado was created by FriendFeed, and made open source after being acquired by Facebook. Kudos to Facebook for making Tornado available. Please read Chapter 5 and 6 together, since they both explain how the Tornado server works. The sample code starts with Python threads that cache a Twitter feed, process and filter it, then send it out to web browsers already connected to Tornado using long-polling and asynchronous callbacks. Tornado is then used to implement a peer to peer chat system using long-polling. Again, each client stays connected to the Tornado server until messages are ready to deliver to each chat participant. Taken together, Chapter 5 and 6 lay the groundwork for more advanced Tornado web applications covered later in the book.
This is followed by two chapters using the Google App Engine to support real-time user experiences even though the Google App Engine does not support long-polling. If you have never used Google App Engine before this, don't worry. The author spends 10 pages explaining how to sign up. Then you build an application in the cloud and connect with your IM client, instead of the web browser. You can make your IM server accept commands and respond with information from other web services. The section, "Setting Up an API", gives you a tantalizing glimpse of possibilities explored later in the book. After adding Python code from the next chapter, you have SMS capabilities. Why would you want to do this? Because it allows users to keep informed while they're away from the web, making SMS another part of the real-time user experience.
Once you have implemented and deployed your real-time application, you can add analytics that give you immediate feedback about user interactions with your site. Instead of paying for a service, you can build your own custom web analytics using Tornado and client-side JavaScript. I especially like the authors approach to summarizing all the incoming web usage data into a single, super-simple, HTML template that is immediately updated as web usage changes. It should satisfy your curiosity to watch users interact with your web site in real-time, and you can make it track IM and SMS traffic connecting to your server too. Finally, the last chapter demonstrates how all the know-how you learn from the rest of the book can be combined in new and highly imaginative ways. The author provides all the details you need to setup a location-based, multi-user, real-time, interactive, game played by users with mobile web devices.
This book would be good for anyone that needs to quickly learn how to use Tornado and integrate it with other web services. It's also helpful for people who want to integrate the Google App Engine with other web services. Whether you're going to build a real-time web experience from the ground up, or just add a few more dynamic features to an existing site, the lessons you can learn from this book will help you.
You can purchase Building the Realtime User Experience from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
Look, I'm going to be honest here, I didn't read the whole summary; it's long. But I did read the main part of it, at the beginning, and what it's suggesting is keeping open an HTTP connection so "real-time polling" (which is sort of an oxymoron to begin with) can occur.
I don't know how others feel about this, but to me it feels like.. putting two things together that don't belong. HTTP was never really designed for this sort of thing. Why don't they use straight sockets and TCP/IP? Why does it have to be HTTP?
...and the topic is interesting. This said, I am starting to find the Internet a less pleasant place to be day after day. All the dynamism somehow makes the experience more stressful, and whenever I am just looking for some plain information I feel "bombed" with banners, moving stuff, colors, etc. To the point that I ended up working with a computer disconnected from the Internet to keep focused and relaxed. The Internet is becoming more and more entertainment and less and less focused processing of information. I am not sure it is a great improvement!
My book: Friendly F#, fun with game development and XNA; my game: Galaxy Wars by VSTeam; my gamedev language: Casanova.
Server side push never took off, web sockets probably will.
That's all anyone need know.
Ted: Hey, I'm an Internet User Experience expert. My focus is on delivering quality information online in an intuitive and enjoyable way
O'Reilly: Hey, why don't you write a book about that
Shouldn't this be done with HTML5 on the web 2.0 and have lots of voting buttons, twitter doodads, facebook links etcetera?
I'm not convinced that "tricking" an HTTP connection into staying open really buys you all that much over polling your system every 5 or 10 seconds and seeing if any of your applications need updating. A previous poster mentioned using a regular socket, which seems the right way to go about it if you really do need a persistent connection. I've written applets that do this, and it's not a big deal.
In a band? Use WheresTheGig for free.
If you want a fast, reliable interface, use a thick client. Even after all these years, the web application remains a vastly inferior choice in almost all respects.
Real-time is two words, hyphenated. http://en.wikipedia.org/wiki/Real-time </pedant>
I'd rather just wait for HTML5 WebSockets. I've done a few demos on Google Chrome using node.js, and it's very fast, efficient, and simple to use. Much more practical than "long-polling", since it is a truly persistent bi-directional connection with the server.
Any attempt to do this with HTTP is just hacking the protocol to do something it was never intended to do.
google.slashdot
So, what they're saying is that we simply need applets so Web sites can just run their client application locally on the client machine without needing a lot of setup first. Hmm, I wonder however could we do that?
When trying to figure out how to best put in a screw, the first step is to put down the hammer and go get a screwdriver.
Sounds like this completely ignores the cost of keeping a socket open. For a lot of servers, the number of simultaneous open connections is a far more limited resource than bandwidth available for the occasional request.
keeps requesting my long-polling technique.
Give me Classic Slashdot or give me death!
@Anonymous Coward i hate #sharts
It's basically a telnet GUI, right?
I feel good about this, because I fucking quited today.
It came to a point where I said, no::: I am not going to spend the next months taking your almost-for-some-browsers-working-comet-hack to the next level using insane-RTMP-almost-fullduplex-crackpot-piece-of-shit-protocol, all in the name of getting that nice UI interface. Why?
HTML sucks. Sure, we can be forgiving, probably some teenager who designed it, just experimenting.. But that does not explain why the fuck those in charge haven't realized they could map tags to full fledged classes, have classes written in some bytecode interpreted language and publish those as standards, leave way for custom implementations and be done forever with this bullshit incompatibilities between browsers.
W3C, do you understand? Standardize on a programming language + libraries, graphical primitives,implement some examples then get the hell out of the way. Idiots.
Instead we got CSS...just beyond words...and as far as we can see, we will receive idiotic standards that will never be compatible cross browsers. Bravo W3c, really smart idiot.
Flash sucks. It's crap.
There is no way. Just get it. THERE IS NO WAY.
If you think there is a way. Quit now, tomorrow will only be worse.
It is the protocol itself. HTTransferP and TransmissionCP is designed to transport data - not sit around and wait for it. Yes, tornado is better at handling multiple connections than apache - but it will still result in poor server performance when you have tens or hundreds of thousands of socket descriptors sitting in swapped-out virtual memory.
If you want to build a real-time, instant notification application, you need to forget HTTP and use a protocol suited to the requirement. The best solution I can think of right now is the SUBSCRIBE/NOTIFY model that was designed for SIP. The next best choice would be a straightforward application of SMTP. Both of these deliver data on-demand. Both have been around for several years. Both of them will scale into the millions without using a relay or a masquerade.
Popularity != Good design
Why is jquery placed in the same category as the other stupid shit (that, btw, I totally agree with). I'm not at all a UI programmer, but my understanding (from reading about this) is that jquery is a bunch of javascript UI library components that, as a bonus, frees you from the worry of handling all the various browser incompatibilities. Is there *any* javascript UI library that you would be in favor of rather than jquery ? (I really want to know... not to be confrontational).
Well, to be honest, I was considering if it should be there or not. Jquery-ui actually makes writing "teh web, second edition"-pages a lot more tolerable than without. However, I'd rather not have them at all. :P
I guess that was a misjudgement, but going into detail about why I think javascript itself is bad would be too involved, because there's a lot _good_ than can be done with it.
In fact, JavaScript is kinda neat because it is so abstract that in itself it is pretty much useless without 3rd party libraries
Bot Assisted Blogging
Oh, thanks for making a reasoned reply to my rant, instead of flaming back :)
And no. I do not have any better alternative to offer.
Bot Assisted Blogging
Are you sure you don't have to craft different views for different platforms? A web page designed for a large screen doesn't work so well on a small screen, much less a tiny screen.
Blar.
It's got a big overhead compared to straight JS, which I'm ok because it makes my coding process faster, but judging by how much everybody else here seems to be decrying JS/AJAX because it repurposes HTTP/TCP instead of opening a socket and using a different protocol with less overhead. Is it less efficient than optimum? Yes. But it works better for me than creating discrete applications for every platform, or re-writing my browser-specific code every time. I could do a lot of this with Java, but that doesn't get me onto smartphones as well as HTML/JS/AJAX does.
Now Spring and all that other Java EE stuff, that doesn't increase usability or ease of coding, that I can't stand using. It's mostly marketing without any of the benefits I'm looking for.
I am become
I bought 'Professional XMPP Programming with JavaScript and jQuery' recently. slightly relevant as it uses xmpp/bosh for similar results ('push'). I am using the strophejs javascript library for xmpp/jabber communication.
The Yahoo! User Interface (YUI) is a programmer's dream come true.
What one fool can do, another can. (Ancient Simian Proverb)
You have no "experience" while browsing the Web. When I pick you up by your lapels, and slam you against a wall, I'll announce at about 80 or 100 decibels in your face that you're "having an experience".
And as for browsing speed, overwhelmingly, websites are designed and built by folks on their own system, with the fastest, hottest thing they can afford. Try to find some that were actually tested over the 'Net, using a one or more generation old computer.
Then look at how big those idiot pictures are (hint: nobody browses on a 25" screen or larger, so if each of your pictures is 1M+, the page will take years to load). Then look at all the bloody java and javacsript. I, personally, have built Web pages for a small company or two that were as good looking and flashy (no, I can't point to them for legal reasons) as the ones from Huge Corporations... but I used straight HTML, considered the size of the pics, and edited the page in vi. They load fast. But you've got to use java/javascript/php/ruby/whateverelseishotrightthisminute... bet I can do most of what you can, using std. html.
mark "and I can always add some perl CGI"