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>(akaflight: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
- 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
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.
- Nicolas Gallagher @necolas
Copyright 2013 Twitter, Inc and other contributors.
Licensed under the MIT License.