Aurelia VS AngularJS 2.0
Angular
I spend a couple of hours familiarizing myself with angular 2 for a pluralsight audition which resulted in the following screencast.
Aurelia
I then got an interesting comment that aurelia is the client side app framework to use. I try to be agnostic about the frameworks, libs and the tools that I use, so spent a couple of hours familiarizing myself with aurelia as well which resulted in the following screencast where I port the angular app in a matter of minutes.
Conclussions
Angular is at the time I’m writing this post in alpha and it’s changing a lot, which is really frustrating since something always seems to be broken and documentation/examples are inaccurate even on their own site. It’s hard to keep track of if it’s *for, *ngfor, *ng-for or something completely different from one build to the other.
I like that web components are the mainstay and it unifies react.js, angular.js and polymer. One big thumbs up to that $scope is gone, but also a big thumbs down for that two-way data-bindings is gone. Kind of a deal breaker for me. Angular has teamed up with the typescript team and they are pushing it which definitely is a good thing but not angular specific ergo no credit for that.
Learning curve was about the same for both frameworks, both are using the ES6 module loading system and depending on runtime transpilation to ES5 for now. What tips the scale towards Aurelia for me is that it’s cleaner, supports two-way data-bindings and that it’s all about conventions over configuration/code. That’s my opinion after a first look at both frameworks, watch the screencasts and judge for yourself.
As I mentioned I try to stay agnostic about the frameworks, libs and tools that I use, but I’ll definitely give aurelia a try for my next web project and try to forget that there is an IDE named VS Code out there. *BOOM* ;-)
EDIT: About 2-way data binding
It’s ridiculous how many emails I’ve received about this, but really, there is no 2-way data binding in angular 2. Do not confuse the square-bracket-parenthesis-syntax [(ng-model)] with two-way bindings — it one-way binds to the property with square brackets and listens for events with parenthesis. They obviously realized that typing
is cumbersome so they introduced a new directive called ng-model
So now you have very angular specific code in your view templates instead of just two-way binding to the DOM property. I refactor the code to bind to the checked property from this screencast in the beginning of next one here.
I like angular
Don’t get me wrong, I like angular and I will use angular 2, but I don’t mindlessly love everything they do like some fan boy. Stay open minded people and don’t be afraid to express your opinion, it’s just yet another framework. You don’t need to love everything the angular team produces.
By the way, make sure to check out my latest screencast on angular 2 forms!
Until next time, have a nice day!
Source code as always at @ https://github.com/ajtowf
Links: aurelia.io angular.io
Keywords : Visual Studio Code, HTML5, JavaScript, AngularJS 2.0, Aurelia, TypeScript
2-way data binding isn’t gone, it was resurrected in last iteration, see AngularU videos.
Well, it really is, if you’re referring to the square-bracket-parenthesis-syntax [(ng-model)] it one-way binds to the property and listens for events. They obeviously realized that typing
is cumbersome so they introduced a new directive called ng-model
So now you have very angular specific code in your view templates instead of just two-way binding to the DOM property.
Good luck changing framework from there, you just married with angular.
Thanks for sharing. I really liked the conversion vid to Aurelia.
Code in Aurelia indeed looks way more cleaner. With all the respect to Angular, one needs to admit that template syntax not that elegant at all, not to say ugly.
ViewModel classes definitions in Aurelia also look simpler and straight to the point too. While meta-tags/annotations in Angular 2 adds extra verbosity.
Might be a stupid question, but anyways;
I’ve just started out with typescript, and feel that Aurelia is more of a fit for me than Angular.
Can I work with Typescript and Aurelia, or will this be a lot of hassle?
You can use typescript with any framework or lib. It’s just a tool for static typing during development that transpiles to javascript. Check out typescriptlang.org. Hope you liked the videos!
I really did, @ajden:disqus! Actually, I subscribed and applied for notifactions once you post updates, as I really want to keep watching you expand that app with the parts you mention at the end of the video [Aurelia version] :)
Keep it up!
Can you migrate your other videos from Angular to Aurelia I mean the live coding sessions one :)
Excellent idea, added it to my backlog, just need to prioritize it! :-)
I agree with Ajden – I have written several thousands of lines of AngularJS 1.X code and battled with incompatibilities between version (serious stuff like random scope changes), high complexity, and bad/lacking/flawed documentation. I think that, at the root of all this, what you are looking at is a difference in mindset: The Angular guys, clever as they are, seems to favor complicated things and a “masters of the universe” approach and so they came up with a concept-bloaded framework. This is the last thing you want in a development department since it is not conducive to productivity and I am afraid that this mindset will still be around for Angular 2.0 – so, I am also considering porting to Aurelia.
Angular 1.x documentation was actually pretty good. In opposite, Aurelia is incredibly poor documented, at least now, which makes learning curve extremely steep.
Have you checked out the primary documentation at aurelia.io? Harsh to say that it’s poorly documented. The angular community is ofc bigger can’t argue with that. Just saying aurelia looks promising.
Yes, I agree that Aurelia looks promising, however it’s not easy to do anything that was not covered in official doc. So you end up browsing dozens of repositories, because framework is distributed across multiple repos. For example, templating submodule (https://github.com/aurelia/templating ): you will not find any documentation in the repo itself. To me it doesn’t make it easy. But hopefully, documentation will evolve soon.
You are right, the Angular documentation got better, but I started on the 0.X versions and was looking at the initial descriptions of e.g. Directives :-)
So agree. And that was just AngularJS 1.X. Just look at the complexity of AngularJS2.0 code and you can’t help but wonder when it will settle down to stable. Yeah, it will work like AngularJS1.X did at the same stage of dev., but then again, who wants to relive that again. And I was just starting to trust AngularJS 1.X code as becoming really stable and boom…new version.