JSChannel 2015 - Angular 2.0 Vs Aurelia

Angular 2.0 Vs Aurelia by Adriaan de Jonge

The new direction Angular 2.0 is taking created a lot of discussion in the community. Some people love it, some people hate it. Most people agree there is room for simplification, performance enhancements and native support of new language features. Not everyone likes the way Angular 2.0 is picking these up though. There is an alternative direction: Aurelia. In this talk, we'll do a side-by-side comparison and have the audience answer the question: Should you keep all your eggs in the Angular basket?

Help us caption & translate this video!

[eikaramba]

just wanted to say, good presentation. you did a great job showing angular1(as a starting point), then angular2 and finally aurelia. Was easy to follow. I was a big fan of angular1, now i'm eager waiting for aurelia.js - but i'm still open to angular2 if it changes and gets more easier to use

[charlehpock]

I've used ng1 before and loved it - though there were some strange quirks in the framework and a bit of a rollercoaster of a learning curve, either way, when I tried it I thought it was the best thing since sliced bread.

Having used Aurelia for a couple of months and writing a production app (even at this early stage) plus plenty of lurking in the community/gitter rooms I can certainly comment on some of the differences between the two frameworks. 

* Aurelia is modular (hence the number of requests to load the application). This means you can replace parts of the framework with other implementations - e.g. swap out the promise library, replace the router etc. If you bundle your application you can get this down to a very small number of requests - though in HTTP/2 a non-bundled application which will probably be served via CDN will likely come down the wire quicker and make use of cache better - so Aurelia is forward thinking in this respect. I'm not sure if you can do the same with ng2, either way content delivery is, at this moment, moot compared to the componentised nature of Aurelia. It will likely come into play later when websites don't need to put an entire bundled JS framework on the wire and can instead provide only what's required to render the current module until the user navigates.

* Aurelia tries to do a lot for you without being intrusive - i.e. it has a lot of sensible conventions which do what people want 99% of the time without having to be explicit, with the option of being explicit when necessary. I believe you have to be explicit in ng2 for almost everything. This means that maybe 80% of your code is actually Aurelia-free, there may be little to no framework code in a viewmodel - that means if you need to move to another framework for any reason, you can do so without hassle and with minimal refactoring.

* Aurelia has a consistent human readable syntax - almost all commands go through "attribute.action" syntax or ${ interpolation } syntax. ng2 introduces hashes for some syntax #, (event), $, * and all sorts of other symbols which are hard to pick up without prior knowledge of the framework. I think Rob also mentioned there's a fundamental issue in that these symbols are not valid DOM syntax too and so in certain situations, 3rd party software may have trouble reading the DOM when they are included.

* One I'm not too sure on from an ng2 perspective but Aurelia has a "best scenario" binding engine which evaluates which type of binding to use per property - that is, it provides some conventions out of the box for stuff like "input" so that it knows how to watch for changes and also picks the most efficient change tracking mechanism. This minimises dirty checking (there are also some helper annotations you can add to your viewmodels which allow the framework to use object observe for property getters given a set of properties those getters depend on). You can even leverage this functionality for yourself - I'm not sure ng2 has the same approach, I'd be interested in someone going into detail on the angular approach

* So far it's pretty quick - and I don't think it's been optimised. There's a whole DOM update batching system (the micro-task-queue) which stacks up DOM changes and applies them at once. It sounds quite similar to React's DOM diffing (I don't think it is exactly that), but certainly I've had no performance issues. I created a data grid and I've not got round to adding virtualisation yet and it's all pretty performant with several thousand rows. Aurelia team has been working with other frameworks such as SystemJS etc to ensure performance is good - I don't even think Aurelia is officially beta yet. I'd like to see a perf comparison between the two frameworks in the near future

* Every time I've come across a feature that I think could be added to the framework Aurelia team have either already added it or there's an open issue to add it. It moves fast - at this stage this does mean some breaking changes occasionally, but nothing that I had to spend more than about 10-15 minutes refactoring for (and I'm writing in ES6 with a text editor so I'm not using a refactor friendly IDE)

* You can write Aurelia in ES5, ES6/7 (transpiled), AtScript, TypeScript etc etc - the choice is yours


There are maybe several dozen other comparison points - I can't see anything that ng2 does that Aurelia doesn't - I'd love to hear this from a ng2 perspective from someone experience with the ng2 preview

[alexsales]

Take this with a grain of salt since I'm actually rooting for Aurelia to be a success. Aurelia's syntax and adaptive-binding is the future and the learning curve nowhere near as bad as "the Angular way". Also, wide adoption for ES6 in the dev community is seriously just around the corner which I feel gives Aurelia a leg up in the competition by being the first framework to fully adopt it.

If you're debating between adopting Angular 2.0 vs Aurelia, make sure to look at both their syntax (expressive is better), ease of learning (syntax that closely mirrors plain ol' familiar vanilla JS is better), broad language support (ES5-compatible, TypeScript and CoffeeScript too), and flexibility (coding by convention is better, but if you're a little more hands-on you don't have to follow its conventions). 

Some would say speed and performance are super important, and I agree for the most part, but I think the "actual" speed difference among the various frameworks out there are generally so narrow that the end user probably won't notice much of a "perceived" speed difference. (imho, a USER'S "perceived" page speed is way more important than meaningless framework speed tests that say little about the quality of a user's front-end experience.)

[chashdeveloper]

I still prefer to use Aurelia. As some of the posters says they have many projects, and apart from Rob some other developers may have contributed less in one or other projects. Anyway framework looks pretty good to me, with less noise

[cdsutton]

