AngularJS made me stop hiding from JavaScript
Like most Java developers I used to have a serious aversion to JavaScript. I was quite happy to delegate any 'scripting' stuff to fellow developers. At my current project, we initially decided to use the Vaadin web framework. It seemed the perfect choice for creating Rich Internet Application (RIA) user-interfaces without writing a single line of JavaScript. However what originally seemed to be a sensible choice, turned out to be a dead-end:
- Vaadin is highly dependent on http sessions and as it turns out doesn't play well when being clustered.
- No default support for server push; also the 'most stable' Vaadin add-on turned out to be quite unstable and incompatible with clustering.
- No wrapper existed for v3 of Google Maps; as an alternative we used the OpenLayers Add-on instead. However this add-on turned out to be not so stable either and lacked the user experience of Google Maps to which users are accustomed to (like dragging the 'pegman' on the map in order to show street view).
In order to integrate Google Maps v3 into our application (and fixing our OpenLayers issues) we initially considered creating a so-called client-side Vaadin component. Such a non-standard Vaadin component would have required us to write (at least some) JavaScript and would have been a burden on the complexity of our application. Instead of writing the Google Maps wrapper we decided to dump Vaadin and rewrite whole user interface using JavaScript and HTML. This allowed us to move to a completely stateless architecture (without http sessions) and implementing server-push using a (stable version of the) Atmosphere framework. During a 2 week sprint a co-developer and I migrated the google maps related functionality to HTML5 / JavaScript technologies. Along the way we had to gain knowledge about the JavaScript framework of our choice. Based on prior research we came up with the following short-list of Javascript frameworks being either BackboneJS, AngularJS or EmberJS. We both already had some prior knowledge of BackboneJS and were both interested by AngularJS and thus decided to give it a go. Although AngularJS was actually quite new it stood out from the rest with its extensive documentation, built-in support for unit testing, its 2 way binding and clean MVC implementation. Additionally it requires you to only write a minimal amount of JavaScript to get things done. At the end of the 2 week sprint we decided to investigate EmberJS as well. Although this framework should be just (or even more) flexible and clean as AngularJS it turned out its documentation was limited, out-of-date and its API was still in flux. And (even more important) we where simply unable to even create simple test application using the latest stable version at that time With EmberJS removed from the short-list, only BackboneJS and AngularJS were left.We decided to go for AngularJS as it simply looked the most promising... and we never felt the need to switch afterwards. So what made AngularJS the perfect framework for us:
- The two way binding, it's just perfect; instead of fiddling around with jQuery expressions you simply attach a model value using a "ng-model" attribute on your HTML element. Any change made to the model value (i.e. as part of the logic of a controller) will instantly be reflected on your HTML element; and any change made by the user for this element will also be instantly updated to the model
- Unit testing is a first-class citizen. Not only does AngularJS allows easy testing RESTfull services by providing mocking for it, it also offers the $document, $window and $log features as mockable replacement of its global variables document, window and console.
- HTML and MVC controller logic can be get quite clean; a lot of display logic like disabling buttons and setting CSS classes can simply be implemented using expressions in HTML. Alternately widgets like the jQuery Datepicker can cleanly be integrated by creating a new HTML attribute for it (that triggers the set-up on an existing text input element) using a so-called "directive".
- No need to 'extend' from fuzzy base-classes in order to implement a controller; instead a standard JavaScript (constructor) function will suffice and all dependencies like the view model (its "scope") will be automatically be injected by Angular based on the existance of function parameters and its names.
- Last but not least... it's really fun to work with
So... Java developers is about time to stop hiding from JavaScript. Let's be honest HTML5 is the way of the future and, unless you exclusive work as a back-end developer, there is simply no hiding anymore.