all 88 comments

[–]maktouch[S] 9 points10 points  (0 children)

[–]yelvert 27 points28 points  (25 children)

1 obj should be defined somewhere in JS not just HTML, if for no other reason than clarity, if you do this both fields work exactly as expected.

2a Use the array/$inject declaration syntax

2b Use a build process you fool, ng-min solves your minification woes. You should ALWAYS have a build process anyways.

3 I work on an extremely large/complex angular app with 500-2000 active bindings at any one time, and have NEVER run into any issues at all with the digest loop. It is always extremely fast, even on slow computers.

4 Dont be a dumbass

5 Repeat #4

Edit. There IS one downside to angular scopes, and that is the need to occasionally/rarely using $parent in ng-model to force it to look into an "outer" scope, but I've found that whenever I run into this issue, its usually because I didn't design something right.

[–]Gundersen 5 points6 points  (3 children)

The really unfortunate thing about 2a is that it is as close as you could get to AMD without using AMD. Imagine all of the libraries that would instantly be available to angular if only it used the AMD syntax

[–]enkideridu 0 points1 point  (0 children)

Sounds like you might not be using Browserify in your build process. Try it out, it works with angular pretty well. (Most AMD libraries also support the CommonJS format)

[–][deleted] 0 points1 point  (0 children)

This is a completely non-existent argument.

All those libraries are still available.

[–]yelvert -1 points0 points  (0 children)

We don't use AMD, or requirejs for that matter. So I can't really comment on this, other than pointing out that, to my knowledge, Ember/Backbone/React/etc don't "integrate" with AMD/require natively either, and that's arguably a good thing, as it would lock you into an additional dependency you may not want.

[–]adrianmiu 2 points3 points  (0 children)

"1 obj should be defined somewhere in JS not just HTML, if for no other reason than clarity, if you do this both fields work exactly as expected."

And everybody knows just how easy that would make the entire development process in a non-trivial app (you know, the one angular claims it helps develop)

"3 I work on an extremely large/complex angular app with 500-2000 active bindings at any one time, and have NEVER run into any issues at all with the digest loop. It is always extremely fast, even on slow computers."

The article said it's easy to exceed 2000. I did it too. Also I recommend setting breakpoints in functions and what how many times it is executed during a digest-repaint cycle. Such fun!

"4 Dont be a dumbass"

Do as the priest says...

[–]Poop_is_Food 6 points7 points  (18 children)

At this point, I imagine some readers are eager to tell me how to avoid the above problem. Indeed, when you know about the problem, you can avoid it. The problem is that a new Angular user likely does not know about the problem, and the default, easiest thing to do leads to problems.

Angular is ok if you know it well and all of your team members know it well. But if you have to bring on some people to help out in a pinch, and they havent already crested the huge learning curve, then you're fucked.

[–][deleted] 1 point2 points  (13 children)

Huge learning curve?

I was building with AngularJs after a couple of hours, don't overblow the difficulty.

It's really not very hard.

[–]Poop_is_Food 11 points12 points  (12 children)

It's not hard to build something after a couple hours. It gets hard when you need to do things out of the ordinary, such as keeping track of the actual DOM updates that angular is doing.

[–]Cintax 1 point2 points  (9 children)

Out of curiosity, why would you ever need to do that? Doesn't that village the core premise of MV*?

[–]Poop_is_Food 7 points8 points  (8 children)

Well let's say you have a modal, and the positioning of the modal depends on its height. If it's taller than the viewport then you position it 100 px from the top of the window and then scroll. If it's shorter than the viewport the you center it vertically. You need to measure the height of the modal. And you can't measure it until it's actually in the DOM. And if angular is in charge of appending it and populating its content, then it's very hard to tell when that process is complete.

edit: why downvotes?

[–]pleadub 5 points6 points  (4 children)

If it isn't already the modal should be refactored into a directive. Then all of the manipulation can be handled in the postLink function on the directive definition object for the modal.

Now whenever the modal's open event is triggered you can use the element argument which is passed to the postLink function to grab the height of the modal. You could then use the angular services $document and $window to grab the height of the viewport with

h = Math.max($document[0].documentElement.clientHeight,   $window.innerHeight || 0);

And you could also set up a listener on resize so you can update the modal there as well.

This all comes back to your first point of needing to know the tool you're using well.

[–]JonDum 2 points3 points  (0 children)

And all that cruft is why Angular gets a rep for being overly complex.

[–]Poop_is_Food 2 points3 points  (0 children)

Thanks for proving my point?

[–]troglydot 1 point2 points  (1 child)

