Twitter Open Sources Flight, an Event-based Component Framework

by Abel Avram on Feb 01, 2013 |

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


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
General Feedback
Marketing and all content copyright © 2006-2016 C4Media Inc. hosted at Contegix, the best ISP we've ever worked with.
Privacy policy

We notice you're using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.