Within the last days we (me and another developer) implemented some kind of “generic business entity creation application”. Kind of weird name of course. What it should do, is to provide a web application which allows us to create instances of any business objects (aka Entity) for a business application we´re working on. Of course that kind of problem is already solved if you e.g. go for Grails. But in particular I had that idea to implement it with AngularJS as this framework seems so full of features for client development that it is worth taking a deeper look at it.
It turns out that this is one very complex task to implement with Angular. Why and how we solved it will be described somewhere else but we had some very impressive findings why Angulars architecture makes it is so cool.
First of all: It comes with all features you need to build a full blown client side application. This is a kind of generic sentence, right? But it´s true, you got everything you need.
- Databinding for simple fields and sets of data
- Statebinding for html controls
- Validation support for html forms
- Built-in support for invoking server-side operations asynchronously
- An event system to sent messages within your application
- Dependency injection and custom client side services
- A programming model for extending Angular for your own MV* components
One could say that also other client side frameworks and toolkits do that. Really? Which ones?
Of course I´m a Java programmer so I´m into client toolkits running on the JVM, e.g. Swing or SWT and none of them has such fatures. It´s the opposite of that: They miss all of those features. E.g Swing: There is no concept for binding (Java) beans holding you business data to widgets. Or something that makes a control visible depending on the state of you business data.
For me this is a waste resources cause you got a very powerful runtime environment for rich client applications on your machine that solves so many problems we have with such client runtime environments: Your browser!
But the most mind blowing thing in Angular are directives as they enable something everyone seeks for when building software components:
Reusage with directives
This is the most powerful part of Angular. In once sentence: You can extend HTML for custom tags and attributes adding the functionality you need. From a business application developer point of view this is essential. Our business analysts come up with some kind of component based approach when describing UIs (and I will not raise the question why BAs deal with UIs. Of course they shouldn´t but the truth is: They do!) saying “I have a drop down box here and it should display something on the left, once I choose something from that list”.
You can start to explain them that there is no such thing as a “drop down box”. You can have drop down buttons or combo boxes. But nothing like a drop down box. Or you don´t tell them but developers that they have to create two components – one combo box and another label for describing the thing which is selected from that combo box. Or you simply enhance your componentset for this “drop down box”. BA´s will understand that as they come up with it, developers will understand it, as they read about these components in specifications written by BAs.
To get an idea of it, take a look at this fiddle. Of course it does not explain how to implement a directive in general but it shows how easy it is to hide such a functionality behind a self defined HTML tag like
<div ng-controller="DropDemoController" class="container-fluid"> <drop-down items="dropDownItems" /> </div>
Isn´t that nice? This custom tag encapsulates the logic of selecting something from a combo box and displays additional information in a label on the right. What you got is a fully reusable component. (You can also clone the example from GitHub here which can be run by Grunt.)
A lot of. There is much much more what makes Angular so fancy. E.g.
- animations which I haven´t worked with yet.
- The surrounding built-system based on grunt and npm which guarantees a very short code-change-build cycle.
- The general idea of having a rich client running in your browser accessing server side operations by tiny, self describing REST services.
And so on and so on. Many room for more about Angular.