Why you should NOT use AngularJs

Much time has passed since the advent of AngularJs (in terms of web technologies, of course). Now on the Internet there are a huge number of posts praising this framework to the skies, that this manna from heaven is not different, and critics are not so much as it deserves. But such articles are slowly beginning to appear, and it pleases me, I hope the industry will recover from the anguly the same way as MooTools, Prototype,% some new language under JVM%,% other-super-revolutionary-technology%. I do not know why, but in the IT-area such revolutionary technologies that raise noise, and then disappear, appear quite often. A good developer should be able to distinguish another fashionable technology from a working tool. And for this it is very important to look at things critically. My article is a compilation of the most powerful conclusions from other articles, and my personal conclusions. Angulyar creates a good wow effect when you see it for the first time: “wow, I wrote ng-repeat, and implemented this logic with some tags and everything is updated!”, But as soon as you have to implement real applications, and not just another TODO list, then everything becomes very sad. I just want to say that I know the framework well, even more than I would like to know it, I have been programming on it for 2 years. And for the next project I will not choose it for sure, and that’s good, we all learn from mistakes. So what's wrong with the angular? There is no unequivocal answer, there are too many different shortcomings that create such an appearance to the framework. If in one word - ill-conceived architecture. Under the cut, I bring specifics, so sit back. YES BEGIN HOLLY VAR!

Bilateral data binding

There is a fundamental rule of programming, it applies to absolutely any language or technology, this rule reads: the obvious is better than the implicit. All these watchers are an implicit call to event handlers. In reality, events occur when you click on an element, and not when data changes, so when you write on an angular, you need to think like this: “aha, then clicked on the button and the model changed, now you need to listen to the changes on this model and when it changes it is called the handler ”, and not“ clicked on the button, the handler volunteered, ”the BILATERAL BINDING IS NOT THAT HOW THE PROCESSING OF EVENTS IN PRINCIPLE HAPPENS . This is the same thing that you retrieve data from the database and write it into the model, and only callbacks are invoked on model changes, and so it is not implemented anywhere at all, even in Java, a language that has no anonymous functions at all (when I also wrote on it ) implemented callbacks on classes. Because it is obvious, because such a concept describes the real state of things. Even the future version of Ember.js will not use two-way data-binding.



Another two-sided binding means that by changing something in your application, it triggers the hundreds of functions that monitor changes. And this is a monstrously slow operation, especially when things get bad on mobile platforms. And this is the fundamental part of the framework. Angular even imposes restrictions on how rich a UI can write. And what is most interesting, this is not some ephemeral and distant limitation to which you will never end up. These are only 2000 bindings, and if you are developing a more or less large application, YOU WILL EXACTLY REMAIN TO THIS LIMITATION . And here you have to fight with the framework. Angulyar introduces the possibility of one-sided data-binding to avoid performance problems. We create a problem for ourselves and solve it with a crutch ( ill-conceived-architecture # 1 ). Look at yourself , how many people who are struggling with the performance of an angular . Yes, if you google angular performance in Google, then you will be horrified by the number of articles describing how to speed it up, is this a sufficient argument in favor of the fact that the angular is slow?



There is one more thing, sometimes you still need two third-party data binding, but the UI still slows down. For example, at the first boot, the user sees {{expressions in parentheses}}. Hmm ... so this is not a bug, it's a feature! You need to enter a directive that will hide the UI, so that the user does not see the flicker, and does not interfere with the framework to solve its non-existent problems. And for this purpose, we introduce the directives ngCloak, ng-bind, ng-bind-template, which actually deals with this. These problems would not exist if a more nimble framework was used, which immediately shows the data, as soon as they appear, while the angular point of view after the appearance of the data takes time to display them. Again we create problems for ourselves and solve with crutches (ill-designed architecture # 2) .

')

And if the framework has such scalability problems, does this mean that something is not at the fundamental level? Laconic and sophisticated technologies tend to scale very well.

Dependency Injection

The following example of how the angulyar first puts a rake, and then makes you dance with a tambourine to get around them - this is Dependency Injection. In Angular, variables are inserted by the name of the argument:

function MyController($scope, $window) {
    // ...
}

.toString(), . — , JavaScript, , . , , . :

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
}]);

