Flight is not under active development. New pull requests will not be accepted unless they fix core bugs or security issues.
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.
A simple example of a Flight component.
/* Component definition */
var Inbox = flight.component(inbox);
function inbox() {
this.doSomething = function() { /* ... */ }
this.doSomethingElse = function() { /* ... */ }
// after initializing the component
this.after('initialize', function() {
this.on('click', this.doSomething);
this.on('mouseover', this.doSomethingElse);
});
}
/* Attach the component to a DOM node */
Inbox.attachTo('#inbox');
Quick start using the pre-built
library (a
UMD bundle). It exposes all of its modules as
properties of a global variable, flight
.
<!-- jQuery -->
<script src="https://github.com/flightjs/flight/raw/master//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Flight release -->
<script src="http://flightjs.github.io/release/latest/flight.min.js"></script>
Using npm:
npm install --save flightjs
Using Bower:
bower install --save flight
You will have to load jQuery in your application.
Flight is only ~5K minified and gzipped. It's built upon jQuery.
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.
Flight has supporting projects that provide everything you need to setup, write, and test your application.
Flight generator Recommended. One-step to setup a Flight-based web app.
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.
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 new Flight component is to use the Flight package generator:
yo flight-package foo
Chrome, Firefox, Safari, Opera, IE 7+ (requires ES5-shim).
Here's a brief introduction to Flight's key concepts and syntax. Read the API documentation for a comprehensive overview.
node
property.Once attached, component instances have direct access to their node object via the node
property. (There's
also a jQuery version of the node available via the $node
property.)
Events are how Flight components interact. The Component prototype supplies methods for triggering events as well as for subscribing to and unsubscribing from events. These Component event methods are actually just convenient wrappers around regular event methods on DOM nodes.
this
keyword).In Flight, advice is a mixin ('lib/advice.js'
) that defines before
, after
and around
methods.
These can be used to modify existing functions by adding custom code. All Components have advice mixed in to
their prototype so that mixins can augment existing functions without requiring knowledge
of the original implementation. Moreover, since Components are seeded with an empty initialize
method,
Component definitions will typically use after
to define custom initialize
behavior.
Flight ships with a debug module which can help you trace the sequence of event triggering and binding. By default
console logging is turned off, but you can log trigger
, on
and off
events by means of the following console
commands.
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.
Copyright 2013 Twitter, Inc and other contributors.
Licensed under the MIT License