Recently, I had the opportunity to be involved in a project with one of Nuxeo’s Fortune 500 customers. They had customized the JSF-based UI to create a simple file browser for the Nuxeo Platform, but they weren’t completely happy with it.
They wanted the application to be less reliant on the server and wanted to integrate some modern HTML5/JS widgets. A team was put together that included both the client and Nuxeo to redevelop the File Browser application to use an HTML5 framework.
This is the story of how and why we chose AngularJS and how the application turned out.
To give you some background, the Nuxeo Platform currently uses two UI Frameworks. The back office UI is currently built on a JSF and RichFaces UI framework. The configuration tool UI is based on the Google Web Toolkit (GWT).
JSF is not inherently a bad framework, it’s very configurable, stable and well structured. But it is an older UI framework and it does have its limitations. The biggest issue with the JSF framework is that it’s a server-side framework.
This means that everything to build the UI is done on the server and streamed back to the application creating a much higher network load. It also means that state is managed on the server as well, using a lot of server memory and making it more challenging to scale the application.
In addition to these server-side challenges, mixing stateless and stateful approaches to integrate newer UI technologies such as HTML5 and JS components is a bit complex.
The client wanted to move away from JSF and the server-side issues it came with. They wanted a UI framework that was modern and leveraged some of the new technologies available today.
Specifically, they were looking for a UI framework that was a single page application - similar to Facebook and other modern web apps. They also wanted to perform the logic and processing on the client-side, delivering only the model data from the server. They wanted a stateless REST-based architecture, something that would be able to easily integrate new HTML5 and JS widgets into their application.
The process for selecting the new UI framework saw our team look at two options:
- Google Web ToolKit - We knew it already, so it made sense to consider using it going forward. However, GWT is not REST oriented, it’s RPC-oriented. It’s also harder to integrate because it hides the document object model (DOM). Finally, integrating the newer HTML5/JS widgets was not going to be easy.
The options were wide open, but the decision seemed easy to make - it would be AngularJS.
So why did we select AngularJS for its new UI framework?
First, it’s a very stable framework - the ecosystem is strong and the tools that help you create an application from scratch are great. AngularJS uses the MVC (model-view-controller) model offering good separation between presentation, data and processing. In addition, the Angular directive is a great encapsulation pattern, and it’s stable, but it’s growing at the same time.
The original JSF-based presentation of the File browser was pretty plain. To rebuild it using AngularJS, we used the following components:
- Nuxeo module (REST API & JS client)
- angular-touch - the mechanics for responsive design for mobile devices.
- angular-ya-treeview - this replaced the existing treeview component with a dynamic one. A few modifications were done to this one, but it was mostly used as is.
- angular-ui - this included the integration of bootstrap inside angular to make it easier to build the presentation interface.
While the decision to move to AngularJS was the right one, it didn’t come without some complications.
With AngularJS, we could have made a number of calls to the server to get the right data. To simplify development for this project, we minimized the number of REST calls (based on the “page”).
The team made it through the complications and came out with a great modern, responsive UI. It’s much more responsive to user actions and it adapts to different devices automatically, making development for different devices and channels much simpler.
With a much lighter CPU footprint and the REST binding, the application is much more flexible and scalable, allowing new nodes to be quickly added to handle increased loads.
That’s the story of how one customer moved from a JSF UI framework to an AngularJS one. You can use AngularJS to build your own custom apps today too, so download the platform and try it out