Enterprise Mobile Application Development: Trends and Best Practices

presence in Enterprise verticals

Given our presence in many diverse enterprise application development areas, we get asked a lot of questions that are common to all of them. The rest of the post will touch upon some of these key questions, and how we tackle them.

Native or Hybrid?

Enterprise applications are different from, say, core communication applications or gaming applications. A typical enterprise application is characterized by the following general traits:

• Most enterprise applications are ‘data transaction’ focussed – in other words, the core functionality of the app is to retrieve and represent data in an attractive and logical way without compromising performance. Most of the other functionality is really to enhance this need.
• For the large part, enterprise apps only need to interface with web services & JSON at the backend. This is different from say, developing a communications focussed app that needs to talk to an XMPP or SIP backend.
• Ability to represent fast-changing data via asynchronous mechanisms
• Displaying/rendering data in different visual styles (graphing/charting)
• From a UI perspective, most enterprise apps lend themselves to a combination of a sliding drawer menu and tabbed interface
• Enterprise apps need to be able to invoke voice or video calling
• Enterprise apps need to be able to support messaging
• Push notification support
• Ability to integrate with device sensors and accessories
• Ability to communicate over WiFi and BTLE/BT
• Ability to provide ports for mobile platforms as well as desktop environments

Given these primary requirements, our observation has been that most of our enterprise customers prefer that we find a mechanism to develop Hybrid applications as opposed to Native applications. There are a variety of reasons for this, which we have covered in a previous blog post, the short of which is there are many frameworks available today that integrate key native performance components with hybrid apps blurring the difference between web views and native views.

So that being said, let’s look at the best practices and trends we have observed while developing Hybrid frameworks for this vertical. But before we go ahead, which hybrid framework should we talk about? Well, at HSC we love Ionic which is based on Angular. So the rest of this article will talk about Ionic. You may love Meteor or ReactJS or Kendo and that’s great. I’m sure a lot of the things we point out below would still be relevant to you.

So Ionic 1.x or 2.x ? (in other words, Angular 1 or Angular 2?)

As some of our readers would know, there was a recent change in the Angular community moving from Angular 1.x to 2.x which depending on your point of view is either brilliant or disastrous as a lot of things have changed including the programming model. At HSC, we believe its for the better and change is inevitable. Better to evolve than to be stuck to and old way. That being said, we still love Ionic Angular 1.x –  its still supported and a lot of our apps are still on 1.x. The move to 2.x will be gradual and we will do both. As of today, most of our new projects are still on 1.x. Our recommendation here is to wait till the dust settles. As of May 2016, a lot of plugins don’t work with Angular2/Ionic2 as well.

Pretty enough?

One of the common lines of questions we get asked is “Cordova apps look bad. Is  ionic  prettier than Cordova?”

• Thats sort of like asking if a Tesla engine is prettier than the Tesla body
• Cordova is not a UI framework! Your Cordova app looks really terrible because a developer decided to write their own HTML and CSS code and either style all elements on their own or not style at all. That’s not how it should be done. Kendo, Ionic and others offer an excellent UI layer on top (that’s their value add to a great part) that makes buttons look standards, offers accelerated CSS and angular directive wrapped components that make UI much simpler for you – including sliding menus, buttons and inputs and even complete implementations of full UI HID guidelines like those of Material Design

So our recommendation here is to use a  good UI framework on top of Cordova. 

Fast enough?

The next question we get asked is “is ionic as fast as native?”

Well, for enterprise applications, we always say yes. That’s because when it comes to performance for enterprise apps, you are mostly talking about the performance of:

• scrolling large lists
• sliding views and menus
• graph visualizations

To be clear, this is a yes because we are taking into account the typical needs of an enterprise app. If we were writing an openGL gaming application or implementing a full-fledged protocol stack for a device management client that needs to intercept and audit every request, sure, go native.

So let’s talk a little bit more about performance and best practices:

• For large lists, use collection-repeat not ng-repeat. collection-repeat mimics the cell reuse concepts that native scrollers use — UI memory is released for cells that are not in view.
• Ionic 1.2.4 and beyond have automatically enabled native scrolling for the webview – this disables JS scrolling completely and falls back to the system scrolling code. If you have specifically enabled jsScrolling somewhere, you may want to disable it if you don’t need it.

