UI Technology Options For Human Tasks in BPM Applications

AngularJS is a MVC framework on the client side and uses rest services to interact with the server. Rendering the view is performed entirely in the client, from HTML templates transferred when the page is first loaded. The DOM is built in the client such that updates are not required across the network. This also frees up server side resources and minimizing I/O traffic.

AngularJS requires a REST service for CRUD operations on the server. This may require implementing the model in JPA, Toplink or Hibernate.

ADF is an MVC framework that is implemented across client and server boundaries. The view is tightly coupled to the server and requires server CPU cycles to build the view. It also requires more I/O traffic to communicate view-based changes back and forth.

ADF comes with advanced tools to make building the model much easier. You can introspect the database and with one click, create all the model components you need.

Rendering a view in AngularJS is very fast. This is performed by JavaScript code in the browser; code that is cached after the initial fetch. This minimizes the number of server side fetches and minimizes server latency. After the first download, AngularJS will only make calls to the server during CRUD operations. It does not rely on the server for view-based operations. Additionally, AngularJS can hide server-side latency better than ADF. Although ADF does a satisfactory job rending the view and populating it with data later, Angular’s ability to implement the feel you want is better.

AngularJS uses events to capture changes between the model and view. This means that validation can be perform in the browser any time a key is depressed. It can implementing page-level validation and display error messages and disable functionality very readily from client side logic.

Note that with AngularJS, you may have to write server side logic to handle the CRUD operations to update a database. In this case you will be writing server-side validation rules as well since you can’t really enforce these rules from the client. It’s easy for a hacker to corrupt your data otherwise. If Node.js is used then the JavaScript validation logic can be reused on the server.

ADF provides both client-side and server-side validation using, if you want, the same validation rules defined in the model. Processing key press events however will requires JavaScript code. With ADF the same validation rules are already implemented on the server, so you don’t have to worry about implementing the same logic twice.

ADF page level validation is tricky especially when dealing with validation across data in tables. This is because table and table iterators are dependent on validation state of individual fields in the table.

Most common field validation is performed with little or no code in ADF. Page level validation on data in tables will require specialized Java code.

AngularJS provides mechanism to intercept view-to-model changes for handling specialized validation scenarios. Since the investment is already made in JavaScript, complex validation scenarios during data entry, between fields, across records in tables, or across pages can be implemented using AngularJS in a straight forward way. In ADF you may need to rely on interactions with the server and Java code to handle some validation types. You can always do this in JavaScript as well, but since little investment has been made to implement code in JavaScript for ADF, these validation requirements can become problematic for the developer.

Tweaking the UI for usability takes a lot of trial and error. With AngularJS you simply save and refresh your browser to see changes.

There are also many open source JavaScript IDEs that check JavaScript code syntax, provide run-time break and trace-points, and have capabilities to inspect and change variables. Most browsers also have debug capabilities which make testing, troubleshooting and fixing problems very easy.

ADF, when used for BPM UIs, requires a server to run and it takes time to compile and push changes to the server. Worse case is you have to re-deploy your changes. You can change the ADF configuration to run in JDeveloper or script something up to send changes to the server. Either way, tweaking the design takes more time to do in ADF.

The high level of effort in UI development can come from making the UI usable and intuitive. Seemingly minor tweaks of the UI can often be harder in ADF since at some point it may requires custom server-side or client-side code. Figuring out how to do this in ADF can be hard to do since you have to work through data controls or working with JavaScript alongside default ADF functionality. Although we got up and runnning quickly with ADF this time may get offset when UX requirements require significant customization than initially expected. AngularJS provides the validation features in a more native fashion.

AngularJS uses Dependency Injection (DI) as an inherent part of the framework. Since it is used as part of object creation it allows one to mock up test scenarios and create meaningful unit testing. Tools like Node-unit will automatically run test code with each change and can be part of a CI strategy.

ADF can support DI, but it is not an inherent part of the framework. Likewise JSF supports DI and ADF is built on JSF.

AngularJS is better suited for creating testable code. Of course ADF strength is that you don’t have write code and so there’s fewer things to go wrong. But the reality is that things often do and troubleshooting code in ADF, even if there isn’t any, means having to decipher frame-work level error messages. AngularJS has framework error messages too, but I haven’t had to deal with them too much and it’s usually apparent what is wrong. ADF can be more difficult to troubleshoot, since a lot more is tied to the ADF framework and associated error messages. The error message you get in AngularJS typically point directly to the line of code needing to be fixed.

AngularJS works quite well with many open source styling frameworks like Bootstap Responsive CSS. Some companies are building websites are using Bootstrap CSS since they can get a modern look and feel and it can work on mobile devices as well. Check out expo.bootsrap.com (or newsweek.com) for examples.

AngularJS also works with many open source UI widgets such as graphs, trees, file upload/download, drag and drop styles, etc.

ADF uses skins and a comes with a skins editor to permit developers to change the standard look and feel. AVIO has used these skins to utilize Bootstrap CSS as well. This skins editor allows users to play around with the look and feel using a WYSIWYG editor. You can make quick overall changes to the application this way.

ADF has a large number of widgets to choose from and they can be added to your web page through a simple drag and drop. ADF is well supported by Oracle and the Oracle community of users, including AVIO.

AngularJS UIs can be an enabling technology to adopt modern UI look and feel since dynamically rendering the page is inherent to the way AngularJS creates a page. As content is manipulated by the user, AngularJS works with the DOM to change the view. New records or changes to existing ones are done in the browser while AJAX updates are sent to the server in the background. The user doesn’t experience server latency since server interactions are done in the background and are not needed to maintain the state of the view.

ADF and JSF, uses the server to render HTML through facelets or JSP pages. This technology was developed initially for page flows and can implement SPA designs as well. However the SPA changes requires interaction with the server and this delay makes the UI not feel modern.

Both AngularJS and ADF can implement a SPA. However the mechanics to implementing a SPA is more natural in a JavaScript framework like AngularJS. This is because AngularJS directly controls the view whereas in an ADF page, the page is indirectly controlled and modified on the server. The changes to the view with ADF requires interaction with server side iterators or changes to a widget state may require partial-page refresh synchronization with the server.

AngularJS interacts with the DOM directly with controller logic in the client. The controller and view are clearly partitioned so your not mixing stuff in the view, HTML for example, with aspects of the controller. You do have control over adding new records to tables making fields read-only or writeable, hidden or not, directly through code in the browser. Since you are not interacting with the server these changes look instantaneous so that the page changes occur first and the server is updated later. It doesn’t feel like the server is doing anything. From a user perspective it all feels local.