Flight

Flight is a lightweight, component-based, event-driven JavaScript framework that maps behavior to DOM nodes. It was created at Twitter, and is used by the twitter.com and TweetDeck web applications.

Why Flight?

Flight is only ~5K minified and gzipped. It's built upon jQuery, and has first-class support for AMD and Bower.

Flight components are highly portable and easily testable. This is because a Flight component (and its API) is entirely decoupled from other components. Flight components communicate only by triggering and subscribing to events.

Flight also includes a simple and safe mixin infrastructure, allowing components to be easily extended with minimal boilerplate.

Development tools

Flight has supporting projects that provide everything you need to setup, write, and test your application.

Flight generator Recommended. One-step to setup everything you need to work with Flight.
Flight package generator Recommended. One-step to setup everything you need to write and test a standalone Flight component.
Jasmine Flight Extensions for the Jasmine test framework.
Mocha Flight Extensions for the Mocha test framework.

Finding and writing standalone components

You can browse all the Flight components available at this time. They can also be found by searching the Bower registry:

bower search flight

The easiest way to write a standalone Flight component is to use the Flight package generator:

yo flight-package foo

Installation

If you prefer not to use the Flight generators, it's highly recommended that you install Flight as an AMD package (including all the correct dependencies). This is best done with Bower, a package manager for the web.

npm install -g bower
bower install --save flight

You will have to reference Flight's installed dependencies – ES5-shim and jQuery – and use an AMD module loader like Require.js or Loadrunner.

<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/es5-shim/es5-sham.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script data-main="main.js" src="bower_components/requirejs/require.js"></script>
...

Standalone version

Alternatively, you can manually install the standalone version of Flight, also available on cdnjs. It exposes all of its modules as properties of a global variable, flight:

...
<script src="flight.js"></script>
<script>
  var MyComponent = flight.component(function() {
    //...
  });
</script>

N.B. You will also need to manually install the correct versions of Flight's dependencies: ES5 Shim and jQuery.

Example

A simple example of how to write and use a Flight component. Read the API documentation for a comprehensive overview.

define(function (require) {
  var defineComponent = require('flight/lib/component');

  // define the component
  return defineComponent(inbox);

  function inbox() {
    // define custom functions here
    this.doSomething = function() {
      //...
    }

    this.doSomethingElse = function() {
      //...
    }

    // now initialize the component
    this.after('initialize', function() {
      this.on('click', doSomething);
      this.on('mouseover', doSomethingElse);
    });
  }
});

/* attach an inbox component to a node with id 'inbox' */

define(function (require) {
  var Inbox = require('inbox');

  Inbox.attachTo('#inbox', {
    'nextPageSelector': '#nextPage',
    'previousPageSelector': '#previousPage',
  });
});

Browser Support

Chrome, Firefox, Safari, Opera, IE 7+.

Authors

Thanks for assistance and contributions: @sayrer, @shinypb, @kloots, @marcelduran, @tbrd, @necolas, @fat, @mkuklis, @jrburke, @garann, @WebReflection, @coldhead, @paulirish, @nimbupani, @mootcycle.

Special thanks to the rest of the Twitter web team for their abundant contributions and feedback.

License

Licensed under the MIT License

leoxie/flight