Building the Realtime User Experience

Chapter 3. The Dynamic Homepage (Widgets in Pseudorealtime)

Moving past syndication, which primarily gives you benefits on the backend, this chapter looks at dipping our toes into realtime experiences on the frontend side of things. We’re going to start with an example that uses standard pull requests to build a few dynamic widgets to add to any website or homepage. This example will show the power of realtime experiences and serve as a good example of why new technologies are needed to get the most out of modern browsers.

In a change from the concepts in previous chapters, all of these examples can be built using nothing more than HTML, a bit of CSS, and some JavaScript. Not only are they based in the web browser, but there is no server setup to get them up and running. With minor modifications you can easily put any and all of these widgets onto any webpage.

The Basic Widgets

The first widget that we’re going to add to this homepage is a quick view into the trending topics on Twitter (http://twitter.com). This widget will do two things. First, it will use Twitter’s API to find the trending topics on Twitter. Trending topics are keywords that are currently very active in tweets on Twitter. Then, we’ll create a realtime feed of tweets that contain any of those keywords. So if “realtime” is a trending topic, this widget will display any tweet containing the word “realtime” as it comes in.

HTML

Since there is no server-side part to this example, you can put the files ...