December 23 2014

While many SOA and BPM projects leverage ADF, a number of clients are looking towards using responsive UI strategies based on HTML, JavaScript and REST services. This means taking on projects where the custom UIs for human tasks and possibly the workspace are built in technologies other than ADF. In some cases, our clients have expertise in a certain technology and just need help in creating the REST services for BPM related service invocation. In other cases, they have requested help choosing an alternative to ADF. In these scenarios, AVIO has utilized AngularJS and Bootstrap CSS as our choice of technology to support this need. If you are wondering which technology to leverage, ADF or a HTML/JavaScript-based framework like AngularJS, this blog can help you decide.

When choosing the best option, there are technical and business reasons for making your choice. I will address the business reasons first and then the technology reasons second. It should be noted that if you are looking into more responsive UI designs for your human tasks, you might consider replacing the out of the box BPM Workspace in order to have a comprehensive responsive application. AVIO is working on a custom workspace as introduced in this blog.

Addressing the Business Need

Here are a few business issues you need to consider in whether to use a framework such as AngularJS or similar. If any of these issue are true, you may be better suited for another technology than ADF.

  1. You want a forward looking user experience and functionality that take advantage of trendy UIs you've seen on the web. (See Note 1)
  2. You have complex relationships between data elements that require dynamic manipulation of data elements within the UI.
  3. You are using Adaptive Case Management (ACM). (See Note 2)
  4. You want the UI to feel like changes are being made locally, and not feel the lag from server changes.
  5. You have in house UI expertise in HTML/JavaScript frameworks or wish to develop expertise in these technologies.

Note 1: You should leverage Oracle's Mobile ADF Framework (MAF) to create applications on mobile devices. These applications run natively on the mobile device operating system like iOS or Android. This blog is only addressing web-based development.

Note 2: ACM (Adaptive Case Management) is a new feature within BPM 11g BP3 and 12c. The current Oracle BPM Workspace is not efficiently design for managing ACM cases and their associated tasks.

Addressing Technology Needs

ADF contains a feature-rich framework for providing highly-functional and enterprise ready UIs in a short amount of time. A JavaScript framework like AngularJS, is obviously based in JavaScript and requires a lot of it. ADF has an IDE (JDeveloper) and tools that have been around for a while now. Because of this, it has made laying out UIs somewhat easy through drag and drop palettes and What-You-See-Is-What-You-Get (WYSIWYG) editors. However since AngularJS is based in JavaScript, you are going to be a lot closer to the UI, HTML and DOM. Fine tuning the UI experience from this vantage point will prove easier in this regard because you are working directly with the UI in browser with code also in the browser. You are not trying to indirectly control it through an API and from the server.

With ADF, a main selling point is that you don't have to get involved with manipulating the DOM or even know HTML. You get a lot of capability easily but it can be too much if there's something you need to do in HTML that is not simplified through the IDE. When this happens you are going to spend time figuring out the intricacies of ADF. You need to understand how data controls, iterators and page phase states work, to get the UI to do what you want. This is especially true if you know what you want to do in HTML but are using ADF. This includes having to write server-side Java code to interact with HTML through data controls and iterators. You can also find yourself figuring out how to write JavaScript code using the client-side components settings in ADF. You'll end up having to know JavaScript and HTML anyway, along with the intricacies of ADF.

The amount of code you generate between AngularJS and ADF isn't a good comparison to make, especially if you don't have to write code in ADF. The real question is how much time is it going to take to write code for ADF when you have to. If the project gets to this point, than some may start to wish they had started with a JavaScript framework like AngularJS. And even though you need to write code, there are IDEs like WebStorm that makes developing JavaScript UIs easier now. There are also lots of boilerplates and open source libraries to leverage that can accelerate the start of an JavaScript/HTML UI project.

With AngularJS, there's an initial investment you need to make over ADF. The point where the investment pays off is when you try to implement a more modern user experience. This modern experience can mean striving for a Single-Page Application (SPA) and wanting the actions made to the page to feel like they are being performed locally. Unless the action or widget is built into ADF already, then you are going to be writing code in ADF to get this feel. And dealing with the ADF API is difficult and in the end you still have a UI that requires interaction with the server to render changes to the view.

With a JavaScript framework, you've made the investment already. You have direct access to each key-click, hover, and focus action in the browser. In JavaScript, you have access to the DOM (or HTML) and can control hiding or expanding complex data and relationships, perform drag and drop, and adding animations directly. The user experience will feel like it's all being performed locally, because it is. In ADF, you can get the same functionality and layout, but your users will feel the changes coming from the server.

The following table address specific areas between ADF and a JavaScript framework and how they compare.

Feature
JavaScript/AngularJS
ADF
PROS/CONS
MVC

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.

Validation

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.

Productivity

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.

Testing

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.

Look and Feel

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.

Single Page Application (SPA)

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.

Summary

UI designs and technologies of choice are very much a community-biased paradigm. In some cases, wizard-based UI pages makes sense in others SPA does. Likewise, choosing AngularJS or ADF can simply amount to what the community knows best.

ADF and AngularJS are two very viable technologies when developing UIs used in a BPM application. ADF was developed in order to make creating UIs simple without getting into writing lots of specialized code. If your UI is simple, you usually don't have to write code at all. If you do, then you may spend a large amount of time writing the code.

Using a JavaScript framework like AngularJS can be worth the investment it takes to write the code needed to make an application work with BPM. AVIO has seen this upfront investment pay off when the customers want a more modern look and feel or wants to create an SPA with features described in this blog. If you need further help deciding which technology is right for you, contact AVIO and let us help you make a good and informed decision.

About the Author

Mark Peterson

Software Implementer using Business Process Management (BPM) for small to large firms. Used best practices in system design and software methodologies. Successfully executed projects on time and on budget using incremental and iterative software development methodologies.

Join the Conversation

prithiviraj
June 15, 2016

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

Long Duc Nguyen
March 8, 2017

Dear sir/madam,

My name is Long Duc Nguyen. I am a Java developer . Currently, I am developing a system by Jdeveloper and oracle BPM, ADF

I have searched many time on the internet about the UI options for the human tasks like your page are describing here

I am very interested in this. Could you please share me some example or some instructions about use AngularJS or something like this to replace ADF ?

Thank you in advanced

Thenna
June 23, 2017

Hi, please share code sample to invoke Angular UI.

Enter your first name. It will only be used to display with your comment.
Enter your email. This will be used to validate you as a real user but will NOT be displayed with the comment.
By submitting this form, you accept the Mollom privacy policy.