Wednesday, November 05, 2014

Deliverying the Next Generation of B2E Hybrid Mobile Apps

Peter Rogers
In this article, my colleague, uber-mobile app-dev-geek - Peter Rogers, Chief Technologist with Studio 13 at Cognizant, takes us through a technical discussion of the latest developments surrounding B2E Hybrid mobile apps.  I am serious!  Where else can you find this kind of detailed technical advice on app dev? Enjoy!
***

B2E Apps are completely different beasts to B2C. They are generally not held up to the same high level of scrutiny as those in the enterprise space and this makes for some interesting design decisions.
  • Firstly, you don’t have to battle Apple for a space in the App Store because a company typically has its own private App Store.
  • Secondly, the user interface doesn’t have to be as competitive with native Apps. Notice I did not say user experience, because I feel that is just as important in the B2E space to drive up employee engagement.
  • Thirdly, it is often the case that you need “jump off points” into other web based systems due to the complexity of integration with back end systems
You can see where this is going…yes, our good old friend Hybrid Apps! Interestingly the trend for using portable-native solutions has begun to wain with most people just using HTML 5 or Native along with a MBaaS (Mobile Backend as a Service) and/or API Gateway.  If we focus on Hybrid Apps then there are a number of interesting options on the market at the moment (http://stackoverflow.com/questions/16923556/cocoonjs-vs-phonegap-for-dom-apps-or-just-go-canvas-and-cocoonjs).
  • PhoneGap
  • Intel XDK
  • Famo.us
  • CocoonJS
  • Ejecta
  • Pure Native with WebView
I have previously written about systems that bundle the underlying rendering engine for Android Apps such as Cocoon and Famo.us. I have also discussed Canvas-to-OpenGL converters such as XDK, Cocoon and Ejecta. What is interesting is that both iOS and Android operating systems appear to have evolved the WebView component as a direct result of these initiatives. Android 4.4 KitKat finally offered a Chrome based WebView but it was still powered by Chromium 30 and not the latest version of the engine. Android 5.0 Lollipop takes this one step further and allows the underlying rendering engine for the WebView to be updated online. This offers a nice standardised approach for the future but over half of Android users are still on an OS below KitKat. With this in mind, we still need to rely on these proprietary third party solutions, at least for the time being.

Apple has also recently joined the party with their new WKWebKit (http://nshipster.com/wkwebkit/) which is a vast improvement over UIWebView. It can finally use Nitro (their JavaScript acceleration technology) along with improved interaction with the wrapped web page. I personally still don’t believe this will give us 100% parity with Mobile Safari but we can live in hope. Of course it would not be an Apple iOS release without breaking PhoneGap somehow and this time there is a critical bug that really puts the ‘Gap into Phone Gap’ due the lack of being able to load ‘file://’ URLs (http://shazronatadobe.wordpress.com/2014/09/18/cordova-ios-and-ios-8/). There is a solution coming soon with a new loadFileUrl() method being added to WKWebView but then it relies on users updating to the latest version of iOS 8.x.

The good news is that WKWebKit adds some exciting new features that allow you to interact with the underlying webpage through bidirectional communication. If you have control of the webpage then you can use message handlers to send notifications from the webpage to the App. This can also allow us to screen-scrape from the webpage and use this information in our App. If you do not have control of the webpage then WKUserScript allows JavaScript behaviour to be injected at the start of the document load. This allows us to manipulate the underlying webpage by adding new styles or modifying the document object model to remove certain features that do not work well on a mobile device such as widgets.

At the moment PhoneGap is the most popular solution for Hybrid Apps but it is caught in a game of catch-up trying to integrate the latest features. One temporary solution is to use Native Apps with WebViews and target the latest versions of the Operating Systems in order to get the best experience. A different solution is to look at technologies that allow you to inject scripts into WebViews in order to mobile-optimise the experience using new styles and document object model manipulation to offer a form of intelligent reduction.

A few technologies that offer script injection into a webpage are as follows:
  • WKWebView (iOS 8+)
  • Appcelerator Titanium WebView
  • CocoonJS (possibly allows script injection) 
A few bits of advice:
  • Use a Native App with a WKWebView / Chrome WebView and the latest operating systems to get the best web experience
  • Use a decent web framework such as Angular Famo.us inside the WebView
  • Consider mobile-optimised versions of websites for use inside of WebViews
  • Consider Cloud-transformation tools such as MoovWeb to automatically mobile-optimise desktop websites
  • Consider script injection into WebViews using technologies like WKWebView, Titanium and CocoonJS   

************************************************************************
Kevin Benedict
Writer, Speaker, Senior Analyst
Digital Transformation, EBA, Center for the Future of Work Cognizant
View my profile on LinkedIn
Learn about mobile strategies at MobileEnterpriseStrategies.com
Follow me on Twitter @krbenedict
Subscribe to Kevin'sYouTube Channel
Join the Linkedin Group Strategic Enterprise Mobility
Join the Google+ Community Mobile Enterprise Strategies
Recommended Strategy Book Code Halos
Recommended iPad App Code Halos for iPads

***Full Disclosure: These are my personal opinions. No company is silly enough to claim them. I am a mobility and digital transformation analyst, consultant and writer. I work with and have worked with many of the companies mentioned in my articles.