Angular 2 VS Aurelia ? 2017

Riy picture Riy · Jan 25, 2017 · Viewed 10.2k times · Source

I have been evaluating many SPA frameworks. I am stuck with following two and cannot decide which one should I use for my coming project:

  1. Angular 2
  2. Aurelia

Both framework promises great deal of operations. I was really excited about the angular 2 as it is backed by Google and has been adapted by many big companies. So I did some comparison of my own (finger crossed) excuse to Angular fans ;). I am a fan too but.....

Here is what I did:

Angular 2

  1. Downloaded QuickStart from https://github.com/angular/quickstart/archive/master.zip
  2. Followed the instruction of quick start and run the application, so far so good
  3. Now take a look at Network tab in chrome Developer tools. WOW, I see at least 36 http request and total size of this simple application is about 1.4MB minified.
  4. Googled a bit and found that we can reduce the size and minimize up-till 50k and http requests to 10 by following AOT, treeshaking, gzip.... alot of other methods. Fair enough.
  5. Finally Compared the coding style: in order to just display Hello Angular we need to create main.ts, app.module.ts, app.component.ts. Every file must include @Component() decorator thus requires to import angular core almost on each module. Then import that component to module.ts and then bootstrap the main.ts.

Aurelia

  1. Downloaded from http://aurelia.io/downloads/basic-aurelia-project.zip
  2. Followed the instruction on the quick start.
  3. Added two files app.ts and main.ts with hello world in it.
  4. Run the application it worked so far so good.
  5. checked the network tab in developer tools, it displays 0.9MB and 9 http requests are made.
  6. After following a same procedure to minimize the size with gzip and bundling it comes to around 170kb with 5 http requests.

Finally compared coding style of both frameworks. Clearly Aurelia has a clear code easy to understand.

The only disadvantage I can see in Aurelia is it's a fairly new and almost unknown to many JS Developers and has poor community so far.

I see them as Microsoft Windows(Angular 2) and Apple(Aurelia). Apple is more stable and has specific range of users on the other hand Microsoft Windows is almost every where.

What should I do? Please help.

Thanks

Answer

Marc Scheib picture Marc Scheib · Jan 25, 2017

Perhaps, the following AMA is useful for you, although it is a little bit older now: AMA with Aurelia Team

The most important Q&As for you are the following (only quoted):

Do you believe Angular 2.0 is deviating from standards ? Does Aurelia aim to be standards compliant and independent?

In this case, it's not a matter of belief, but of fact. If you look at the HTML specification and you look at Angular 2, you will see that they are not harmonious.

Over a year ago the Angular 2 team introduced their symbolic binding syntax. While that was technically standards compliant HTML, it was pointed out by the community that it was not compliant SVG (I have not confirmed that myself). Although members of the community pointed this out, the Angular 2 team made no changes to their design. As of Beta 2, they've actually adopted additional attribute/element syntax which involves case-sensitivity constraints. HTML is not case sensitive and thus this breaks with the specification. As a result, it is actually not possible to get Angular 2 to work natively with the browser's parser, the DOMParser API or even innerHTML because those mechanism "normalize" casing in different ways depending on the browser and thus casing can't be "trusted". This means that, if Angular 2 depends on casing (ie ngFor and ngModel attrs) then the browser won't be able to natively handle that. To solve this problem, it is my understanding that the Angular 2 team had to implement their own proprietary markup parser. Bottom line: I'm not sure what they are calling their view language, but it isn't HTML.

For Aurelia, standards compliance is very, very important. We've worked hard to align with current and emerging standards and to not do anything that would conflict with them or violate them. We have to add additional capabilities, which are not covered yet (such as data-binding) but we've done it in a way that is compliant with existing and emerging Web Standards. We plan to continue in that fashion indefinitely because we want Aurelia developers to be good Web developers.


I come from angular, why should I use aurelia and not angular 2? My advantage is that I already know angular and that there is huge community. Thanks.

First, I think it's important to correct the assumption here. The assumption is that Angular 2 is just an incremental or evolutionary change in Angular 1. That is not true. The only thing that is the same between Angular 1 and Angular 2 are the letters A, N, G U, L, A and R. They are two completely different frameworks, written in different programming languages, with different architectures, different concepts, different development methodologies, different capabilities, different communities...different everything.

I'm on my soap box here...but I think it was a bit deceptive to call this framework Angular anything. It's a completely new and different library with no ties to the old. It should have been give a new name. However, they gave it the same name for exactly the reasons you mention. They want you to not think about adopting Angular 2 because you believe it's just an incremental or evolutionary change, not something completely different.

Porting from Angular 1 to Angular 2 is massive work, even with their "migration" tools, which aren't migration tools at all. They are integration strategies. Migration actually takes a lot of work. You have to completely re-write and re-think how to write your application. Some Angular 1 application will not be achievable in Angular 2 because of they way that Angular 2 has locked down or removed certain capabilities related to dynamic composition of UI and observation of binding expressions.

Interestingly, it's actually easier to port an Angular 1 application to Aurelia. We have a ton of people in the community who have done that and have been very happy with the experience. Here's a short list of advantages that Aurelia has over Angular 2:

  • Aurelia is a much smaller library. Angular 2 is 750k minified and that does not include a router, animation or http client. That's not something anyone should ever think of going to production with ever. Aurela is 350k minified and that does include a router, animation and an http client. If you are targeting modern browsers and don't need all the polyfills we provide, you can even reduce that size by up to another 100k.
  • In the independent dbmonster re-paint rendering benchmark, Aurelia is as fast or faster than Angular 2. With our upcoming ui-virtualization plugin, it's almost 2x as fast as Angular 2.
  • Aurelia is standards compliant; Angular 2 is not. See the other AMA answer for details.
  • Aurelia better supports separated presentation patterns such as MVVM. MVC and MVP. In Aurelia, there is a clean separation between views and view-models; all responsibilities are in their proper place. In Angular 2, you have to configure your view-model with internal implementation details of the view, thus breaking encapsulation and making it difficult or impossible to re-use view-models or views. It also greatly increases maintenance cost and makes it harder for teams of developers to work in parallel on components.
  • Aurelia is very unobtrusive. For the most part you write plain ES 2016 or TypeScript code. You don't see the framework very much or at all in your JavaScript code. It stays out of the way. This is extremely important for the longevity and maintenance of your code, as well as learnability and readability. Angular 2, in contrast, must be imported everywhere and its metadata is required throughout your code. It's very configuration heavy, just as much as Angular 1, only the configuration looks different.
  • Aurelia is more interoperable with other libraries than Angular 2 because we don't use a digest or abstract the DOM unnuecessarily. The closer a framework stays to standards and the more out of the way it stays, the more interoperable it will be.
  • Finally, Aurelia is backed by Durandal Inc. The sole purpose of the company is to build Aurelia, its ecosystem and to support it. On the other hand, Angular 2 is one of six competing UI frameworks inside of Google. Each one desires to make themselves look like the "Google blessed stack" but none of them are. In reality, Google official does not back or support any of these libraries. They are open source side-projects of the various teams that build them. In the case of Angular 2, it's built by the Green Tea team, whose real job is to build an internal CRM-type application.

There are many other reasons...but that's a quick few.