A Flight.js ‘Hello World’

Twitter’s front-end framework from the ground up

5 min readOct 29, 2013

I noticed that flight.js was missing the typical no frills ‘Hello World’ example, so here goes my stab at one.

In this hello world we will use flight.js' standalone version to create a basic component, which attaches to the DOM and writes out an h1 heading on user click. You can find the source code on Github.

Starting a new project

To install Flight.js you can either use the standalone flight.js file, or get Flight.js through Twitter’s bower front-end package manager.

The later is closer to the way Flight's developers do it in their example app (using RequireJS), but it requires a few more steps, so I decided to go with the standalone for this simple ‘Hello World’ (I’ve put together a separate post on using Flight together with bower, RequireJS and Yeoman).

To start the project create a new folder ‘flightHelloWorld’. In this folder we create our index.html page using the terminal:

touch index.html

Open index.html in the text editor of your choice. First we will use it to link to all the JavaScript files we need for flight:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flight Hello World</title>
    <link rel="stylesheet” href=”/css/main.css">
  </head>
  <body>
    <h1></h1>
    
    <!--[if lt IE 9]>
    <script src="/js/lib/es5-shim.min.js"></script>
    <script src="/js/lib/es5-sham.min.js"></script>
    <![endif]-->    <script src="/js/lib/jquery.min.js"></script>
    <script src="/js/lib/flight.js"></script>
    <script src="/js/main.js"></script>
  </body>
</html>

Notice the use of conditional comments for Internet Explorer around the ES5 shim, it ensures an EcmaScript correct behaviour of IE’s JavaScript implementation.

I have highlighted the different subfolders we’re using, namely js/ for all JavaScript files, css/ for our stylesheets, and then there is also img/ for the image assets (of which we have none for this app).

/css/main.css defines a really basic style for our coming Hello World heading — the empty h1 tag our helloWorld component will be writing text into:

h1 {
  font-family: helvetica, arial, sans-serif;
  font-size: 3em;
  line-height: 1.5em;
  text-align: center;
  border: dotted 1px Gray;
}

And in main.js we define our app’s scope using jQuery’s IIFE pattern:

jQuery(function($) {
  'use strict';
  
  // hello world code goes here});

To start the app you can use the simple http server from npm or fire up a python server by cd-ing into the the app’s directory and running:

python -m SimpleHTTPServer

Using python’s server you can now point your browser to http://localhost:8000/ to checkout the setup.

Our first component

As Dan Webb explains in this video, Flight is all about components — So let’s write our first one!
We define components using flight.component() which takes a constructor function as its argument and returns a Flight component. Let’s create a component and save a reference to it in the helloWorld variable:

var helloWorld = flight.component(function() {
  console.log(‘my first component constructor’);
});

Add this to main.js within the jQuery scope function and open your localhost in a browser. When checking to see the log output in the console you should be seeing nothing. This is because we haven’t attached the component to our DOM yet.
To attach our helloWorld component to the document simply call attachTo on our component in main.js right after the component’s definition:

helloWorld.attachTo(document);

Now if you refresh the page, you should see the string ‘my first component constructor’ printed in the console.

Because our component should end up writing ‘Hello World’ into our h1 tag, let’s attach it to that tag right away.
The attachTo() function accepts DOM nodes, jQuery objects, or CSS selectors as input. Let’s use the later and change the previous line to:

helloWorld.attachTo('h1');

Listening to events

To start making things interesting we want our component to be able to listen and react to events.
First off, let’s give the h1 in index.html the following prompt:

<h1>Click Me!</h1>

Next we need to get our component to listen to click events. This is done with a Flight’s component on() method — which is very much like the jQuery equivalent. It’s first parameter is a string describing the event to listen to, the second is a callback function to be executed when the event is catched.

First let’s add a callback to our component:

var helloWorld = flight.component(function() {
 
  // click event handler
  this.onClick = function() {
    alert('you just clicked the h1');
  };});

Obviously running this will not execute anything as long as we haven’t connected our handler using the on() function. The place to call it is in the flight component’s initialize function.
There is a slight gotcha here in Flight, which is that it doesn't allow us to alter or override a component’s default constructor. Instead we create a hook that is triggered after the component’s initialize:

this.after(“initialize”, function() {});

after() takes two parameters, the first one is a function name, and the second one is a function to be executed on completion of the function named by the first parameter.

So let’s add our event hook using on() in the after(‘initialize’, …). Giving us this component:

 var helloWorld = flight.component(function() {
 
  // click event handler
  this.onClick = function() {
    alert('you just clicked the h1');
  };  // initialize
  this.after('initialize', function() {
    this.on('click', this.onClick);
  });
});

Refresh your browser and start clicking away to enjoy your first alert box generated by Flight.

Manipulating the DOM

The final step in our Hello World is to actually write out our hello message.

Flight.js events pass the same event object into the handler that you can expect from any DOM event:

  // click event handler
  this.onClick = function(event) {
    event.stopPropagation();
    console.log(event.target);    alert(‘you just clicked the h1');
  };

We could use the event object to get hold of its target which fired the event, but since we’re in our component we can simply use Flight’s this.$node. $node allows us to directly access a jQuery object of the DOM element this component was attached to.

Adjust the onClick handler to use $node in order to finally print out our text:

 // click event handler
 this.onClick = function(event) {
   event.stopPropagation();
   this.$node.text('Hello World from Flight.js');
 };

An there we have it. Our helloWorld component is finished.

As a final step let’s demo the power of Flight.js and its reusable components. Add a few more h1 tags to index.html:

<body>
  <h1>Click Me!</h1>
  <h1>Click Me!</h1>
  <h1>Click Me!</h1>
  <h1>Click Me!</h1>
  <h1>Click Me!</h1>
  <h1>Click Me!</h1>
  <h1>Click Me!</h1> ...</body>

In our attachTo() we had ‘h1' as the selector, so what happens when you refresh the page now?

Where to go from here

Below are some links I found useful (some have already been mentioned above). I’ve also written a follow up post on using Flight together with bower, RequireJS and Yeoman. Follow me for future updates.
Thanks for reading!