Twitter Flight is an open source library from Twitter used heavily in their front end JavaScript. It offers a lightweight way to define the behavior of and communication between "components," which are well-defined fragments of a page meant for progressive enhancement.
Flight was written to solve some of the performance issues Twitter suffered from during its misguided adventure with hashbang URLs. Twitter optimized for a synthetic benchmark they call "Time to First Tweet," which is the amount of time between navigating to a Twitter page and displaying the first tweet in the timeline. The fastest possible way to display such content is to render the page on the server and send it to the client without requiring any client-side JavaScript to display it. Flight is the natural consequence of that observation - components (as pre-rendered HTML) already exist on the page and need only to have enhanced behaviors attached, as opposed to rendering the HTML in JavaScript on the client.
This book was written for the curious JavaScript developer who learns new libraries by hacking on examples or personal projects. We walk through developing a simple sample application (an RSS reader) using Twitter Flight and supporting libraries. Everything from basic components like tabs to remote data fetching is covered, highlighting the benefits Flight offers for event-driven applications.
Some familiarity with JavaScript is assumed, and some understanding of the DOM Event Model will help. Flight offers a convenient API to trigger and listen for custom events that hides most of the complexity. The parts Flight doesn't shield you from are covered in chapter 1. Lastly, though Flight depends on jQuery, it isn't critical for development.
Flight was explicitly designed for the "progressive enhancement" paradigm, where the HTML comes pre-rendered and the JavaScript offers additional functionality on top of standard HTML. Twitter uses Flight to offer a "single page application"-like experience for reading and writing tweets in modern browsers, but even with Javascript disabled you can still use most of Twitter's site. Flight isn't limited to just single-page apps; it's lightweight enough to be re-run on every page in a multi-page site without degrading your users' experience.
If your site's content would be spread over several pages and still offer some common functionality between each page, Flight could help in attaching behavior to the common components. Heavier frameworks like Angular.js or Backbone.js have significant initialization costs when a page first loads, which they offset by running once and loading new data incrementally. This is normally accomplished by initially loading a "base" page (hence "single page applications") and then fetching the data, but this introduces another problem: how do you display the base page and resolve deep links into your site's content in a way that works as expected for normal users and show the correct static data for search crawlers to index? Flight sidesteps the whole issue and assumes that the static site will always be served, and component behaviors are attached after the page loads. It's lightweight enough that reloading all of the JavaScript and reattaching all event listeners is faster than the initialization of a single page app framework. It also requires fewer client-server round trips; one for the page, one for the JavaScript, and one for the stylesheet, as opposed to the additional request for the data a single page app would need.
Flight is well suited to sites with lots of user interaction and server-based static content, but doesn't hold up well for data-driven sites. It explicitly prevents direct component interaction to force developers to use the event-driven design patterns it was built on. This makes it rather difficult to implement the synchronizable models of Backbone.js, or the data binding of Angular.js. Every component has to manage its own state and can't inspect the state of child components, since all cross-component communication occurs via events. If rendering a static page for search crawlers isn't a concern, as with rich web apps like Gmail, or your application needs robust data synchronization, as with Google Docs, Flight may not be the best choice.
As a final note, Flight is not a framework like AngularJS or Backbone.js. It is a component library that specifically solves the problem of on-page progressive enhancement. It should be used as a part of a larger ecosystem of libraries that, together, solve the specific problems of your app. In this book, we introduce supporting libraries where needed to develop a fully functional app, and aim to highlight Flight's role in the application.
As of this writing, the only result for "Twitter Flight Tutorial" on Google is Issue #23: "Getting Started" tutorial, a GitHub issue on the Twitter Flight repository requesting a tutorial for Twitter Flight. It's a fledgling library with one major implementation (Twitter itself) and very little example code for curious developers to learn from. In short, there's a void in learning resources that this book aims to fill. I draw on years of JavaScript development experience and insight gained from developing fully featured apps with Flight to explain each of its features and the role they play in designing and developing an application.
This book introduces each piece of Twitter Flight as necessary to implement a particular aspect of our example application. It aims to provide a complete guide to the various features Flight offers, with enough example code to demonstrate purpose or function when an explanation simply won't do. As I mentioned earlier, this book is aimed at those who learn by getting their hands dirty--so clone the sample application repository, load up the app to get a feel for what we'll be building, and let's get started.
Scott Rabin is the Front End Technical Lead for Huddler, Inc., a forum platform and media company. When he's not working on bringing communities together, he's working on JavaScript utility libraries and web-based home theater software. You can find him on GitHub: https://github.com/scottrabin.
There has been error in communication with Booktype server. Not sure right now where is the problem.
You should refresh this page.