I was interested to read the twitter engineering teams overview of how the newtwitter works.

This is the kind of app that is becoming more and more common, as it becomes viable to build apps in pure javascript, with just a json API as the backend. There are downsides to this kind of development, mostly in the inability for google to index the site - but for an app like twitter which are indexed by google using the pubsub interface (afaik), there’s no reason not to provide a pure javascript / html5 interface for modern browsers.

I haven’t got new twitter yet - so I hit up a friend and got him to send me the URLs for the new twitter javascript. I guessed the pre-closure URLS, tidied them up using html tidy and textmate - and we have these:

Base.js

Base.js seems to contain their extensions to jquery to create the twitter ‘framework’, eg:

  • Logging
  • Debugging
  • Stack traces
  • Browser detection
  • Analytics
  • Page state / history
  • Load templates
  • Form validation
  • Help
  • Autocomplete

It also has some code that uses the anywhere api (I think), to find a user by screenname. It has a bunch of code that has either been handrolled, or gathered together from different jquery plugins (eg timeAgo, numberWithDelimiter).

The really interesting stuff is in phoenix.js though.

Phoenix.js

Newtwitter uses Mustache for their templates. Many of these templates are included in phoenix.js, as twttr.templates. The templates are internationalized and use classes liberally - eg stream-tab-following, stream-tab-pending, delete-saved-search.

If you search on any of these classnames - you’ll find code later in phoenix.js that attaches the appropriate event handler to the html generated by mustache. For example - this fragment:

<div class='delete-saved-search'>
  \n <a href='#' class='delete-saved-search-x'></a>\n <a href='#'>Remove saved search</a>\n
</div>",

Has behaviour attached to it like so:

click({
".delete-saved-search": function(B, A) {
    twttr.dialogs.deleteSavedSearch(twttr.bind(this,
    // ....
    B.stopPropagation();
    B.preventDefault();
    return false
})

I’ve munged the code up a bit here, but you get the basic idea. Phoenix.js includes jquery (the latest release, 1.4.2), Jquery UI (1.8.4), Modernizer (a library for detecting browser support for various html5 functionality), Linkify.

This was just a quick analysis of the newtwitter codebase - but I found all the mentions of twttr.view to be interesting - it seems like the twitter engineering team have built quite a strong framework for javascript apps - I wonder if they’ll release their MVC framework for other developers to create similair apps?