Twitterpillar - An example app using shared templates
I made the Twitterpillar app as a part of my recent SydJS presentation on sharing templates between the server and the browser.
The app will allow you to enter a twitter screen name and see what that user’s followers have tweeted recently. It’s made using the method of sharing templates between the server and browser which I described in the presentation.
In short, the templates are compiled on the server and used there to entirely render all pages requested. Also, the compiled templates are sent in the form of Javascript functions to the browser so it can update itself when the user performs an action rather than re-requesting the entire HTML page. Sent along with the HTML is the details of the user’s followers in json format. This data is requested by the app to produce the left-nav and follower details panel. It may as well be re-used by the browser so it is sent along at the bottom of the HTML. In this version, that data is not updated unless you refresh the entire page.
The History API is used to change the URL when a follower is selected. The urls the app switches to are normal URLs (i.e. with no #! ‘hashbang’). If a user of the app were to type in and request or refresh the app with one of these proper URLs the HTML for the entire page will be returned from the server with that user selected and their tweets present. This is facilitated by the use of the shared templates.
Using twitterpillar
The twitterpillar app is a node.js app and was developed with node 0.6.
$ git clone git://github.com/dave-elkan/twitterpillar.git
$ cd twitterpillar
$ npm install -d
$ node app.js
Presentation
After running the app, the presentation can be found at http://localhost:3000/static/presso/ or alternatively you can view an online copy here: http://www.edave.net/template-presentation-062012