« Back to home

Book Review: Getting started with Twitter Flight

This is a review for Getting Started with Twitter Flight by Tom Hamshere by Packt Publishing. I've come across Twitter Flight last year in my newsfeed and heard of it in one of the conferences that I've gone to. The framework seems promising but I was already sold on the idea of Backbone.js back then. This is my first actual attempt to dive deeper into what Flight is about. I like that the book is only 130 pages which makes for a good introduction. Each chapter is also brief and roughly about 5 pages each.

Requirements

The book assumes that you have a decent knowledge in JavaScript, jQuery and maybe even Require.js since it's used in the code examples throughout. Since the idea behind Flight is being a component or module based, Require.js is a perfect fit but by no means required.

Flight according to their website is:

Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications.

The author used Require.js on all of his code samples but the only requirements are ES5-shim and jQuery.

Show me some code

Let's say you have this piece of mark up.

<form id="form">  
    <input type="text" id="name" name="name" />
    <input type="submit" id="save" name="save" value=Save />
</form>  

To create a component and set some default attributes and events. I elected not to use Require.js for the sake of simplicity. In the component below, the this.defaultAttrs allows a component to store values which in this case, I'm storing the id of an element and some random text someText.

var aSimpleComponent = flight.component(function () {  
    this.defaultAttrs({
        someText: 'Hello',
        nameElement: '#name'
    });

    this.onSubmit = function (e) {
        e.preventDefault();
        alert(this.attr.someText + ' ' + this.select('nameElement').val());
    };

    // create a hook after the component has been initialized
    this.after('initialize', function () {
        this.on('submit', this.onSubmit);
    });
});

We can then use the component and attach to an existing DOM element.

// Attaching the component to the DOM
aSimpleComponent.attachTo('#container');  

Chapters 1-4

The author starts out with an introduction on Flight and how it differentiates with the likes of Angular.js, Backbone.js, and Ember.js. Having no experience with Flight, I thought that this was a perfect book to slowly introduce me to the framework. The book slowly dives into the concepts and it wasn't until half way through it that I was able to see the "big picture" of building a simple app. These earlier chapters sells the idea of why you should Flight and the reasoning on why Twitter built it.

It then goes on to installation using Bower and Yeoman to scaffold a new Flight application in chapter 4. Installation using the command line is a quick way to pull down the dependencies and get started but isn't necessary at all.

Chapters 5-7

These chapters begins by discussing what are components (which is the basic premise behind Flight). It then defines the 2 types of components which are UI and Data. They're both similar except for their main conceptual responsibilities. A Data component is for data processing and to perform data requests, while a UI component is attached to the DOM and provides the interface, handles user interactions, and event handlers.

Chapters 9-10

I particularly like the chapter 8: event and naming where the author illustrated some fundamentals that covers conventions that anyone that works with JavaScript can benefit from. Chapter 9 covers mixins which allows multiple components to share functionalities. Mixins are basically functions that other "components" can utilize and share so you don't have to keep rewriting the same piece of functionality over and over. This allows for code re-use.

Chapter 10 introduces templating and in the examples, Hogan.js was used to incorporate templates in the components. A component can create be template based or can be attached to an existing UI element.

Hogan.js is another open source project that was created by Twitter which is a reimplementation of Mustache that allows templates to be precompiled on the server side. The advantage of this is skip the compilation process when rendering which is an expensive process. Hogan like other templating libraries is pretty simple to use and usually involes compiling a template into a function which you can then inject data into.

Chapters 11-13

In a nutshell, these chapters covers performance, testing and general architecture when building your Flight application. There's things in this chapter that are beneficial in general that anyone can benefit from (not just building Flight apps).

The main ideas here is to allow individual components to be testable and avoid components from instantiating other components to keep them decoupled. As with any framework, it is always a good idea to think about the individual components upfront including the architecture and how the different pieces ties in together.

Code inconsistencies

I found some mismatch or inconsistencies between the code and the author's instruction. One example for instance is in chapter 10, in the section generating template objects from DOM. I'm not sure if the author changed the code later on, but there's a few instances of this error.

To achieve this, the table row needs to be hidden by default, so it doesn't show on first load.

<ul class="js-task-list">  
    <li class="js-task-item hide"></li>
</ul>  

For reference, I have included the table of contents below.

Table of Contents

  • Chapter 01: What is Flight?
  • Chapter 02: Advantages of Flight
  • Chapter 03: Flight in the Wild
  • Chapter 04: Building a Flight Application
  • Chapter 05: Components
  • Chapter 06: UI Components
  • Chapter 07: Data Components
  • Chapter 08: Event Naming
  • Chapter 09: Mixins
  • Chapter 10: Templating and Event Delegation
  • Chapter 11: Web Applications Performance
  • Chapter 12: Testing
  • Chapter 13: Complexities of Flight Architecture
  • Appendix: Flight API Reference

Conclusion

The book includes a Flight API Reference in the appendix section and provides boiler plate codes to easily get started either building a component, mixins, using advice, and event listeners.

I would recommend this to anyone who is interested in Flight and have a decent JavaScript experience on them. The book is short and keeps the material on point within each chapter. It's a light reading so anyone can finish it in a day or two but in order for you understand the concepts fully, the best way is to try it out and type out the code. Also, check out other components that users has created that you can use for your Flight application.

I think once in a while, it's great to keep an open mind and see how other frameworks operate, and perhaps learn a thing or two about their architecture. Flight is not as popular as the more heavyweight frameworks counterparts but I can see how this can be useful to any project that adheres to a component based architecture approach.

Flight is a promising framework which is a good alternative to Backbone.js using a different approach, being a component based. It's hard to compare the two since Flight is very lightweight and tries to keep it simple and doesn't have Models or Routes or other things that Backbone.js has. This would be for another post so I'll end it here.

Comments

comments powered by Disqus