generator-flight

Generator for scaffolding out a Flight web app

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.

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.

npm install -g generator-flight

Make a new directory, and cd into it:

mkdir flight-app && cd $_

You're now ready to generate an app!

To generate a Flight-based application:

yo flight <app-name>

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

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

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:

yo flight my_app

Produces:

.
├── 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

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

via Bower

via npm

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

Generates a component in app/js/component.

Example:

yo flight:component tweet_box

Produces app/js/component/tweet_box.js:

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:

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

Generates a mixin component in app/js/component.

Example:

yo flight:mixin tweet_actions

Produces app/js/component/with_tweet_actions.js:

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:

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

Generates a page component in app/js/page.

Example:

yo flight:page settings

Produces app/js/page/settings.js:

define(function (require) {
  // var myComponent = require('component/my_component'); 
 
  return initialize;
 
  function initialize() {
    // myComponent.attachTo(document); 
  }
});

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

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

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

Copyright 2013 Twitter, Inc and other contributors.

Licensed under the MIT License.