Flight - new js framework from Twitter

Today, the Twitter team introduced to the public its own framework. Flight is a lightweight component javascript framework, each component of which describes the behavior of elements on the page. In fact, you most likely already saw Flight in action, because Twitter uses it for its applications. You can see a demonstration of the framework's capabilities in the form of a simple mail client ( github code ).

The new framework uses ES5-Shim to support ES5 in older browsers and jQuery to manipulate the DOM. You will also need one of AMD's implementations, for example require.js or loadrunner.

Why do we need another framework ?!

According to the developers, Flight differs from existing frameworks in that it does not impose on you any approach for displaying data in the application. He doesn’t care how you sent the request, which template engine you use or how you render your code - on the server or client. While other frameworks force developers to dance around their architecture, Flight integrates into an existing document, linking its functionality directly to DOM nodes.

This not only prevents the need to produce additional data structures, which in turn make the application architecture grow by leaps and bounds, but also allows us to take advantage of the functionality we need using native browser capabilities. For example, we get custom event propagation without a single line of code, and our handlers will work equally well with both custom and native events.

How does he work?

Flight provides a strict division of labor. After creating the component, you cannot access it from the outside. In this regard, components cannot refer to each other, they cannot be seen in the global scope. This is done intentionally, so that instead of interacting directly with each other, components trigger events that other components can subscribe to.

What is a component?

• A component is nothing more than a constructor with properties that are mixed into its prototype.
• Each component comes with a set of basic functions, such as self-registration and event processing.
• In addition, each Component has its own properties, which determine its behavior.
• When a component attaches to a DOM node, a new instance is automatically created. Each component can access its instances through the node property.
• Components cannot refer to each other, they communicate exclusively through events.

Why events?

First of all, events are self-sufficient. When a component raises an event, it does not suspect whether someone received it or not. This property allows the developer to consider each component separately, instead of remembering all the connections and discussing the growing complexity of the application as a whole.

By allowing elements to convey events as component events, the entire page literally works for us:

• We get a system for disseminating events without making any effort.
• A component can subscribe to all events at the document level or respond only to certain events occurring on a particular element.
• Subscribed components do not distinguish between custom events from other components (for example, dataMailItemsServed) and native element events (for example, click) and handle both types of events in the same way.

Mobility and Testing

Each component is an AMD module, which, in addition to the minimum set of standard Flight dependencies, has no connections with the outside world. Thus, this component will respond to the transmitted events, regardless of the environment. This makes testing simple and reliable - events, in fact, are the only input and can be easily reproduced when writing tests. You can even easily debug your components using event triggers from the browser console.

Impurities (mixins)

An admixture defines a set of functionality that would be useful to several objects. Flight out of the box comes with support for functional impurities , including protection against accidental redefinition and duplication. While classic JavaScript only supports single inheritance, a component (or some other object) can have several impurities applied to it. In addition, impurities are created using a template that is very similar to a traditional hybrid of a constructor and a prototype, but do not suffer from leaky abstractions of the latter ('super', 'static', 'const' and others).

• A typical application of an impurity is a set of auxiliary functions that will be useful to several objects.
• One admixture can be applied to any number of components.
• One component can have any number of places that are applied to it.
• A core admixture has already been applied to each component initially.
• The impurity can be applied including other impurities.

To better understand how components and impurities work, I recommend that you study the quick start with code samples in detail .

Future plans

Flight was just born as a project. Developers in the near future are planning to add a framework for testing, as well as open to the public several tools that they use to develop the Twitter interface. The github project is open to everyone, and the development team is looking forward to a pool of requests and comments. “We perfectly understand that we could not foresee everything, and we hope that with your help Flight will improve and take its rightful place in the community.”

Can Flight gain the same popularity among developers as bootstrap? Time will tell!