BT

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

Twitter Open Sources Flight, an Event-based Component Framework

Bookmarks

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
Style

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.

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

Community comments

  • interfaces

    by marc prades /

    Your message is awaiting moderation. Thank you for participating in the discussion.

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

  • Re: interfaces

    by Abel Avram /

    Your message is awaiting moderation. Thank you for participating in the discussion.

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

  • Re: interfaces

    by Mark N /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Actually, according to this - en.wikipedia.org/wiki/Mixin - it is more like an abstract class

  • Re: interfaces

    by Abel Avram /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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

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

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.