It was obvious in the very start this video was designed to upsell Aurelia and make Angular 2 look difficult. The video label is Angular 2.0 vs Aurelia -- so why add confusion and include Angular 1? The purpose was to add confusion. Then to show several ways to make angular 2 get errors before showing the simple working format.. if the goal was not obvious just watch again.

[louislewis]

I personally do not agree with the methods used to perhaps guide a viewer who would not know better to choose a framework over another one. Having written one or two frameworks myself while under corporate employment, it is not new to me to see 1 person have a significantly higher commit count than others. Having been part of development teams consisting of more than 80 developers, in one specific framework I had seen 1 developer who had understood the initial design, had the required know how and specific skill set, to implement that which was required. I also saw no other commits in the core framework for more than 6 months. This does not mean the project was late, mean that there where no other developers involved. I think people often incorrectly assume how statistics should look when building a framework, more importantly most people do not know what should be used as statistics. In the example framework I am referencing, the outcome of by your definition a "one man band" was and is still the most successful one ever written in that company.
Before I continue, I want to make it known and clear, that I have no pre-determined allegiance to a specific framework, that you may or may not have referenced. Ultimately I will choose one that first of all provides me as a developer with a fantastic workflow, I want to enjoy writing code in framework X, if I don't enjoy it, I simply will choose another which satisfies those needs. I also look at community, and for me personally I have not seen one in a long while as that which Aurelia has got. I like it even more knowing that the actual core team are themselves in there talking and chatting, this to me is invaluable. The fact that the latter community has gotten to its size in such a short amount of time, is simply mind blowing and says a lot, specifically how other developers see the framework. Lastly in defence of Aurelia, I think that while your video shows an impressive amount of commits to Angular 2.0 and by a good team size, holding that in one hand then in the other bringing in the Aurelia side, then finally comparing the results on screen. I think this alone, should make one wonder if your methodology of choosing a framework is all that relevant.
To make another point, you where referring to TypeScript as a native language for Angular 2.0 and that by doings things in that native language certain aspects of the runtime would be better and or more performant and this could not be further from the truth. TypeScript is a design time language which once compiled is simply javascript. I happily use TypeScript against Angular 1.x, 2.0 and Aurelia.
I have been sampling the Aurelia environment for a little over a week now, and have made a choice to re-write our product currently Angular 1.x using Aurelia.
That said, I still use Angular at the moment, but for smaller applications and for demo's used in proof of concept's for clients. Simply because right now at this moment in time, it is simpler than the other choices and it is what we know... for now. I did also spend time getting to know the playing grounds for Angular 2.0 and personally find the development experience horrible and not to my liking and as a result will stay away from it.
I would like to know though why it sounded like you where suggesting from either your research or from someone else's that using classes would be considered bad, wrong or anything other than positive.
Coming from a history of using languages that do support that type of construct, I could not be happier that I am able to use this in the web environment too, it just makes modelling real life problems that much easier and provides a certain level of encapsulation that I do not want to work without.

[miket]

I found your characterization of Aurelia as a 'one man band', based on the number of Github commits, extremely misleading.  You seem to have taken the Aurelia commit stats just from the Aurelia/Framework repository. Aurelia consist of a number of loosely-coupled components, each developed in separate Github repos. and the Framework essentially provides just a convenient pass-through to all the other components.  If you aggregate the commits in the other sub repos under Aurelia. a different picture emerges with many more commits by 14 core developers and others who have contributed.

[bicunisa]

You don't put the ng-repeat in the UL you put it on the LIs.

[robinmattheussen]

I do find the comment "I don't believe in TypeScript" at the end a little strange. I mean, you don't like it, I get that. You're free not to like it. But in the end, TypeScript is just a tiny superset JavaScript, and most of its features are entirely optional. Most type annotations can be omitted, almost everything can be inferred (or flat out declared as 'any'), stuff like interfaces are totally opt-in, etc. The cost of adoption is extremely low.

It's true that there are now some parts of Angular that basically handicap you if you don't use TS (the DI system for example), but like I said, adoption cost of TS is extremely low and is almost entirely opt-in. I'm quite sure you can teach the basics of TS to a seasoned JS dev in 10-30 minutes and put them to work. It's just some minor sugar on top of JS. It seems a bit odd to let something this small impact your framework choice. At least that's how I feel.

Don't get me wrong, Angular and TS don't get me all ready and excited to write front-end code either.

Another point I'd like to make is that I'm a little tired of each and every one of these comparison blog posts, presentations etc. always involving the comparison of numbers on the individual projects (how many github stars, how many commits, how many contributors, how many jobs are their available, etc. etc.). Sure, the project needs to be healthy, I get that. However, I think the problem lies elsewhere: these frameworks we are using are just too massive. If we keep on adopting these colossal frameworks, we will end up choosing the most popular each time because we will be too afraid of wasting our time learning these big frameworks. I think the answer is to start moving more towards smaller and more modular libraries/frameworks. In that case, you can at least ask yourself "Is there enough activity, and if not, can I maintain it myself?" and pick the frameworks that fits your need instead of picking the most popular one. I'm so tired of seeing companies adopt technology and buying software based on what everyone else is doing. If the project is being maintained and you think it's a good fit for your case: go for it. And if learning a framework really costs an entire year, maybe don't go for it.

[PatrickJS]

The Angular 2 example is really bad and misleading.
Here's the correct way, which is nearly the same as Angular 1, that is the correct for the talk
<h1>{{ message }}</h1>
<input [(ng-model)]="newItem">
<input type="submit" value="add {{ newItem }}">
The speaker is also running Angular 2 in development mode rather than production. Even with all that said this is Angular 2 Alpha vs Aurelia Beta