Taming JavaScript or another bike for frontend applications

On "Habré" articles about development of a front-end on JavaScript more and more often appear. Heavy libraries from Google and Facebook are considered, holivars on which framework is better to use do not stop. But have you ever thought that all these frameworks are impossible or absolutely ridiculous in other programming languages? In my subjective opinion, this is all due to the fact that the DOM model is at the forefront - an HTML tag, not a component. But back to JavaScript.

What I don't like about him

• Lack of typing;
• Prototype inheritance;
• Logical division into files is accompanied by a headache;
• Interaction with the DOM tree is a separate topic;
• Not a flexible event model;
• Lack of a convenient code editor.

I have a lot of programming experience in ActionScript 3. In my opinion, it is an ideal programming language. It would seem that, like JavaScript, it is an ECMAScript receiver, and there should be no problems when switching from one technology to another. However, this is not so, and to come up with pure JavaScript application architecture is quite problematic. Using libraries at first causes joy: cheers, finally I got the zen of writing web applications; and then gives way to anxiety when more than a day is spent on solving a problem not described on the framework website.

Performance for mobile applications is becoming critical. And the two-way binding approach no longer seems to be the solution to all problems (AngularJs). Like the generation of the entire page on the client side (ReactJs), I still have only one question - why? Why do I need a virtual DOM?

This article about another bike from an unknown author who wants to become famous by writing something that developers like. The bike is still damp for me, but you can already move around on its square wheels. Please love and favor not to kick much - Scooby!

Principles

1. Object-event model as close as possible to the ActionScript 3 model;
2. Control over the destruction of objects;
3. Typing where possible;
4. The output is one JS file with logic, CSS with design;
5. Work only with components, no receiving a reference to an object by its id or class.

The choice of technology, or what you need to install before you begin

LESS
lesscss.org
LESS makes writing styles easier, can be assembled from several files into one, following the import. To install it, you will need Node.js.

Haxe
haxe.org
I have considered many JavaScript wrapping technologies for typing and object inheritance. CoffeeScript, Dart, TypeScript. But they are all very raw or uncomfortable. Haxe in this regard is a cut above, it is strange that it does not have much popularity among frontend developers. Object inheritance, convenient imports compared to TypeScript. No grunt files are needed to build projects, in general, everything as I like. It also has full support for the FlashDevelop IDE, my favorite ActionScript development environment.

FlahDevelop
flashdevelop.org
Very convenient editor. It is a pity that it is only under Windows. For those who have never worked with it, there are several keyboard shortcuts that make writing code pleasant and simple:

• ctrl + alt + space - Advanced autocomplete, useful when the class has not yet been imported;
• ctrl + shift + 1 - select a function, and then by pressing this keyboard shortcut you can generate an event listener with all parameters.

Result

You can find the library and the demo application at the link: https://github.com/rzer/Scooby

src -
bin sources - a compiled application

Code execution starts from the Main class:

static function main() {
	var main:Main = new Main();
	main.setView(Browser.document.body);
}

Then everything is as in ActionScript: create objects, add them to the scene. Of the basic features of AS3 implemented:

• A model of visual objects embedded in each other. Objects that cannot have children should be inherited from scooby.display.DisplayObject. The equivalent of Sprite is DisplayContainer. An important difference: in the constructor in super you need to pass the class name of the object - this class will be automatically assigned to the DOM branch.
• Event Model with Wood Bubbles. Important note: when writing your components to subscribe to native DOM events, you must call the nativeEvent function ("name"). Only after this event will be sent. The Event object also has a default data field. There, for example, a native event is recorded when sent to our event model. And in most cases this field is enough not to produce classes of various events.
• Some of the components that I needed in my application. Input fields, buttons, trees, button groups (menus, selecting one from the list), various panels.

Waiting for criticism.