With respect to view transitions, we highly recommend the native-transitions plugin. It makes a big difference to view transitions and you get the same performance as a native app for view transitions (ios and android only).

With respect to graph visualizations, most of the libraries we have used are CSS hardware accelerated and performance is excellent. We have never seen any performance issues here. This brings us to:

What Graphing libraries we do love for enterprise apps?

There are many. There is obviously D3 (and its angular variants) that does a lot. We like it, but there are simpler and lighter alternatives as well, you can use (and which we have used with great success)

• ChartJS – simple, light weight and comes along with 3rd party angular directives. We especially love v2.0 that was just released last week but we’ve been developing with it in prototype stage too.
• Visjs -We found VisJS to be very useful for zoomable timeline and network graphs. Related to timeline zooming, we love the fact that the graph code handles panning and zooming in its own code and does not require canvas overflow scrolling (we don’t like how canvas overflow scrolling looks).

Then there is Chartist, Google Charts and some others we have used in the past, but truth be told, between ChartJS and VisJS and the occasional use of D3, all our charting needs have been met.

All of the above have a great performance – with ChartJS leading the pack.

Must have plugins?

We love plugins. Plugins are the “hybrid” part of development. Thanks to Cordova’s plugin architecture, any feature missing can easily be implemented in native code and plugged into the app. So you never really hit a ‘brick wall’ with missing features.

(source)

So here are the plugins we use a lot across many of our projects:

• Ionic native transitions – we talked about this before – transitions in overdrive
• Angular Translate – a neat way to implement internationalization to your apps from the get go
• Angular Wizard – a great way to simplify data and forms that require input from the user
• Packery/Dragabilly/Isotope/Masonry – the gold standard for any app that needs to display lots of images as galleries/collages
• Moment – if your app needs date manipulations (most of them do), its hard to find a better library than this
• PhoneRTC for integrated  video and audio calling using the embedded WebRTC native stack
• On the topic of messaging and video, you will almost always need websockets. We found Angular websockets to be an excellent option here. To be honest, we also love ng-websocket and it works very well, even though the project maintainer now has a deprecated notice.
• EddyStone beacon integration – there are several, but we found the one from evothings to be the most useful (EddyStone is the new beacon protocol Google is working on to improve M2M interactions)
• Speaking of sensors, given that BLE is pretty much a mandate everywhere we like don’s BLE central plugin
• And then you will post likely use payments in your app, and to integrate with apple pay, we like cordova-plugin-applepay
• If you are building an app that has in-app customer data that is sensitive, consider sqlite cipher
• Finally, when it comes to push notifications, there are many functions and we have a dedicated section on that next

So our key advice here is don’t re-invent the wheel! There are many good plugins ready to be used. Search, look at the license, see if its license compatible and use away. ( You will find many angular and cordova plugins to be permissively licensed under MIT or Apache 2 license )

Push Notifications

Push Notifications – to any developer, push notifications always seem to throw a wrench till you get it right. There are several convoluted steps to set up your own, including generating SSL certificates, figuring out that there is a difference between developer and deployment certificates (Apple), and various other things.

Simply put its a pain if you want to do it yourself. Specifically, its more painful to handle APNS than GCM. But there are options:

• First off, we strongly recommend against using any push service that is advertised as free or free to start. They always come with riders or are unreliable or publish a price plan that may not be affordable after your app is launched
• If you want to host your own push solution, we recommend PyAPNS for APNS (GCM is really easy to do on your own). If you are looking at a easy UI-based APNS+GCM solution, take a look at AirNotifier with the caveat that it doesn’t seem to be very active and doesn’t implement the new binary APNS v2 specifications with response feedback. So you may want to use air notifier as a front end, and replace its APNS class with that from PyAPNS, If you find something better, let us know!
• When it comes to commercial hosted services, we hear positive vibes about AWS push notification and Parse from our customers – but take your pick and consider your choices well. Obviously, a lot of our customers who already use AWS for other needs find AWS’s push services to be convenient

Payments and In-App purchases

We covered a part of this earlier, but payments are key to enterprise apps. You will need to integrate with payment gateways and well as NFC payment mechanisms. There are plugins for that

