Twitter Open Sources Flight, an Event-based Component Framework

| by Abel Avram Follow 9 Followers on Feb 01, 2013. Estimated reading time: 1 minute |

Twitter has open sourced Flight, the JavaScript framework used internally in production to provide functionality for their website.

Twitter Flight is an event-based framework useful for adding functionality to an existing DOM structure. Flight is not modeling data, nor is a HTML rendering framework, it does not deal with request routing, page templates nor browser vs. server rendering. Instead, it is a highly decoupled framework of components which are attached to DOM nodes providing the desired functionality when events are called on these nodes.

Flight components are completely unaware of each other, and one cannot hold a reference to another component. Components are defined separately and instances are created when they are attached to nodes. A component does hold a reference of a node it is attached to. Components then are registered for events and use the DOM’s event mechanism to send and receive events. When a component receives an event, it does not know if the event originates from a node or another component. It just performs the functionality associated with the respective event as established at component definition.

Using this event mechanism, Flight enables developers to write, test, and debug decoupled components without having to rely on other components. A component should work even if other components are not there to do their job.

The framework also defines mixins, small pieces of functionality that can be shared between components and other mixins. Mixins are similar to what interfaces are in OOP languages such as Java or C#.

Twitter started using Flight in production last year when a revamp of their website took place. Now, they open sourced the code under a MIT license, accompanied by a demo application and documentation explaining how to set it up, start creating, testing and debugging components.

Flight has a couple of dependencies: ES5-shim to support older browsers and JQuery for DOM manipulation API. The framework works with all major browsers: Firefox, Safari, Chrome, Opera and IE7+.

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

interfaces by marc prades

interfaces are not mixins and are not needed in a dynamic languages like javascript.

Re: interfaces by Abel Avram

Indeed, interfaces are not mixins. What I was saying was that mixins provide an extension mechanism similar to interfaces.

Re: interfaces by Mark N

Actually, according to this - - it is more like an abstract class

Re: interfaces by Abel Avram

Functionality provided by multiple unrelated abstract classes cannot be combined unless you have multiple inheritance, and many modern languages don't. However, multiple interfaces can be used to extend a class. That's why I said mixins look like interfaces, providing the same extension mechanism. But, of course, they are not interfaces. They just provide similar functionality.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

4 Discuss

Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you