With over 90% of internet traffic now coming from mobile devices, there is a huge pressure on companies to make their customer-facing applications suitable for rendering on smart phones and tablets. A-team is involved with a number of customers who are looking for ways to adapt their existing Oracle ADF applications and make them "mobile-enabled" . This article is the first in a series of articles that describe what we learned from the experiences with these customers both from a technical and a non-technical perspective. This first article provides insight in the technology choices you need to make and the implications of those choices. It also contains a lot of links with additional information. The next articles will provide in-depth technical guidance to optimize rendering of ADF Faces applications on mobile devices, as well as techniques to support working in offline mode using ADF Mobile.
This article is divided in three sections. The first section "Understanding the mobile user interface" discusses whether mobile-enabling existing ADF (Faces) applications is desirable at all. The second section "Choosing the right technology" discusses the technology options and choices you need to make. The third section "Conclusions and Recommendations" will provide you with Oracle's opinion on the preferred approach to ADF-based mobile development.
Ask any software developer whether they understand the differences between a desktop user interface and a mobile user interface and most likely they will say "Yes, of course". The three obvious differences are:
So, to mobile-enable an existing desktop web application, we need to make sure that actions typically performed with the mouse can be done with a touch gesture, and we need to make sure that the web page is still usable on a smaller screen, where part of the screen real estate might be consumed by the touch keyboard. With the aid of responsive web design techniques that shouldn't be too hard, right? And by the way, the screen size and screen resolution on a "traditional" large tablet like the iPad is such that we hardly need to change anything in the page layout.
Well, this is the typical view of a person focused on the technical aspects. It completely ignores the fundamental differences in how mobile devices are used, and the type of user interface that makes good mobile apps so appealing and productive. Oracle's User Experience (UX) group has created some excellent material which we consider as mandatory reading before embarking on a project to mobile-enable your existing web applications:
As said, mandatory reading, but we will summarize two key take-aways here:
So, from a usability perspective the conclusion is clear:it is undesirable to take an existing desktop web application and make it suitable for mobile rendering with as little changes as possible. However, as with any software development project, usability and end-user friendliness is just one of many aspects to take into account. Budget constraints, time-to-market, available technical skills, ease of maintenance, deployment models, supported device types, and reuse of existing code, are just a few of the other aspects that organizations take into account when "going mobile". The next section will discuss the technology options available when taking all of the above aspects into account.
There are three Oracle technologies to consider for mobile applications
Here is a list of aspects and considerations that should help you make make a choice between these technologies.
If you need to support offline usage of your mobile application, you have to use ADF Mobile. ADF Mobile Browser and ADF Faces RC are server-side technologies that do not support offline usage. The new HTML5 feature for running web applications offline is NOT supported by ADF Mobile Browser nor ADF Faces RC.
ADF Mobile fully supports integration with mobile device features. It is possible to update contacts, send SMS or e-mail, take or show a picture, display or store a file, or use the GPS location of the device, for example to show nearby places on a geographical map. ADF Faces RC and ADF Mobile Browser support a more basic integration with email, telephony and google maps using specific URL prefixes like "mailto:", and "tel:". See chapter Extending ADF Mobile Browser Applications in the Mobile Browser Developer's Guide for ADF for more information. Note that while this is the guide for ADF Mobile Browser, the techniques described in this chapter can be used as well with ADF Faces RC.
ADF Mobile is fully based on HTML5. ADF Faces RC automatically uses HTML5 for rendering advanced components when it has detected that the browser supports HTML5. It is also possible to use the new HTML5 input types with ADF Faces RC as will be illustrated in the next article in this series. The ADF Mobile Browser option has not changed for years and does not support HTML5.
ADF Mobile is the best choice for creating a natural user interface that has a device-native look and feel and fully integrates with mobile device features. ADF Faces RC provides by far the most rich set of user interface components, including very advanced data visualization components. The recently added Skyros skin is a "skinny" skin that minimizes the usages of images, making it the best performing choice for mobile rendering.
The user interface that can be created with the Trinidad components of ADF Mobile Browser is more sober. We have seen customers complaining about the way ADF Mobile Browser renders the calendar popup window and popup windows created using the Trinidad dialog framework. Both types of popup windows render as a new tab in the mobile browser which visually "disconnects" them from the current application.These rendering issues do not occur with ADF Faces RC which fully supports inline dialogs on mobile devices.
Browser support is not applicable for ADF Mobile. It runs in the native WebView of iOS and Android devices. It does not matter which browser is installed on the device. ADF Mobile Browser support a wide range of mobile browsers. ADF Faces RC supports a more limited set of mobile browsers. See the 11g and 12c certification matrices. Note: look under the heading "Browsers", do not get confused by the heading "Mobile Browsers" in these two certification matrices, this heading only applies to browsers supported by ADF Mobile Browser, not to the mobile browsers supported by ADF Faces RC.
Reuse of business logic coded in Java that has been built for existing desktop (web) applications can be achieved with all three technologies. The better the existing application adheres to the architectural Model-View-Controller pattern the easier it will be to reuse the logic coded in the model layer. For ADF Mobile Browser and ADF Faces RC this reuse is trivial as the web application can run on the same JEE server that contains the model-layer business logic. For ADF Mobile applications, the functionality of the business logic layer needs to be disclosed through SOAP or RESTful web services.
The concept of designing and building one web page that automatically adapts its layout and behavior based on the mobile browser's device is very attractive to many customers.It maximizes reuse of web pages, enables a fast time-to-market for mobile applications, and reduces maintenance cost as only one code base for the View and Controller layers need to be maintained. This concept has become very popular under terms like responsive web design and adaptive web design. There is some debate about the difference between these two terms, but in the context of ADF the difference made by the wikipedia definitions makes a lot of sense: responsive design is implemented client-side in the browser, adaptive design is implemented server-side.
An important technique used in client-side responsive design is CSS media queries. The following articles describe how this technique can be used with ADF Faces:
While not tested, it should be possible to use the same technique with the Apache MyFaces Trinidad components.
However, as Java Server Faces (JSF) generates the HTML that is sent to the browser on the server,it might make more sense to go for adaptive design and tweak the generated html at the server-side using the browser agent info. Otherwise, chunks of HTML might be sent over the wire that end up not being used for rendering because of some CSS media query.
ADF Faces RC has a number of adaptive design techniques built in that optimize mobile rendering:
ADF product management has stated there are plans to further enhance the responsive design support in ADF Faces over the next couple of releases. One issue that must be dealt deal with though is that not all ADF Faces certified browsers support CSS3 so there has to to be a story for older browsers as well. A practical approach for page design is needed, because you can easily encounter very complex design and layout issues. It implies you are actually building more then one page layout per page and this can easily escalate the complexity.
In the meantime, additional adaptive design behavior can be built in using custom code, as illustrated in the article Running ADF Faces on Mobile Phones and Tablets in this series. Another example of this approach can be found in the article Creating an adaptive layout in ADF for desktop vs. tablet by Andrew Robinson, a member of the ADF Faces development team.
ADF Mobile allows you to run hybrid applications, where part of the application is running locally on the device and part of the application is supplied through web pages delivered by a remote server. This means you can use ADF Mobile together with the other two technologies, creating a hybrid application where the end user can be ignorant as to which pages are served locally and which pages are served remotely.
Note that even if you do not need the unique features of ADF Mobile, it still might be worth to use an ADF Mobile application as a "UI Shell" of your remote web pages. This has two benefits:
ADF Mobile Browser has been around for a number of years and used to be the obvious choice for bringing web applications to mobile devices including old devices with limited HTML capabilities. On the other hand, ADF Faces RC and ADF Mobile are now offering a better solution with a more modern interface for developing mobile web applications for modern devices. In recent releases of ADF Faces RC, important new functionality has been added to optimize mobile rendering, and this will continue in future releases, increasing support for state-of-the-art technologies like HTML5 and CSS3. Given this trend, A-team and ADF product management strongly recommend to use ADF Faces RC as the primary choice for mobile-enablement of ADF applications.
ADF Mobile brings unique features to the table that can be used to build a truly natural user interface, enhancing the user experience and productivity. We recommend customers build hybrid applications using ADF Mobile. Initially, the ADF Mobile app can largely act as a UI shell for remote (ADF Faces RC) web pages, and then over time the remote pages can be replaced incrementally with local on-device pages that provide a more native look and feel and fully leverage the unique capabilities of mobile devices.