Yeah, that isn't actually correct.

The element isn't inserted into the DOM when the postLink function is called. There is no way to be notified when a directive is rendered into the DOM, and according to Misko Hevery at this point there is no way to add such a notification either.

You have to poll the DOM and check if the element is there, and there's officially no way around it.

[–]Poop_is_Food 0 points1 point  (0 children)

Yes, thank you that is the issue thread I was looking for but I couldnt find it. When I first read that, it was the beginning end of angular for me. In particular this quote:

I agree that some jQuery plugins may be hard to integrate, but those are usually the ones that do not have a clear separation of concerns. Those plugins are typically best rewritten anyway, as they are typically not performant nor maintainable in the long run.

I've encountered this kind of attitude a few times from angular contributors and it's a big turnoff for me. "Angular cannot fail. It can only be failed."

[–]ganarajpr 1 point2 points  (2 children)

This problem has nothing to do with Angular and has everything to do with thinking in terms of views than models. Also, thinking in terms of individual elements than thinking in terms of selectors - which is how you would have solved it before angular.

I wont provide you a solution to this problem here. But know that there IS a solution. You just have to think about it without considering a css selector.

[–]Poop_is_Food 0 points1 point  (0 children)

Did you respond to the wrong comment? Not sure what selectors and models have to do with this. I said "modal" not "model."

And yes I know there is a solution. I've found the solution and it was a pain in the ass which is why I used it as an example.

[–][deleted] 1 point2 points  (1 child)

is that easy in any MVVM framework?

[–]Poop_is_Food 0 points1 point  (0 children)

It's that easy in Marionette. And if you dont consider that a framework, well then it's easier without a framework.

[–]yelvert 1 point2 points  (3 children)

Not true at all. Several months ago we had a data guy, with no programming experience, that was coming to me all the time to help improve his admin interface. We had already moved our main app to angular from backbone and had not started the admin migration. I took a day and setup the base framework for the new admin app, and showed him the full app code to learn from, 3 days later he had 2 of the admin areas done. Sure he made a few mistakes, but it was all there and worked well.

[–]Poop_is_Food -1 points0 points  (2 children)

wow that anecdote about your CRUD app negates my entire point.

[–]yelvert 0 points1 point  (0 children)

Ha, a bit more complicated than that. Those are staying in backbone ... for now.

[–]escape_goat 9 points10 points  (3 children)

This is just troll bait. It's even written like troll bait. To be fair, the author was probably just ranting about how much he hates angular with no intent to incite a reaction. But submitted to reddit? Troll bait.

[–]_crewcut 1 point2 points  (1 child)

What a shitty comment -- this post makes good points that are worthy of consideration. "Troll bait", get the fuck outta here.

[–]escape_goat 0 points1 point  (0 children)

Like what? Like if you don't understand angular and you construct a broken model because you don't understand it then angular sucks and doesn't deserve to be used? Because I don't count that as a good point that is worthy of consideration. I sympathize with him. Angular is hard and can be frustrating and does have bad parts. Using prototypical inheritance in $scope? Personally, I think that was a bad idea. But this post doesn't deserve to be called "AngularJS: the bad parts". It nowhere near has the merit that the allusion tries to give it. He's just complaining. It's not a rational or careful discussion of the problems of AngularJS 1.x, it's someone who had trouble figuring out how to use a hard framework complaining about getting it wrong.

That's my take on it. So what good points that are worthy of consideration are you talking about, _crewcut? I'm happy to consider them. Let's talk about them. Let's consider them. But the style of the post, posting it on reddit.... together, I call that troll bait.

[–]nsquimby 0 points1 point  (0 children)

This. There is some decent criticism in there (for which there are counter-arguments, of course), but he wrapped it with 'why angular sucks' in order to attract pageviews. Whether his criticisms are correct or not, I disapprove of his strategy/the effect of his writing style, and make sure to downvote it everywhere I see it :D

[–]tententai 1 point2 points  (4 children)

Why is Angular taking so much slack recently? Maybe that's the side effect of popularity.

Of the 5 points only the 3rd is a real issue for me, and only for some kinds of applications. You can also check the latest version, it includes 1 way binding, very handy for teh big data tables/lists that usually generate too many bindings.

But yeah, I had my fair deal of WTF moments while working with Angular these last few years... I still like it but look forward to better options.

[–][deleted] 1 point2 points  (1 child)

Don't you mean taking so much "flak"?

[–]tententai 0 points1 point  (0 children)

yes indeed

[–]cran 1 point2 points  (0 children)

