AngularJS is amazing, and hard as hell
coderwall.com
coderwall.com
For instance Backbone is pretty much what would happen (give or take) if all the JavaScript books on how to program OOP and MV* got together and build a JS framework. It's not fancy, it's not "magic", but it is very approachable in terms of advanced standard/best/popular JavaScript programming practices.
AngularJS left all that stuff behind and built their own little world. It might even be a great world, but on the surface or to the implementation-level developer has little to do with "regular" advanced JavaScript programming techniques/patterns.
To me it's a bit like the JavaScript version of Drupal, which gives you a ton out of the box, but is just it's own whole world of conventions etc, that has little do with anything seen outside of itself.
Ouch, but accurate.
So if you prefer Sinatra over Rails, you'll probably prefer Backbone over Angular or Ember. If you like all the magic Rails has to offer, you're probably going to feel right at home with Angular. But comparing Angular to Drupal is ridiculous.
Angular is not simple in any since of the word. (Especially if we're talking about its documentation.) And it's components are only reusable inside the Angular bubble.
For me, Drupal sucks for developers because you're configuring a bunch of objects to try to build a system but you're a) at the mercy of the initial design and b) going to run into hook soup hell, especially once a couple of plugins are installed.
Angular is nothing like that. You have a few classes of things you'll create. They're all well thought our and have very specific uses. None of them constrain you in any way, all the code inside is yours.
I don't get the comparison. I would never touch Drupal again however you would have to produce a very convincing argument to move me off Angular.
I would not call Angular magic. Basically there is a "loop", the digest cycle , whereas in Backbone you would add Backbone components to your code.
AngularJS creator worked at Adobe on Flex , and Adobe in fact attempted to create a "AngularJS" for non developers bundled with Dreamweaver ( Spry framework , but databinding was only one way).
I like AngularJS but since i dont do form centric apps ( more reactive documents with a lot of animations,svg or canvas) i went with Ractive + Backbone. Ractive is easier to learn and to use.
But AngularJS is pretty RAD when you have a lot of forms ( an admin panel ,etc ...), and provides a big testing plateform too.
> To me it's a bit like the JavaScript version of Drupal
hmm yeah maybe , drupal hooks are a bit like backbone directives in spirit.I'm wondering why you would prefer angular for a form-centric app?
I've used angular and rivets.js + backbone with success, my preference being angular but Ractive looks like a way to get awesome templating and databinding without committing the entire app to a single monolithic framework.
It also seems that server side rendering is more reachable with it's mustachy roots.
I gave a talk recently on our experience with some tips that may be of interest, here's a link to the slides: https://docs.google.com/presentation/d/13_tqIGJYJo7CxLvgZlUQ...
If this comment gets enough upvotes, I can upload a slidecast with the audio as well ;)
On unrelated note: Are there any web apps out there for creating slidecasts apart from Slideshare?
Typically, the issues that people talk about surround the fact that in Angular, the one right way to do stuff hasn't been discovered yet. The fact that the way that Angular works is a pretty fundamental change from the way that webpages have worked for most of their history means that there isn't really much to go on. The patterns are still being discovered.
The situation isn't helped by the fact that lots of people dove into the ecosystem and started writing blog posts about how do do things with Angular.js without first learning why just using a directive to apply jQuery plugins is probably not the right approach.
Generally speaking, the problem is not that it's hard to think of a way to accomplish what you want, it's that it's hard to figure out what the Angular way is (usually because there is not one way, yet).
HARD IS NOT GOOD, HARD IS STUPID
For me, that's a big sign of the overall quality & attention to detail on a project. For something as big as Angular, with the sort of backing it has, it gives me the feeling that it's not a community-driven open source project but an industry project where a few big players are sharing their code.
function updateCheckoutButton(cart) {
if (cart.length === 0) {
$('#checkoutButton').addClass('light-blue');
$('#checkoutButton').prop('disabled', true);
else {
$('#checkoutButton').addClass('dark-blue');
$('#checkoutButton').prop('disabled', false);
}
}
And in the HTML: <button id="checkoutButton"></button>
Compare that to how it would be done in AngularJS(In the controller code)
scope.isCartEmpty = function() {
return cart.length === 0;
}
(In the HTML) <button ng-class="{'dark-blue':!isCartEmpty(), 'light-blue':isCartEmpty()}" ng-disabled="isCartEmpty()"></button>
The AngularJS style has the following advantages:1) Code reduction - The C language was invented to be an abstraction above assembly. Assembly code has a lot of low level details of moving values from registers, adding them, etc. The C language abstracts that away. In a similar way, AngularJS abstracts away the low level details of DOM manipulation.
2) Data binding - In the first example, it's important that updateCheckoutButton() is called wherever it's necessary for it to be called. Otherwise bugs could appear when the button is not updating when it should. AngularJS simplifies this to just listening for changes in the scope. It's possible to achieve the same thing using events, but again that's a lot of low level details of managing events and event propagation.
3) Declarative UI - <button id="checkoutButton"></button> tells me nothing about how this button behaves. The AngularJS example is immediately obvious on the button's behavior.
4) Unit testing - I can write a unit test to ensure that the value of scope.isCartEmpty is updating correctly. This test can be pure JS without any DOM support. It's much harder to test the DOM manipulation code style.
What I mean is that there's still room for someone to build another framework on top of AngularJS, with common features such as authentication, authorization, breadcrumbs, rich controls (grids, combos, autocomplete), etc.
I also find it harder to grasp than other frameworks like ASP.NET, RoR, Django, probably because you have to do so many things from scratch and because it introduces many concepts not commonly found on your typical MVC framework.
The non-existant widget story is where work needs to be done. Plus Google need to fix their Github issues/feature request faster. Have an option for company to pay for it, hahaha.
If you watch "The mother of all demos"[1] the structure is almost visually 95% the same.
I look at Angular and it's looks complicated - the article is about how complicated it is. Surely we should be striving for tools the everyday man can pick up and play with?
Lots of problem domains are difficult to model as trees because often, a node can be logically assigned to multiple parents, but the tree model requires it be physically assigned to only one.
Recently I bought a prepaid SIM card for a trip I am making to the USA.
In my bookkeeping system, I could enter it either as a transaction against the "Telephone & Internet" expense account, or I could enter it against "International Travel". What I can't do, because trees require mutual exclusion, is enter it under both. That breaks the model.
If instead Renaissance accountants had understood sets and relations, I might be able to log it against both and then derive whichever view of the data was necessary.
And that's the problem with hierarchical data. It privileges one and only one view of the problem domain. As soon as you need some other view, you are in trouble. If your project management system organises by project, then getting per-staff reports is now much harder. If your class hierarchy views A->B as the natural order of creation, what happens when you come up with cases where C->A but not C->B? You can't: you have to introduce complicated workarounds.
Hierarchies are simple to understand on their face. But they quickly come apart when faced with the real world and ad hoc queries about the state of the real world.
It's still the same problem: you have mixed the logical model and physical structure of your data together. You are privileging one view of the data over all other views.
I consider switching to a full graph model a complicated workaround for the limitations of trees. You now introduce new and exciting paradoxes and you will need to litter your code with special cases (B means C, but only when A is not an ancestor, otherwise it means D). Ask C++ programmers about the joys of multiple inheritance.
In some cases the logical model is a graph and in those cases you should absolutely model it as a graph. But modelling all problems as a graph is inadvisable.
Angular is a front-end framework for organizing large JavaScript projects. It requires a JavaScript run-time (such as a browser).
They're pretty wildly different.
<span ng-switch="foo">
<span ng-switch-when="bar">...</span>
<span ng-switch-default>...</span>
</span>
Is in some way easier or better than this: if(foo == bar) { ... } else { ... }
It also has this weird retro stuff like dynamic scopes and reactive programming. It's also really slow, because it implements reactive programming with dirty checking.Still not sure what problem it's trying to solve.
Which is a hard and important problem; nothing trivial.
Please reconsider whatever it is you think you're doing, it's seriously not helping anyone.
1) The first example is a template/view. It is reactively updated automatically when the values referenced are updated. It maps to markup on the page. The second example is a basic control structure that does nothing.
2)
<span ng-bind="foo == bar ? '...' : '...'"></span>However, it does fit in with a long line of tools whose premise is "Normal programming with normal control flow is an insufficient tool for the unique problems of ${DOMAIN}. We need to create a new programming model with its own syntax and exotic control flow to make things easier."
The appearance of the "if-statement-in-markup" (or "if-statement-in-flowchart-diagrams", etc.) is to me a sure sign of a certain kind of misguided system.
On the performance - it's going to be slower than doing everything in specifically optimised code, but it's almost certainly not going to be a problem. My project has a million+ objects in js once the interface loads and I have watches on a big chunk of that data and the interface is still snappy. Granted, there are bits where I have to be careful to make it snappy, but that's life. Development time is so much faster I wouldn't make the tradeoff for the world now.
Other frameworks also provide two way binding.
> better than in JS
Handlebars is much more like 'programming _with_ HTML' than 'programming in JS'
Furthermore, those who don't like annotation aren't writing JavaScript views, they're writing HTML templates and annotating them with some JS, which means the parent offers a false dichotomy.
Its one of the standard ways of developing WINDOWS applications. One example of declarative UI is HTML and CSS. You never write any "HOW TO LOGIC" when you are "printing" buttons, textboxs etc. on browsers. You just say <button> and there you go, you've a button there. You say <button class="red"> and lo and behold your button turns red. In that way you don't care "how" to print UI elements, you just focus WHAT YOU WANT TO DO rather HOW YOU WILL DO IT.
Declarative UI makes overall application highly testable and maintainable. You don't think how to "print" things on screen (write tons of binding code). Writing tests for the UI specific code is not only hard but messy. Without strong test-ability you can't scale your app without pains.
There is a reason why Google adopted this approach because world has learned the "best way" for building UIs. Google has probably half a decade of experience of building Google Web Toolkit. Right now Google Web Toolkit GWT has lot of similar concepts to AngularJS. Microsoft has probably 20 years experience of building UI framworks. Right now WP8 and WPF are all declarative UIs. In near future you'll see almost every UI framework across all devices technology will employ more or less the same concepts as AngularJS has now.
AngularJS is solving the testability & maintainability problem of large scale Javascript apps.
<span>{{ someValue }}</span>
And in the controller JS file do switch (foo) {
case 'bar':
scope.someValue = 'hello';
break;
...It is blowing my mind, how in 3 years the environment is so different. I'm sure these things existed on the fringes, but its very mainstream now.
When I left, JQuery was the in thing, it was pretty rad. Today i'm doing MVC, unit testing, and code coverage WITH JAVASCRIPT!
ASP.NET MVC is pretty slick too.
That being said, I love working with it. It's definitely cumbersome feeling at times though. Despite that, I like the idea of self contained modules, the html binding, and all of the semantics that go with it.
It's definitely an acquired taste though. There are many things that you can do with it that you probably can't take to other javascript frameworks though.
it is the right thing to learn right now anyhow, as the concepts naturally leads to web components, which will probably be the future of app development (cue polymer http://www.polymer-project.org/).
That said; once I realised what it is doing, I quite like it and it has led to some of the cleanest client-side code I've written.
Not that you shouldn't be testing your JS, but that the tooling gets in the way of shipping code.
A strong point in AngularJS's favour when a bunch of my coworkers were evaluating different frameworks was that it was designed with testing in mind: dependency injection as a pervasive feature is huge for us, because that's what we've been doing on the server side (C#) for a long time. Angular seems to be encouraging its users to modularise code more, and that's a good thing.
We have fairly comprehensive test coverage of our JS code, this is pretty easy if you take the happy default path of Karma and Jasmine. From my point of view, we've always had comprehensive server side testing, now that a lot of logic has shifted to the client and sits on top of a much lighter-weight API on the backend. All that JS code needs to be tested.
Apart from lower level unit testing, we also have integration tests which drive real browsers through our apps. This is pretty important to make sure the whole thing including the server side code works together properly. These gain immense value as the project grows in size and complexity.
The biggest problem AngularJS has is documentation. Some of it is missing, some of it is poorly explained, all of it should have examples. The developer guide and API reference both need a rework/rewrite. I think the team should focus on this after this major 1.2 release.
What comes out of poor documentation is that best practices are not immediately obvious, because if you're trying to guess things from just the API and just picking a random way to achieve your end result, chances are you're going to do it wrong. This has been identified at https://github.com/angular-ui/community/issues/1 so hopefully it's going to get better.
The major thing which I think almost everyone gets wrong at first are the relationships between templates, scopes, controllers, services and your actual data. If you get this wrong you'll either end up writing a bunch of tricky workaround code, having memory leaks or subtle data binding bugs.
I highly recommend everyone watches the best practices video from the AngularJS team at http://www.youtube.com/watch?v=ZhfUv0spHCY
In fact, most or all of angular concepts can be found elsewhere in other frameworks such as spring/guice(IoC), any decent ORM (dirty checking, "digest cycles"), WPF (directives/code-behind,declarative, whatever you want to call it), etc.
Although I feel that its source code is hard to read sometimes, I'm happy to let the framework do its magic and allow me to write apps without getting in the way. I can write modular components and test them with the angular/grunt/karma combo. If I need tabs, modal or whatever I can pull some libs and get it working quickly. If size/speed's a serious concern, I'll write my own lib/directive/etc.
In my experience, this is much closer to how native development works. In an iOS app, you have your view controllers which are responsible for responding to user input and making sure the models are in the right state. The views just automatically update themselves based on those models, much like Angular. So if you're writing your Angular apps correctly, they should be very similar to your native apps.
Angular is more mature, well thought out, better supported, much better documented, is logically consistent throughout, supports the concepts of MVC properly (unit testing is a breeze), much easier to use with REST backends I could go on and on.
There simply is no comparison.
Ember, even after the major changes recently, feels like someone's idea of how MVC should be done without consulting any existing standards or ideas about MVC or REST or any related technology and just throwing in things without thinking them through.
Angular feels far more trustworthy and serious to me than Ember by many orders of magnitude.
Neither though are even close the level of documentation and support and widespread relevant reference apps as I was used to in the .net world (for example), but Angular is the more solid choice in my opinion.
I would recommend Angular over Ember at this point in time unreservedly for making actual applications versus websites.
I invested a decent amount of time now in both Ember and Angular (also Meteor) writing a proof of concept app for the next major release of our business software.
Frankly most of the negative comments I've seen here either way are low on actual knowledge and high on axe grinding and emotional reactions.
It's interesting when you see a post here that is in your domain of expertise and then see the reactions to it. It really makes you wonder about all the other stuff that you might not know so much about and how much you can trust what people post about those topics.
A movie from the 80s about an autistic savant.
It could reflect on my density and stupidity (can't read code too well) but so far I've had good track record.
I tried understanding and learning Angular.js but got lost in directives, dollar-sign prefixed identifiers, services and other custom terminology.
One way to make sense of it is to look at the source, and that was pretty painful.
Anyway so far it fails my smell test so I'll pass it up. Maybe later will revisit.
When I had a first glance on it, I didn't really get it. Only after several hours reading the docs and experimenting with code I got what they were talking about things became somehow clear (lots of aha-moments "ahh, the service is just a fancy name for an angular-managed singleton, now I see...").
This is certainly not a trivial part of the code (tree traversal is a bit obscure, they even have comment that it is; it probably could be much nicer if JS would really had graph handling in the standard library), but certainly not "hard as hell", it's more likely "if you need to understand this (as if something goes wrong or works in an unexpected manner), you have to spend some time to get how internals actually work".
I have seen the code that is very hard (if not nearly impossible) to understand without some special knowledge. Angular, in my opinion, is not even remotely close.
But in overall, Angular is very easy - after you spend a day or two toying around, groking the terminology and core concepts. Way easier (in my opinion) than, say, Sproutcore (which I found too complicated to my tastes to invest time learning).
In my current web app I have a lot of work with collections, and each change should be reflected on UI - without directives and bindings it would be hell. With AngularJS even code is clean.
Ironically, angular speeds up lots of things, but also makes me unproductive in others. Yeah, the end resulting code is usually shorter and cleaner. But I waste so much time with hard-to-understand errors that it's often not time wisely invested so far.
Still, I use it and as I become more proficient with it I expect these random hard to find errors to slowly disappear. (Hey, if one time in my life I was good enough to parse C++ template error messages, I can do it for angular ;-)
Angular is certainly a platform. I'm usually skeptical about platforms like this, but after using it for a while there are enough wins to justify the weirdness.