Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Twitter Open Sources Flight, an Event-based Component Framework

Twitter Open Sources Flight, an Event-based Component Framework

This item in japanese

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