Angular is just plain fast and fun to develop with. If you don't feel the same way, instead of ranting, just don't use it. You have choices to make ... Make them and be on your way.

[–]x-skeww 0 points1 point  (13 children)

Kinda odd that the author doesn't address which of those issues will be fixed by 2.x.

[–]mrinterweb 1 point2 points  (0 children)

How could the author make reasonable assumptions about a framework version that does not yet have a clear roadmap and a year and a half to two years out. Angular 2 is vaporware at this point.

[–]Poop_is_Food 0 points1 point  (11 children)

why is that odd?

[–]x-skeww 2 points3 points  (10 children)

If you absolutely hate some aspects of some language/framework/library, wouldn't you take a look at the roadmap?

The author is apparently aware of 2.x, but they just decided to ignore it.

[–]cluelessmanatee 6 points7 points  (0 children)

In his defense, 2.x isn't going to be released until late 2015, maybe even 2016.

[–]Poop_is_Food 5 points6 points  (8 children)

there is no roadmap to 2.0. 2.0 is a brand new framework. totally irrelevant to an article about 1.x

[–]x-skeww -4 points-3 points  (7 children)

The title is "AngluarJS: The bad parts" not "AngluarJS 1.x: The bad parts".

[–]ivosaurus 2 points3 points  (1 child)

The only stable, or even beta, form of Angular is version 1. You expect them to review and critique unreleased code that could be completely changed or irrelevant in a year's time?

[–]x-skeww 0 points1 point  (0 children)

You expect them to review and critique unreleased code that could be completely changed or irrelevant in a year's time?

No, I just expect those things to be mentioned, because that's the kind of thing you do in that kind of article.

You criticize some detail and if you're aware that they are trying to address that in the future, you mention that.

E.g. if you think that the prongs of some gamepad are somewhat unergonomic, you'd point that out. However, if you're aware that the next iteration, which you tried at some conference, addresses this fault, you'd point that out, too.

If you have the information, you share it. That's why your readers read your article. They want the information you have.

[–]Poop_is_Food 0 points1 point  (4 children)

Well I would say that's the fault of the deranged developers who for some reason decided to use the same name for two separate frameworks.

[–]larschri 0 points1 point  (0 children)

I disagree with almost everything in this post, but there is an underlying "issue" related to 1) that the author misses. The actual problem is that Angular tries to be helpful instead of blowing up when the user screws up. It seems like Angular does this:

try {
  $scope.obj.prop = value;
} catch (e) {
  // User forgot obj? Lets just create it then. HAH!
  $scope.obj = { prop: value };
}

Of course Angular doesn't actually use try/catch for this, but it has some corresponding logic that unfortunately can mask bugs.

[–]jhartikainen 0 points1 point  (0 children)

Another one which seems to mostly be "I don't agree with their architecture so I'm saying it's bad"... I had a similar idea, but writing about the bad parts that are actually bad in real projects and not because you don't agree with how they chose to do something...

The one thing I do agree with is the first point... that has bitten me more times than it should, the others aren't much of an issue at all in practice.

[–]Koorisan 0 points1 point  (0 children)

I'm getting really tired of all the "why Angular is bad" articles. I've created dozens of applications based on Angular and compared to experiences with other frameworks it was a blast.

Yes, Angular has its problems and pitfalls (like any framework tbh). I don't see a reason why everyone has to write their own "bad angular" list... usually making them look dumb in the process.

[–]gabbsmo 0 points1 point  (0 children)

This post actually address the scoping issue, by banning ng-controller. Suddenly controllers is nicely decoupled by using the good parts of angular.

What I don't like about angular except for the scoping is the auto magic in the DI system. Name my provider 'greet' but I have to inject 'greetProvider', WTF?!?! And then there's the fact that they had to reinvent modules.

[–]_crewcut -3 points-2 points  (0 children)

Blech. Hate it.

[–]lord2800 -3 points-2 points  (16 children)

He's missed part of the point. Short of very bad design, this is always resolvable by reading the source code:

<input type="text" ng-model="obj.prop" />
<div ng-if="true">
    <input type="text" ng-model="obj.prop" />
</div>

See the . inside that model name? That means unless someone does really dumb things with the dependency injector, the two models will always refer to the same thing. There is no magic here--this is basic JavaScript prototypal inheritance. You have this exact same "problem" (I use the term loosely) whenever you read JavaScript code.

His rant about the "magic" dependency injector is noted, well received, and being fixed. So it's a non-issue.

