Technologies used in the new Twitter

Redesign Twitter.com, according to the developers, allowed to make the most daring changes in the technology used on the site. With this in mind, they started implementing a new architecture almost entirely in JavaScript. Special attention was paid to the simplicity 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 extracts data in the same way as a mobile site, applications for iPhone, iPad, Android, and other third-party applications. This change made it possible to allocate more resources to the API team, which has made over 40 fixes. At the initial loading of the page and at each customer inquiries, all data is extracted from the highly optimized JSON cache.

Javascript api

A Javascript library was developed to access the REST API @anywhere Twitter, which became 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 helps minimize the number of network requests that are made using Twitter.com. For example, each request for tweets for any period 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, while not affecting the 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 traditional web analogy of related documents, the application uses a page routing system that provides a close connection between URLs and their contents. This allows for “rich” web applications (RIAs) to behave like regular websites. In this connection, it was necessary to develop a "rich" routing model on the client. For this, a routing system was designed to switch between changing pages, managed by a URL hash. When a user navigates through pages, the application caches the pages visited in memory. The problem with the rapid obsolescence of information on these pages was solved with the help of a mechanism that allows the pages to get up-to-date information about events through the JavaScript API, thereby synchronizing them with the general state of the application.

Rendering stack

In order to support search robots and users without JavaScript, it was necessary for the rendering system to work on both the client and the server side. For this, a rendering stack was created and a system for viewing objects was developed, which generates HTML fragments from API objects. Also, the engine features have been enhanced to support string substitution in different languages.
Much attention has been paid to optimizing work in the DOM. For example, delegation of events in all directions was implemented, which allowed using less memory without worrying about nested events. Most of our interfaces are built from reusable components, so event handling was centralized and delegated to several root nodes. It was also minimized the number of redraws in the formation of HTML-structures before they are implemented and merged with relevant data at the stage of rendering HTML-pages, and not using DOM-manipulation.

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 tweet links 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 content that will be received in response to the request. For other media partners, such as TwitPic and YouTube, known mechanisms for embedding resources that can be obtained from the URL were used, thereby reducing the network load and providing general acceleration.

Open source code

Twitter has always chosen open-source technologies and the tradition has continued in the new client. In the 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 innovations are introduced in development here on Twitter, we will be able to return many of them back to the open source community backed by our own technologies.