We tame JavaScript or another bike for frontend applications.

On "Habré" more and more articles appear about the development of the frontend in JavaScript. Considered heavy libraries from Google and Facebook, do not stop holivary on what framework is better to use. But have you ever thought that all these frameworks are impossible or completely ridiculous in other programming languages? In my subjective opinion, this is all due to the fact that at the head of the DOM model is 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;
• Interacting with a DOM tree is a separate topic;
• Non-flexible event model;
• The lack of a convenient code editor.

I have a lot of programming experience in ActionScript 3. In my opinion, this is an ideal programming language. It would seem that, like JavaScript, it is ECMAScript receiver, and there should be no problems when switching from one technology to another. However, this is not the case, and inventing the application architecture in pure JavaScript is quite problematic. The use of libraries at first causes joy: hurray, at last I opened the zen of writing web applications; and then gives way to anxiety, when it takes more than a day to solve a task that is not described on the framework site.

Performance for mobile applications is becoming critical. And the two-way binding approach does not seem to be the solution to all problems (AngularJs). As with 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 is about another bike from an unknown author who wants to become famous by writing something that developers will like. The bicycle is damp for me, but it is already possible to 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. At the exit one JS file with logic, CSS with design;
5. Work only with components, no receipt of a link to an object by its ID or class.

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

LESS
lesscss.org
LESS makes it easy to write styles; it can be assembled from several files into one, following imports. You will need Node.js to install it.

Haxe
haxe.org
I considered a lot of wrapper technologies around javascript 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 he is not very popular with frontend developers. Object inheritance, convenient imports in comparison with TypeScript. No need to grunt files to build projects, in general, everything I love. So also full support for FlashDevelop IDE - my favorite development environment for ActionScript.

FlahDevelop
flashdevelop.org
Very handy editor. It is a pity that it is only under Windows. Those who have never worked with him are a few shortcuts that make writing code enjoyable and simple:

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

Result

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

src - source
bin - compiled application

Code execution starts with the Main class:

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

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

• A model of visual objects embedded in each other. Objects that cannot have children must inherit from scooby.display.DisplayObject. Analogous to Sprite is the DisplayContainer. An important difference: in the constructor in super, you need to pass the name of the object class - this class will be automatically assigned to the DOM branch.
• Event model with tree boblings. 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. Also, the Event object has a data field by default. 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, groups of buttons (menu, select one from the list), various panels.

Waiting for criticism.