I agree with the premise but disagree with the argument.
Which brings me to the pattern of ever failing technologies. Remember Moo Tools? Prototype? ... Prototype and moo tools tried to be innovative, but they just made things harder. Not only were they not intuitive to use, but referring to the documentation was even worse. Would take hours what jQuery could accomplish in mere minutes.
That's just not true. I can't speak to MooTools, but I used Prototype back in the early Rails days, and it was a pleasure. Great documentation and it jived with the Rails automagical convention-over-configuration approach. Prototype failed because a) it stopped being actively developed, and b) it overrode native object prototypes in a way that could cause other libraries to catastrophically fail. But Prototype didn't fail because it wasn't intuitive, and it didn't fail because it wasn't documented. IIRC, Prototype documentation was actually better than jQuery documentation.
The main reason Angular JS will fail is because it’s difficult.
This is fair criticism, but there's no supporting evidence provided—only that Angular JS didn't "feel" right and that more people search for "Angular sucks" than "jQuery sucks" on Google.
I think Angular got a lot of core ideas right: two-way binding and extending HTML. But it also comes with an extremely steep learning curve. The directive definition object, with its pre-compile, post-compile, pre-link, and post-link phases is too complex and exposes too many warts of using the DOM as a templating language. The documentation takes several passes to grok, and you'll more-than-once have to dig into Angular internals. The several ways to create a service (`.provider`, `.factory`, and the supremely confusingly `.service`) are unnecessary obfuscation and force you to use singletons; custom classes/prototypical inheritance in Angular requires some mind-bending use of first-class functions.
If you're not careful to fully understand Angular, it's easy for your first Angular app to turn into a mess of spaghetti, since Angular enforces too much awkward structure at the directive/controller levels, and not enough at the data management layer.
But these are issues that the Angular core team is well aware of. I'm really excited about the Angular 2.0 roadmap [0]. And even if Angular fails, some of its ideas are so good they're being incorporated into ES6, like Object.observe [1].
There are few cases where I want such a thing (like say updating the count on a shopping cart when an item is added). I don't ever want an item you're adding in a form to be showing up as you type it in a list in the background. That adds nothing and on the whole it's probably a UX negative effect.
I think it's brought up so much mostly because it's cool tech. But I don't see it actually solving problems.
MS had the same tech, with an arguably simpler implementation, years ago in ASP.NET. And while I've been out of MS development for awhile I feel like it's been largely deprecated. And it was never a "best practice" in the first place. It was mostly just a demo tool for MS sponsored "conferences" (read sales demonstrations by MS employees who went on to found Telligent).
If you think it's oversold, you've probably only seen a bunch of stupid tutorials about neat features with it.
What Two-way data-binding gives you is a structurally-controlled presentation layer.
You can represent the page's state as objects with properties, and it "just renders". You can have a "readonly" property, and it makes everything readonly. You can have a "show edit box" property...bang. A "loading" variable, etc.
The idea is that you can treat the front end html like everyone else has always treated their world: as a finite state machine.
Since I am primarily a back-end developer (with more middle-tier experience than I originally would've wanted to admit), this jives really well to me. Instead of jumping in and hacking at the DOM every time data gets updated, I just use Angular for pages that are "that dynamic".
I really don't want to have to render new DOM elements (even with a template engine like Dustjs) and overwrite them into the page, just to represent a small state change.
With a data binding library, I don't have to. I don't use Angular for many things, and I sure don't use the "SPA routing" functionality... but when I need to do constant rapid-fire AJAX requests for growing subsets of a huge dataset (say, schools/programs by region and proximity), Angularjs saves you a lot of code: code that's generally quite ugly.
The two way binding can be so useful though. The best example I've seen was an array of coordinates bound to a directive that used D3.js to visualise it. There were some special function you could call that would affect and expand your data and immediately update the graph, and you could manipulate the individual points on the graph and it would propagate to the data seamlessly.
I guess to me two way binding is one of those things that you don't think of often, but when you don't have it you suddenly find yourself writing tons of boilerplate code to get the same effects.
The only cases when I didn't want the two way binding were when I was creating or editing an item. And then it's trivial to bind the form to a separate object while you work on it, then push your changes to the collection/original when you're done.
That is only one use case for two-way data binding. A better example is that choosing an option in a select list instantly modifies your model, which triggers changes in some other computed properties on your model, which instantly binds back to the UI to populate that second drop down list with the filtered options.
Sure. But most if not all of that logic is on the server anyways. So to actually make it work that way would be (IME) a duplication of effort.
Then you have to deal with the fact that some of these second-order effects may be dealing with thousands of options. Do you really want to be calculating cartesian products on the client in JS? Ignoring the performance concerns, you could be talking about preloading a ton of data.
And then you're addressing complexities on the client side, coming up with potentially inconsistent solutions for because you're evaluating these on a case by case basis, and you've already solved these problems on the server.
While there might be some UX cost to round-tripping to the server, the client solution to approaching such problems is then consistent, and arguably far simpler. And you generally have much much better tooling to tackle these problems on the server, and more flexibility in applying your logic across web, mobile, batch processing scenarios, etc.
I mean, you could make your same argument for WebControls in ASP.NET. And it's my impression everyone mostly agrees it was a bad idea (at least I haven't noticed any competitors thinking it was an idea worth stealing). Except now it's on the client, with much weaker tooling, multiple runtimes it has to work with, etc.
We could go back and forth all day I'm sure. It's just a POV I felt like putting out there as someone who survived the two-way-data-binding wars of the early 2000's and isn't eager to see that idea rise to prominence again.
If that logic is on the server, you wouldn't use Angular for it...
But from a strict MVC standpoint, it seems smart for that logic to be on the client. The server provides a getter API: /api/schools_by_state/CA for example. The client does an ajax call if you choose "California" to get the schools list, which it can do in under 100ms on a fast enough world...then it can cache California schools on the client side, so it doesn't need to fire that call again.
And of course you want that calculation to happen on the client, for 2 reasons:
1. In sparse-use sets (like pick a state, then pick a city, then pick a district) you will only really need to use 10% of the data, you can save a ton on bandwidth here.
2. In situations where the render patterns get complicated, it's really just a PRESENTATION issue. The server may validate that you're not using noncompatible dropdowns, but it otherwise should not care what happens in the browser related to that.
Binding a select-box to an event that makes that request and fills it in is trivial. And that data comes from the server.
If you're saying that you bring back a coarse interface (of school -> (state, city, district)), well that seems like a reasonable way to tackle it to me. But then that's not really what the other poster was suggesting (at least as I understood it), and Angular really does practically nothing for you in this scenario. You still have to specify your endpoint. You're still binding the data. And the two-way aspect of it is at best useless since the selected value is right there in the Form to be serialized, and at worst harmful because you're building and keeping large objects in JS for... no practical advantage I can think of at the moment.
Even stepping into the territory of calling something like this a "pattern", something that's been really common and fairly trivial beginning from the very earliest examples of Prototype.js really serves to add needless complexity to something that's actually very simple IME.
So far, they've got the mindshare and a serious head start.
I keep on hearing this, but I really haven't heard of it being in any large projects other than DoubleClick. I don't know if I'd consider being used in a bunch of small hobby projects a 'head start'.
Being used all over the place in the Silicon Forest (Portland/Hillsboro Oregon). Everything from startups to places like Nike and Intel are building out tons of Angular stuff. OSS and .Net shops both using it extensively here.
Not saying that represents the market, but just saying it's taken off in my corner of the world significantly.
there is a lot more, it's being used in a lot of startups and major companies throughout the world today, pretty sure the stats show it is far ahead of ember in real world adoption so far
Databinding is a lock-in feature. Annoying as hell, but true. There's no databinding library that I've seen that does not reduce your ability to use other libraries. I've never seen one that jives at ALL with third-party client templates (like dustjs).
What I dont like about Angular: "it is built on the idea of adding HTML attributes to make it powerful enough to build applications. This is not a solid theoretical foundation and results in lots of neologisms -- scopes, transclusion, directives, reliance on dependency injection (in JS? really?), its own module system, its own idea of model/view/controller, etc etc.". Quoted it from pete hunt. When I studied CanJS or React, I felt the design made more sense.
As far as I can tell, it's that theres more search results for "angular sucks" vs "jquery sucks". But that's a horrible metric, all you have to do is go 10 pages back and see that most articles have nothing to do with "Angular sucking". As for more people thinking angular sucks, http://www.google.com/trends/explore#q=angular%20sucks%2C%20... is a pretty strong rebuke to that point.
Comments
I agree with the premise but disagree with the argument.
That's just not true. I can't speak to MooTools, but I used Prototype back in the early Rails days, and it was a pleasure. Great documentation and it jived with the Rails automagical convention-over-configuration approach. Prototype failed because a) it stopped being actively developed, and b) it overrode native object prototypes in a way that could cause other libraries to catastrophically fail. But Prototype didn't fail because it wasn't intuitive, and it didn't fail because it wasn't documented. IIRC, Prototype documentation was actually better than jQuery documentation.
This is fair criticism, but there's no supporting evidence provided—only that Angular JS didn't "feel" right and that more people search for "Angular sucks" than "jQuery sucks" on Google.
I think Angular got a lot of core ideas right: two-way binding and extending HTML. But it also comes with an extremely steep learning curve. The directive definition object, with its pre-compile, post-compile, pre-link, and post-link phases is too complex and exposes too many warts of using the DOM as a templating language. The documentation takes several passes to grok, and you'll more-than-once have to dig into Angular internals. The several ways to create a service (`.provider`, `.factory`, and the supremely confusingly `.service`) are unnecessary obfuscation and force you to use singletons; custom classes/prototypical inheritance in Angular requires some mind-bending use of first-class functions.
If you're not careful to fully understand Angular, it's easy for your first Angular app to turn into a mess of spaghetti, since Angular enforces too much awkward structure at the directive/controller levels, and not enough at the data management layer.
But these are issues that the Angular core team is well aware of. I'm really excited about the Angular 2.0 roadmap [0]. And even if Angular fails, some of its ideas are so good they're being incorporated into ES6, like Object.observe [1].
[0] http://blog.angularjs.org/2014/03/angular-20.html
[1] http://addyosmani.com/blog/the-future-of-data-binding-is-obj...
I wish there was more discussion of the core concepts in Angular instead of just the implementation.
Custom Elements + Two-way Data Binding + Services seems to be a pretty powerful combination.
Two-way Data Binding is really oversold IMO.
There are few cases where I want such a thing (like say updating the count on a shopping cart when an item is added). I don't ever want an item you're adding in a form to be showing up as you type it in a list in the background. That adds nothing and on the whole it's probably a UX negative effect.
I think it's brought up so much mostly because it's cool tech. But I don't see it actually solving problems.
MS had the same tech, with an arguably simpler implementation, years ago in ASP.NET. And while I've been out of MS development for awhile I feel like it's been largely deprecated. And it was never a "best practice" in the first place. It was mostly just a demo tool for MS sponsored "conferences" (read sales demonstrations by MS employees who went on to found Telligent).
If you think it's oversold, you've probably only seen a bunch of stupid tutorials about neat features with it.
What Two-way data-binding gives you is a structurally-controlled presentation layer.
You can represent the page's state as objects with properties, and it "just renders". You can have a "readonly" property, and it makes everything readonly. You can have a "show edit box" property...bang. A "loading" variable, etc.
The idea is that you can treat the front end html like everyone else has always treated their world: as a finite state machine.
Since I am primarily a back-end developer (with more middle-tier experience than I originally would've wanted to admit), this jives really well to me. Instead of jumping in and hacking at the DOM every time data gets updated, I just use Angular for pages that are "that dynamic".
I really don't want to have to render new DOM elements (even with a template engine like Dustjs) and overwrite them into the page, just to represent a small state change.
With a data binding library, I don't have to. I don't use Angular for many things, and I sure don't use the "SPA routing" functionality... but when I need to do constant rapid-fire AJAX requests for growing subsets of a huge dataset (say, schools/programs by region and proximity), Angularjs saves you a lot of code: code that's generally quite ugly.
The two way binding can be so useful though. The best example I've seen was an array of coordinates bound to a directive that used D3.js to visualise it. There were some special function you could call that would affect and expand your data and immediately update the graph, and you could manipulate the individual points on the graph and it would propagate to the data seamlessly.
I guess to me two way binding is one of those things that you don't think of often, but when you don't have it you suddenly find yourself writing tons of boilerplate code to get the same effects.
The only cases when I didn't want the two way binding were when I was creating or editing an item. And then it's trivial to bind the form to a separate object while you work on it, then push your changes to the collection/original when you're done.
That is only one use case for two-way data binding. A better example is that choosing an option in a select list instantly modifies your model, which triggers changes in some other computed properties on your model, which instantly binds back to the UI to populate that second drop down list with the filtered options.
Sure. But most if not all of that logic is on the server anyways. So to actually make it work that way would be (IME) a duplication of effort.
Then you have to deal with the fact that some of these second-order effects may be dealing with thousands of options. Do you really want to be calculating cartesian products on the client in JS? Ignoring the performance concerns, you could be talking about preloading a ton of data.
And then you're addressing complexities on the client side, coming up with potentially inconsistent solutions for because you're evaluating these on a case by case basis, and you've already solved these problems on the server.
While there might be some UX cost to round-tripping to the server, the client solution to approaching such problems is then consistent, and arguably far simpler. And you generally have much much better tooling to tackle these problems on the server, and more flexibility in applying your logic across web, mobile, batch processing scenarios, etc.
I mean, you could make your same argument for WebControls in ASP.NET. And it's my impression everyone mostly agrees it was a bad idea (at least I haven't noticed any competitors thinking it was an idea worth stealing). Except now it's on the client, with much weaker tooling, multiple runtimes it has to work with, etc.
We could go back and forth all day I'm sure. It's just a POV I felt like putting out there as someone who survived the two-way-data-binding wars of the early 2000's and isn't eager to see that idea rise to prominence again.
If that logic is on the server, you wouldn't use Angular for it...
But from a strict MVC standpoint, it seems smart for that logic to be on the client. The server provides a getter API: /api/schools_by_state/CA for example. The client does an ajax call if you choose "California" to get the schools list, which it can do in under 100ms on a fast enough world...then it can cache California schools on the client side, so it doesn't need to fire that call again.
And of course you want that calculation to happen on the client, for 2 reasons:
1. In sparse-use sets (like pick a state, then pick a city, then pick a district) you will only really need to use 10% of the data, you can save a ton on bandwidth here.
2. In situations where the render patterns get complicated, it's really just a PRESENTATION issue. The server may validate that you're not using noncompatible dropdowns, but it otherwise should not care what happens in the browser related to that.
I think we're talking about the same thing.
Binding a select-box to an event that makes that request and fills it in is trivial. And that data comes from the server.
If you're saying that you bring back a coarse interface (of school -> (state, city, district)), well that seems like a reasonable way to tackle it to me. But then that's not really what the other poster was suggesting (at least as I understood it), and Angular really does practically nothing for you in this scenario. You still have to specify your endpoint. You're still binding the data. And the two-way aspect of it is at best useless since the selected value is right there in the Form to be serialized, and at worst harmful because you're building and keeping large objects in JS for... no practical advantage I can think of at the moment.
Even stepping into the territory of calling something like this a "pattern", something that's been really common and fairly trivial beginning from the very earliest examples of Prototype.js really serves to add needless complexity to something that's actually very simple IME.
IMO.
That's what I was looking for when I found Angular.
There are definitely two questions worth asking:
1) Is that combination really what we want? (I think it is)
and
2) Is Angular's approach the only right way to do it?
So far, they've got the mindshare and a serious head start.
So far, they've got the mindshare and a serious head start.
I keep on hearing this, but I really haven't heard of it being in any large projects other than DoubleClick. I don't know if I'd consider being used in a bunch of small hobby projects a 'head start'.
Being used all over the place in the Silicon Forest (Portland/Hillsboro Oregon). Everything from startups to places like Nike and Intel are building out tons of Angular stuff. OSS and .Net shops both using it extensively here.
Not saying that represents the market, but just saying it's taken off in my corner of the world significantly.
http://www.localytics.com
Youtube App for PS3
there is a lot more, it's being used in a lot of startups and major companies throughout the world today, pretty sure the stats show it is far ahead of ember in real world adoption so far
I'm rooting for Angular, but it just seems so far behind. Ember has more recognized names, Angular has tiny companies and hobbyists.
Square, Vine, Yahoo, NBC News, Groupon, Twitch, Urbanspoon, Discourse, Ghost, TravisCI, and now Netflix?
#2 is the killer.
Databinding is a lock-in feature. Annoying as hell, but true. There's no databinding library that I've seen that does not reduce your ability to use other libraries. I've never seen one that jives at ALL with third-party client templates (like dustjs).
What I dont like about Angular: "it is built on the idea of adding HTML attributes to make it powerful enough to build applications. This is not a solid theoretical foundation and results in lots of neologisms -- scopes, transclusion, directives, reliance on dependency injection (in JS? really?), its own module system, its own idea of model/view/controller, etc etc.". Quoted it from pete hunt. When I studied CanJS or React, I felt the design made more sense.
As far as I can tell, it's that theres more search results for "angular sucks" vs "jquery sucks". But that's a horrible metric, all you have to do is go 10 pages back and see that most articles have nothing to do with "Angular sucking". As for more people thinking angular sucks, http://www.google.com/trends/explore#q=angular%20sucks%2C%20... is a pretty strong rebuke to that point.