Github url

flight

by flightjs

flightjs /flight

A component-based, event-driven JavaScript framework from Twitter

6.6K Stars 573 Forks Last release: almost 5 years ago (v1.5.1) MIT License 500 Commits 23 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Please note

Flight is not under active development. New pull requests will not be accepted unless they fix core bugs or security issues.


Flight

Build Status Gitter

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 andTweetDeck web applications.

Example

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');

Installation

Quick start using the pre-built library (aUMD bundle). It exposes all of its modules as properties of a global variable,

flight

.

<!-- jQuery --><script src="//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.

Why Flight?

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 safemixininfrastructure, 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.

Finding and writing components

You can browse all the Flight componentsavailable 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

Browser Support

Chrome, Firefox, Safari, Opera, IE 7+ (requires ES5-shim).

Quick Overview

Here's a brief introduction to Flight's key concepts and syntax. Read the API documentation for a comprehensive overview.

Components (API)

  • A Component is nothing more than a constructor with properties mixed into its prototype.
  • Every Component comes with a set of basic functionality such as event handling and component registration. (see Base API)
  • Additionally, each Component definition mixes in a set of custom properties which describe its behavior.
  • When a component is attached to a DOM node, a new instance of that component is created. Each component instance references the DOM node via its
    node
    property.
  • Component instances cannot be referenced directly; they communicate with other components via events.

Interacting with the DOM

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 in Flight

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.

Mixins (API)

  • In Flight, a mixin is a function which assigns properties to a target object (represented by the
    this
    keyword).
  • A typical mixin defines a set of functionality that will be useful to more than one component.
  • One mixin can be applied to any number of Component definitions.
  • One Component definition can have any number of mixins applied to it.
  • Each Component defines a core mixin within its own module.
  • A mixin can itself have mixins applied to it.

Advice (API)

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.

Debugging (API)

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.

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

Copyright 2013 Twitter, Inc and other contributors.

Licensed under the MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.