Angular 2 - Trial Run

I’m currently still in EST in SF at the Angular U conference. I figured I would give ES6 and Angular2 a try with the official documentation before I hear the keynotes and all.

I started from the “Quick Start Guide” (https://angular.io/docs/js/latest/quickstart.html). Sadly right away I found mistakes… The documentation says all that you need to install is the angular2 TypeScript definition. When the compiler runs it turns out you need a number of additional definitions in order to make the code compile:

tsd query rx rx-lite es6-promise angular2 --action install

Maybe the version of the guide hasn’t been updated to reflect changes in Angular.

Well anyways, after this the script did in fact compile and was fairly trivial. Now for my rant. I really love AngularJS. After developing a lot of applications with jQuery and getting fed up with the fact that there was no structure to my applications I set out to look at the various libraries and frameworks that best fit my needs and the demands of most of the projects I work on.

AngularJS was the least “preachy”, most overall functional and forward thinking framework. You didn’t need to embrace any philosophies, file structure, really much of anything. The only mantra that I associated with Angular is no DOM manipulation in anything other than a directive.

After developing with Angular 1.x for a nice chunk of time I have discovered that there is room for improvement and simplification.

Here is my brief list of issues with Angular 1.x. (Some of these are more limitations in its utilization and less issues with the framework directly)

1. Dynamic modules - Right now officially if you want to use Angular you need to load “all” of your modules at load time in order to use them. For large applications this is not only inefficient, but simply awful. For “websites” this is fine, but full blown web applications may be huge and if they are built to be single page applications you want the entire application to be rendered using one base HTML page. For large applications I use RequireJS to dynamically load needed libraries and scripts as needed. There are 3rd party libraries that dynamically resolve the angular scripts and trigger digests to propagate throughout the application and mix-in the newly loaded modules. This works fine but its a hack at best. Which leads to the next issue.
2. Config phase restrictions - The config phase of the application is very logical. You have access to the raw modules and are able to modify them as needed prior to initialization. This is reminiscent of Spring Framework for Java that utilizes @Configuration classes to declare the Java Beans. This is performed prior to the dependency injection process which had greatly inspired Angular. Where it lacked was especially with my first qualm. No third party module was able to dynamically load and be able to affect the config phase of the application. For setting up the routing which is one of the core components of a web application, this is a very crucial step.
3. Directives are overly complex - Everyone says that the two way binding of Angular is what makes it special. They are wrong, directives is where the power of Angular shines. Two way binding is the obvious outcome with a MVC architecture trying to truly separate the application domains. Scope isn’t super complex. I do think some of the restrictions and subtleties of directives make them very awkward and confusing. While I understand the notion that only a single isolated scope can exists on a single element, it can make many directives difficult to work with. The need to manually invoke digests using $scope.$apply because Angular didn’t know otherwise was really messy and almost hackish. I think this was needed because of the lack of support for native Object.observe functionality.
4. $scope.$watch - If you are dealing with a large application you will want to limit the number of watches you use in your application. I try to avoid them as much as possible. They will consume memory and affect performance. Because the Object.observe function has not been adapted by all browsers Angular needs to perform dirty checking which can be expensive. This results in performance being affected and you are forced to use Angular’s broadcast system.
5. Broadcast can be improved - Avoiding the scope.$watch when possible forces you to use some sort of event propagation system. Angular has its own $broadcast and $emit calls that send data down and up (respectively through the scope) on the routing key specified. My biggest issue is not as much with the way that the broadcast system works, but rather that it is too limited. I want to see an actual AMQP style event bus that can queue events/messages and use actual routing keys much like you find in RabbitMQ. I have actually developed my own library (https://github.com/CyberPoint/eventBus) that is a JavaScript event bus. It doesn’t deal with Angular scopes at all, but it could. I find being able to use the dot notation hierarchy is just as effective as scope alone.

I hope to post a follow-up entry with how Angular2 addresses these items.