• Paypal hosts its official plugin for Paypal gateway integration right here.
• When it comes to Apple Pay  we like cordova-plugin-applepay
• In-App purchases is a mechanism that all mobile app stores provide so that your app can offer new features to be enabled at a price. This is a great alternative to uploading and managing “lite” and “pro” versions of the same app. We’ve tried various options, and we think Jean-Cristophe Hoelt’s In-App purchase is the most comprehensive and easy to use option out there (acknowledging at the same time that In-App purchases are, well, rather painful to setup and test)

Personal Fitness

And for those of us playing in the personal fitness market, there are options out there that offer easy wrappers to Health Kit and Google Fit. This is an evolving market space though and we’ve often had to add to the code depending on needs. But these are good starting points:

• Google Fit plugin
• HealthKit plugin
• There is also a unified plugin that we haven’t yet used, but looks promising.

Wearable

Now, this is a crowded space. We are only going to talk about how to write apps for Apple Watch because that is mostly what our customers want. For example, when we develop an IoT app for video streaming, customers ask us to extend the app so they can watch a feed on their watch. Or for fleet management apps, they want the customer to be notified of fleet diversion issues directly on their watch with a pin and a map. Well, we have the Telerik apple watch plugin that most of us use for that.

We could go on and on. There are so many enterprise categories such as maps, geofencing, barcode scanning all of which have excellent and mature plugins to do the job for us.  But let’s finally get back to application development basics that are independent of plugins. Things you can do to improve your own code

Portability and Desktops

Another trend we’ve observed in this vertical is the need to offer apps for mobiles as well as desktops. Obviously, since part of a hybrid apps is in HTML5/JS that will work on all platforms that offer a browser. But what about plugins? Well, while selecting plugins its always a good idea to select a plugin that has multi-platform support and when it comes to desktops potentially replace it with another functionality.

A good tip here is to handle platform variations in your code. As an example, if you want to port your app to the desktop, always check for cordova before you use it like this:

 // check platform 

 var isWebView = ionic.Platform.isWebView();
var isIPad = ionic.Platform.isIPad();
var isIOS = ionic.Platform.isIOS();
var isAndroid = ionic.Platform.isAndroid();
var isWindowsPhone = ionic.Platform.isWindowsPhone();

  var currentPlatform = ionic.Platform.platform();
var currentPlatformVersion = ionic.Platform.version();

 // check plugin

if (window.cordova && window.cordova.plugins.Keyboard) {

Now how about porting a mobile app to desktop? How do we make it into an “app” ? There are many options. We love Electron by Atom. It does a great job of taking HTML/JS/CSS code and packaging it into an app with a chromium webview – and works very well with Ionic. If you want to know more, give us a shout and we’d love to tell you more.

Best practices for application development

• Don’t use jQuery. Use a framework that uses a reduced version (jQuery-lite) like ionic and one that integrates HammerJS or similar for touch interactions
• Don’t invent the UI yourself. You’ll make a mess unless you are a design house experienced in artwork and mobile layouts to scale them. Use a framework for UI
• Do read the Angular style guide – it contains excellent material for good coding practices. (There are more than one guides, we like John Papa’s version)
• Do use Services and Factories instead of $rootScope
• Do use directives as a means to abstract out UI level components that will be reused in many places
• Do minify your code and if you want, uglify them (minification has a direct impact on memory consumption)
• When writing enterprise apps, you will almost certainly be using SSL – while in that topic do read and understand the implications of self-signed certificates vs. verified ones, and before you implement workarounds to make self-signed certificates work without prompting, make sure you try real hard to convince your customer its just much easier to get a verified certificate. While we are talking about this topic, you will almost certainly want to learn about white-listing and how to make sure your app server and app work smoothly with SSL
• If you need to support Android versions < 4.4, please do use XWalk – it overcomes the limited web view that was bundled with Android in older releases

Debugging

If there is one area where hybrid apps are harder than native apps. its debugging. There are a few tools here that help greatly

• Angular Batarang – an invaluable tool to debug scope issues – works with Chrome
• For iOS app development, Instruments (Xcode) offers a very good mechanism to look at memory, energy and CPU consumption
• We strongly encourage developers to write reduced test cases of problems and use live code sites like Codepen and JSFiddle to share code issues with co-developers to  help solve

Conclusion

Enterprise app development has entered a new era. It combines location, responsiveness, payments, transactions, sensor integrations and voice/video/messaging into a common platform. This is indeed an age of digital transformation for this vertical and HSC is very excited to be part of this transformation as we bring in our communications expertise along with mobile app development and help realize our customers’ vision!