Sharing Top Content from the Angular-sphere.

From JSF to AngularJS

  • A team was put together that included both the client and Nuxeo to redevelop the File Browser application to use an HTML5 framework.
  • In addition, some customer projects are also based on JavaScript frameworks such as Ext.js, Vaadin and AngularJS.
  • Specifically, they were looking for a UI framework that was a single page application – similar to Facebook and other modern web apps.
  • The process for selecting the new UI framework saw our team look at two options:

    The options were wide open, but the decision seemed easy to make – it would be AngularJS.

  • That’s the story of how one customer moved from a JSF UI framework to an AngularJS one.

Blog posts to discover how to go from JSF to AngularJS

@jllado: “From JSF to AngularJS – a UI Rewrite Story” Interesting 🤔 #java #jsf #angularjs

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).

These are not the only UI frameworks you can use with the Nuxeo Platform. Connectors have been created for Flex, Open Social and Eclipse RCP. In addition, some customer projects are also based on JavaScript frameworks such as Ext.js, Vaadin and AngularJS.

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:

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?

AngularJS is an open source application framework also created by Google. It’s based on the single page application model using HTML, CSS and JavaScript on the client-side.

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:

While the decision to move to AngularJS was the right one, it didn’t come without some complications.

Most of our team came from the Java world, so the switch to JavaScript development, took some adjustment. One of the challenges was that continuous integration isn’t done the same way in Javascript as it is in Java (in Java we use Maven and Jenkins, but in JavaScript it is Bower and Grunt). Continuous integration, which is one of the big selling points for the Nuxeo Platform, is the practice of merging developer working copies into a main line (or trunk) several times a day. This practice is done to help find integration issues as quickly as possible. In this case, we wanted a system for both Java and AngularJS that could be called from Java.

The modularity management was also a bit complicated as was the maintainability of the JavaScript. With our Java background, we are used to having a compiler and other tools like checkstyle to enforce rules, but Javascript has more freedom. The modularity management challenge is also due to our use of Maven in Java and Bower in JavaScript.

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

From JSF to AngularJS

Comments are closed, but trackbacks and pingbacks are open.