Take off with Twitter Flight
Back then, I remarked:
Only to never return to it.
It also gave me a chance to use as many cheezy puns as possible with regards to airplanes... and who doesn't love airplanes?
With Flight, you build components.
Think of these components as modules that wrap the behavior of your UI and/or data elements. However, you don't handle these components directly. Rather, components expose events and consume events from other components. In other words, components do not talk to each other directly. Components are completely decoupled and Flight handles the pub/sub communication between them.
In case you're wondering, Flight does offer mixins - shared functionality between components.
In this example, I'm opting to use the Flight Generator to get off the ground, quickly. [Play Laugh Track]
Flight Generator allows you to generate application and component scaffolding for your Flight application - it requires Node.js and Git to be installed.
I'm choosing to use Node here, but you could port these pieces of code to whatever web platform gives you the warm fuzzies.
First, install Flight Generator and generate the scaffolding for your
We're going to keep things simple.
Let's create a simple 'application' that has a textbox and a label. And, as you type in the textbox, it'll update the label. I know, I know, I was wearing my creative cap today.
This will generate the scaffolding for two components that you'll find in
app/js/components. That leaves us with the task of simply filling in the details.
Flight requires an AMD implementation. I prefer require.js, but you may opt for something else. When you create a module, you'll have to export a Flight component module,
flight/lib/component. These components come with the baked-in, basic functionality and event handling that we're about to look at. I want to emphasize that the components below are just scratching the surface when it comes to the Flight API. There's much more to discover, but this is just a blog post to get us out of the gate.
Our input component will have the task of detecting a
keyup event thereby triggering the
inputChange event passing the current value of the binding node,
this.$node.val(), to subscribers of the event (in our case, our output component).
Our output component will have the task of detecting an
inputChange event which will subsequently update the text of its binding node with the incoming value,
data.val. Unlike the input component, which was only listening for the
keyup event from its binding node, the output component will listen for
inputChange from any DOM element within
Our final piece of the puzzle is to bind, or
attachTo, our components to DOM elements - also known as their binding node in the context of Flight. You do so by specifying a
selector and here we're using an
id for both.
index.html that is generated by the Flight Generator and add in the necessary DOM elements to get our example working.
Finally, create an HTTP wrapper and
node app it!
I think it's alive!
Twitter Flight is a simple framework that lives by Separation of Concerns. You build a component and bind it to a DOM element. Components work independently of each other via publication and subscription to component events. Flight doesn't attempt to do anything with routing, templating, rendering or kitchen sinking - and it's fine with that.