:

MyController.$inject = ['$scope', '$window'];

, , , (-#3).



— , . - . , :

 injector.register(name, factoryFn); 

name — , factoryFn — , . . . docs.angularjs.org/guide/providers. 5 : provider, service, factory, value, constant (-#4). - , . , , . , .

, , ! !



, :

<div ng-repeat="phone in user.phones">
    {{ phone }}
</div>

user , (-#5). . {{ }}, JavaScript. , , JavaScript' , ( , ). - «Pause on caught exeptions» ( , ( , )), (-#6) . - :







digest , . . (-#7)

angular. , :

<div ng-init="phone = 02"> {{ phone }} </div>
<div ng-if="true">
    <button ng-click="phone = 911">change phone</button>
</div>

phone , :

<div ng-init="phone = {value: 02}"> {{ phone.value }} </div>
<div ng-if="true">
    <button ng-click="phone.value = 911">change phone</button>
</div>

, . , jsfiddle.net/1op3L9yo. this, . (-#8).



, :

• , ( ).
• ( , )
• - ( ). , — .
• , : , tranclude , ng-repeat, ng-if, ng-switch , , 3 , .

stackoverflow.com , , , , , - , - ? - $scope. 2 , ( ng-repeat, , , ). , ( ExtJs OO, , - ). API , JavaScript . - -.

, — . , . , :

var myModule = angular.module(...);

myModule.directive('directiveName', function factory(injectables) {
    var directiveDefinitionObject = {
        priority: 0,
        template: '<div></div>', // or // function(tElement, tAttrs) { ... },
        // or
        // templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... },
        transclude: false,
        restrict: 'A',
        templateNamespace: 'html',
        scope: false,
        controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
        controllerAs: 'stringAlias',
        require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) { ... },
                post: function postLink(scope, iElement, iAttrs, controller) { ... }
            }
            // or
            // return function postLink( ... ) { ... }
        },
        // or
        // link: {
        //  pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        //  post: function postLink(scope, iElement, iAttrs, controller) { ... }
        // }
        // or
        // link: function postLink( ... ) { ... }
    };
    return directiveDefinitionObject;
});

, . , , . — . 3 (compile, link, controller), . . - scope , - , - , - $digest , . , - , - jQuery , . , ! controller , , ! (-#9).

- , , . , front-end' . , , , , . , front-end' ( GUI ExtJs , Angular, ), , . ReactJs jQuery, , , .

, , ( ), . .. HTML AngularJs HTML, -. , , , . (-#11). , , prerender.io ( , SAP HTML , ). — , .

AngularJs 2.0

, . , . , , . , , . , , ?

• . .
• Drag and Drop ( ). , . , onclick mousemove.
• HTML. ng-repeat, ng-show, ng-class, ng-model, ng-init, ng-click, ng-switch, ng-if — . — , — - ( ), (-#12).
• AngularJs (gmail, google+). , , ? ReactJs facebook.com . , , .

, , ( , , ). , , , . — ? — ! — ? — , ! — ? — , ! — . — . , . , , . , — , , , . React () jQuery ( - ), - , backbone, knockout . , , , , , , , . , . . - .

Why you should not use AngularJS

What I would recommend instead of Angular.js?

React vs AngularJS – How the two Compare

From AngularJS to React: The Isomorphic Way

The reason Angular JS will fail

Pros and Cons of Facebook's React vs. Web Components (Polymer)

AngularJS: The Bad Parts

What’s wrong with Angular.js

Things I Wish I Were Told About Angular.js



P.S. - , : , -, compile, link, controller, value constant, provider factory, , , , , , $watch, $watchCollection, , Provider run config , {{ }}, , , , . , , , , .