Flight generator

A Yeoman generator for Flight, Twitter's client-side JavaScript framework. Get up and running with everything you need to create an application.

NOTE: A separate Flight package generator is available for creating standalone Flight components.

Recommended setup

Install Node.js (which comes with npm). It's best to have npm version 1.2.x or above installed.

Next, globally install the Flight generator. This will automatically install Bower and Yo as global dependencies. These tools will help manage your dependencies and generate the boilerplate Flight application.

1

npm install -g generator-flight

Make a new directory, and cd into it:

1

mkdir flight-app && cd $_

You're now ready to generate an app!

Main generator

To generate a Flight-based application:

1

yo flight <app-name>

N.B. All your Node and client-side dependencies will be installed automatically unless you include the --skip-install option.

All generators and their output

Available generators (to be run in the root directory of a project).

• flight <app-name> (aka flight:app)
• flight:component <component-name>
• flight:mixin <mixin-name>
• flight:page <page-name>
• flight:all

flight:app

Scaffolds a Flight application file structure, installs all the library code you need, and correctly configures your test setup. The app generator will prompt you to optionally install Bootstrap or Normalize.css.

Example:

1

yo flight my_app

Produces:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

.
├── app
│   ├── bower_components
│   │   ├── es5-shim
│   │   ├── flight
│   │   ├── jasmine-flight
│   │   ├── jquery
│   │   └── requirejs
│   ├── css
│   │   └── main.css
│   ├── img
│   ├── js
│   │   ├── component
│   │   ├── page
│   │   │   └── default.js
│   │   └── main.js
│   ├── 404.html
│   ├── favicon.ico
│   ├── index.html
│   └── robots.txt
├── node_modules
├── test
│   └── test-main.js
├── .bowerrc
├── .gitattributes
├── .gitignore
├── .jshintrc
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── bower.json
├── gulpfile.js
├── karma.conf.js
└── package.json

Locally installed software

Automatically installs all the Flight framework dependencies, and sets up a Node-based toolchain for your development workflow.

via Bower

• Flight (and its dependencies: ES5 Shim, jQuery)
• RequireJS
• Jasmine jQuery extensions
• Jasmine Flight extensions
• (optional) Bootstrap
• (optional) Normalize.css

via npm

• Flight generator (installed as a local dependency)
• Gulp task runner
• Karma unit test runner
• Node-Static file server

flight:component

Generates a component in app/js/component.

Example:

1

yo flight:component tweet_box

Produces app/js/component/tweet_box.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

  return defineComponent(tweetBox);

  function tweetBox() {
    this.attributes({});
    this.after('initialize', function () {});
  }
});

And the test file test/spec/component/tweet_box.spec.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

describeComponent('component/tweet_box', function () {
  // Initialize the component and attach it to the DOM
  beforeEach(function () {
    this.setupComponent();
  });

  it('should be defined', function () {
    expect(this.component).toBeDefined();
  });

  it('should do something', function () {
    expect(true).toBe(false);
  });
});

flight:mixin

Generates a mixin component in app/js/component.

Example:

1

yo flight:mixin tweet_actions

Produces app/js/component/with_tweet_actions.js:

1
2
3
4
5
6
7
8

define(function (require) {
  return withTweetActions;

  function withTweetActions() {
    this.attributes({});
    this.after('initialize', function () {});
  }
});

And the test file test/spec/component/with_tweet_box.spec.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

describeMixin('component/with_tweet_box', function () {
  // Initialize the component and attach it to the DOM
  beforeEach(function () {
    this.setupComponent();
  });

  it('should be defined', function () {
    expect(this.component).toBeDefined();
  });

  it('should do something');
});

flight:page

Generates a page component in app/js/page.

Example:

1

yo flight:page settings

Produces app/js/page/settings.js:

1
2
3
4
5
6
7
8
9

define(function (require) {
  // var myComponent = require('component/my_component');

  return initialize;

  function initialize() {
    // myComponent.attachTo(document);
  }
});

flight:all

Shortcut that runs flight:app, flight:component my_component, and flight:mixin my_mixin.

Developing your application

The generated application's README contains instructions on how to run the tests, server, and other tasks.

Contributing to this project

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.

• Bug reports
• Feature requests
• Pull requests

Authors

• Nicolas Gallagher

License

Copyright 2013 Twitter, Inc and other contributors.

Licensed under the MIT License.