Technologies Used on New Twitter

The redesign of Twitter.com, according to the developers, allowed to make the most daring changes in the technologies used on the site. With this in mind, they started implementing the new architecture almost entirely in JavaScript. Particular attention was paid to ease of development, extensibility and performance. This review describes some unique solutions developed by Twitter engineers.

Client API

One of the most important architectural changes was that twitter.com became a client of its own API. It retrieves data in the same way as a mobile site, applications for iPhone, iPad, Android, and other third-party applications. This change allowed more resources to be allocated to the API team, which introduced more than 40 fixes. At the page’s initial loading and every time clients access, all data is retrieved from the highly optimized JSON cache.

Javascript API

The Javascript library was developed to access Twitter REST API @anywhere, which was a good starting point for the development of the entire project. The Javascript API provides functions for extracting and cleverly caching data on the client side, simultaneously in memory and localStorage, which minimizes the number of network requests that are made when using Twitter.com. For example, each tweet request for some period of time contains related user data. As a result, user objects are actively cached, and when viewing a profile, it is not necessary to additionally request user data.
Another feature of the Javascript API is that it provides event notifications before and after each API call. This allows you to register changing components, instantly respond and make appropriate changes to the user interface, at the same time without affecting immutable components based on the same data.

Page management

One of the goals of the project was to make page navigation easier and faster. Based on the web’s traditional analogy to related documents, the application uses a page routing system that provides a close link between URLs and their contents. This allows rich Web applications (RIAs) to behave like regular websites. In this connection, it was required to develop a “rich” client routing model. To do this, a routing system was designed to switch between changing pages, controlled by a URL hash. When a user navigates through pages, the application caches visited pages in memory. The problem with the rapid obsolescence of information on these pages was solved using a mechanism that allows pages to receive relevant information about events through the JavaScript API.

Rendering stack

In order to support search robots and users without JavaScript, it was required that the rendering system work both on the client and server sides. For this, a rendering stack was created and an object viewing system was developed that generates HTML fragments from API objects. The engine has also been expanded to support string substitution in different languages.
Much attention was paid to optimizing work in the DOM. For example, event delegation was implemented in all directions, which allowed to use less memory without worrying about nested events. Most of our interfaces are built from reusable components, so event processing was centralized and delegated to several root nodes. The number of redraws during the formation of HTML structures was also minimized before they were implemented and combined with relevant data at the stage of rendering HTML pages, and not using DOM manipulations.

Media integration

One of the most important functions of the new engine is the ability to embed third-party content directly on the site using a tweet link to one of our content partners. For most of them, such as Kiva or Vimeo, the oEmbed standard was used, which makes it easy to make a JSON-P request to the domain of the content provider and embed the content that will be received in response to the request. Other media partners, such as TwitPic and YouTube, used well-known mechanisms for embedding resources that can be obtained from URLs, thereby reducing network load and providing overall acceleration.

Open source

Twitter has always chosen open-source technology and the tradition has been continued in the new client. In development, jQuery, Mustache, LABjs, Modernizr and many other open-source scripts and jQuery plugins were used. The developers are extremely grateful to the authors of these libraries and many other people from the JavaScript community for their efforts in writing open JavaScript code. We hope that after introducing innovations while developing here on Twitter, we will be able to bring many of them back to the open source community backed up by our own technologies.