Flight - a new js-framework from Twitter

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

The new framework uses ES5-Shim to support ES5 in older browsers and jQuery for DOM manipulation. You will also need one of the implementations of AMD, 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 any approach on you to display data in the application. It doesn’t matter to you how you submitted the request, which template you are using or whether 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, tying 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 use the functionality we need with the help of native browser capabilities. For example, we get custom event propagation without a single line of code, and our handlers will work equally well with user and native events.

How does he work?

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

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 own registration and event handling.
• In addition, each Component has its own properties, which determine its behavior.
• When a component is attached 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 triggers an event, it does not know if someone has received it or not. This property allows the developer to consider each component separately, rather than remembering all the connections and talk about the growing complexity of the application as a whole.

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

• We get a system of distribution of 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 specific element.
• Subscribing components do not distinguish custom events from other components (for example, dataMailItemsServed) and native element events (for example, a click) and handle both types of events in the same way.

Mobility and testing

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

Impurities (mixins)

Impurity 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 overriding and duplication. While classic JavaScript supports only single inheritance, a component (or some other object) may have several impurities applied to it. In addition, impurities are created using a template that is very similar to the traditional hybrid constructor and prototype, but does not suffer at the same time with leaky abstractions of the latter ('super', 'static', 'const' and others).

• A typical impurity application is a set of auxiliary functions that will be useful to several objects.
• A single impurity can be applied to any number of components.
• One component can have any number of prisms that are applied to it.
• Core component has already been applied to each component.
• Impurity can be applied including on other impurity.

To better understand how components and impurities work, I recommend that you study the brief guide with code examples in detail.

Future plans

Flight was just born as a project. Developers are planning to add a testing framework in the near future, 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 are well aware that we could not foresee everything, and we hope that with your help, Flight will improve and take a worthy place in the community."

Will Flight be as popular with developers as bootstrap? Time will tell!