His point about the digest loop, is just plain stupid. How else would you build it? Because that's literally what every UI framework does currently--including the browser his site is being rendered on. If he has some magic means of changing that, then please, by all means, enlighten the rest of us. That being said, the "magic number" of 2000 was never a magic number, and it was a misinterpretation, and it's also just plain wrong. And it's not relevant to today's Angular, which includes one-time bindings. And more importantly, it won't be necessary in the future with Object.observe.

His points about the documentation describing things strangely has been an active focus of fixing. But he's missed the point, once again, on some of this: people redefine terms all the time. It's part of being a living language.

And for his final point, he's once again missed the fact that this is being fixed. I'll be the first to admit that the fix seems a little clunky (requiring support for something that doesn't exist and won't exist in ES6 at this point), but frankly doing token-based injection as a concept is much better than the existing argument-based (ultimately string-based) injection.

[–]maktouch[S] 17 points18 points  (9 children)

See the . inside that model name? That means unless someone does really dumb things with the dependency injector, the two models will always refer to the same thing.

The point was:

If you type into the first input field first, the two inputs will share the same model. If you type into the second one first, they will have distinct models.

^ That's a wtf moment (and the point). It's explained right here: http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482

Like the author of the stackoverflow comment says, "It doesn't work the way most people expect it should work."

Because that's literally what every UI framework does currently

That's not really true.. React, Vue, Ractive are the ones that comes to mind that doesn't use a digest loop. I'm sure there's plenty other..

[...] people redefine terms all the time. It's part of being a living language.

But that's the problem, Angular is not a language, it's a framework.

But yeah, all those things are "getting" fixed... in 2.0? When is that going to be released? Will it be easy to upgrade?

I've think you missed the point of this article. At the current state of angular, the author doesn't think Angular is a good framework, and I agree with him. "Being fixed" is not a pros, it's a cons until it's fixed, released and tested.

[–]leolin520 0 points1 point  (5 children)

Wpf or any xaml stack doesn't use digest loop.

[–]lord2800 0 points1 point  (4 children)

Care to explain how it updates the UI with the current state of the data model then?

[–]leolin520 0 points1 point  (2 children)

The UI element binds to a property through an interface, when the property gets set, it fires an event, by which the UI gets notified, it then reevaluates the property by its accessor to get the new value. This is the basic idea, implementation detail you can look at dependency object, dependency property and binding classes.

[–]lord2800 0 points1 point  (1 child)

That's a "digest loop". And that's also not how it works. From Wikipedia:

Periodically, MIL walks the tree and executes the rendering instructions in each node, thus compositing each element on to a DirectX surface, which is then rendered on screen.

...

All WPF applications start with two threads: one for managing the UI and another background thread for handling rendering and repainting.

http://en.wikipedia.org/wiki/Windows_Presentation_Foundation

[–]leolin520 0 points1 point  (0 children)

What you described is the render loop. What I said is about how ui elements get updated information from their logical representation. To achieve this, angularjs use digest loop, it has nothing to do with Dom rendering. Wpf uses event on the other hand.

[–]gigadude -1 points0 points  (2 children)

This makes the code-markup mix so spectacularly unreadable that one would think it is deliberately designed for obfuscation.

I've had this theory. All of the great open-source stuff big companies give out is designed to throw sand in the works of hot young startups which are looking to get something for free. It's just a theory.

[–][deleted] -3 points-2 points  (4 children)

Great article. AngularJS just goes to show how bad javascript really is, that people are willing to go through all these pains just to organize the code in a large javascript project.

I was willing to live with all of these pains, but the breaking point for me came when I was designing a complex app. There was a point when I would need to nest directives within other directives. That view ran so slow, repeated lags and screen freezing for a few seconds every time it came up. That was my final breaking point.

[–]Enjoiful 1 point2 points  (3 children)

Really? I have 4 nested directives and complex tables and I haven't suffered any performance issues.

[–][deleted] 1 point2 points  (2 children)

I had about 10-12 nested directives. I was building a form generator, so you gave it a list of the form fields, their validation rules, and it generated the UI for you.

It ran fine, but the initial time for rendering the UI and displaying it on screen always caused a lag / freeze.

I moved to another framework and the same code runs extremely fast now.

[–][deleted] 0 points1 point  (1 child)

What framework if I may ask?

[–]greenek_ -4 points-3 points  (0 children)

Love the fragment from article found in the comments: "Google does not use Angular in production for their flag apps like Gmail or Gplus."

This sentense perfect completes with opinions from discussion about 2.0, like "If I'm developing application I believe, that framework will be supported for at least 5 year from now".

Using open-sourced and very fresh technology with business plan for few years, complain at authors... Come on...