Lamon T: The pros, cons and politics of hybrid mobile apps

A hybrid mobile app is an application that has been built with web technologies – HTML5, CSS3 and JavaScript – and then “wrapped” with native code for closer integration with the device and/or to pass itself off as a download app.

The hybrid app sits in the middle of the political battle between aficionados of the web/browser-based app and the native app.

Depending on your viewpoint, the hybrid app is the best-of-both-worlds or a botch that fails to match up to the qualities of either parent. Whether your app turns out to be one or the other often depends on the execution of the project.

The best-of-both-worlds: hybrid apps have the cross-platform appeal of a browser-based app, but with added native coding to give the native functionality web apps traditionally couldn’t access.Plus, if web apps look and behave like a native, Apple will allow them into its App Store, normally reserved for apps written in proprietary code.

The botch: combining web and native can end up with an app that lacks the slim-line elegance of the web app or the feature-rich performance of the native app.To minimize the chance of a botch, companies will need the appropriate hybrid development skills, to choose the right framework and JavaScript library and avoid embarking on projects that are too ambitious for hybrid development.

Robert M. V. Gaines, a Kansas, US-based web and app developer:

“Hybrid apps are great for small scale projects that need to be developed rapidly on a budget, but they are not a good option for apps that are computationally intensive or require extensive access to low-level device functions.

Hybrid apps that fall into these later categories can be created through the use of custom plugins, but it is usually easier to create such apps with traditional [native] methods. Before choosing to create a hybrid app, it is important to understand the strengths and weaknesses of this technology.”

Cross platform development with web technologies

Hybrid is a compelling story: write an application in pervasive, open-standards-based web languages that will work on any smart device via the device browser, then tailor different versions of the app with native code, so it works nicely as a download app.

At the core of each app is a shared code-base which brings big efficiencies to development and maintenance.

Certainly it is a lot more attractive proposition than writing a native app in Java for Android, then rewriting it in Objective-C or Swift for iOS; then C# or C++ for Windows.

For most companies skilling up on multiple native coding languages isn’t an option. It shouldn’t surprise anyone that HTML5 and JavaScript is the primary platform for North American app developers, according to Vision Mobile, and second most popular platform in Asia after Java.

In September 2015, the creators of Updown Fitness, a workout/weight-training fitness app, decided they wanted the additional distribution of app stores by creating a download version of their web app.

Chris Freise, CEO and co-founder, Updown Technologies:

“Native was not an option as our developers did not have native experience. After doing some research, we decided on a hybrid approach and on the Ionic Framework to accomplish this.

The hybrid approach made sense because we could use our JavaScript/HTML/CSS web codebase with some small adjustments, and we could hit both of our target platforms with one set of code. We could also take advantage of Cordova plugins to access the phone hardware, which would allow us to do some cool things with the mobile app that we could not do with the web app.”

Image: testing and troubleshooting the Updown Fitness mobile app with Ionic developer console tool.

Harnessing the advantages of web and native apps

In a previous column on web apps, we highlighted Saxo Bank’s impressive browser-based trading system, which supports 170,000 FX trades per day.

In addition to the accessing the system via a mobile browser, Saxo Bank clients can also download mobile apps to their devices.

Benny Boye Johansen, senior director and enterprise architect at Saxo Bank tells ClickZ:

“Why do we even bother having a [download] app? There are two main reasons. The first one is distribution. People are so used to getting apps from an app store. They want the SaxoTrader App rather than having to go to saxotrader.com.

The second reason is that having a native app provides support for the few features, which a pure HTML app still cannot do. In our case, that is support for push notifications and touch login. So, the core trading app can run perfectly on your mobile just by going to saxotrader.com. But unless you take the downloadable app, you will not get “the complete feeling of an app”, including push notifications and touch login.

Now you may argue that we are not 100% purely HTML, and you would be right. But if you look how we have spent out development dollars, 95% has been deployed on HTML5/JavaScript development and the remaining 5% has been on a native iPhone and native Android application. This is still much better than spending 50% on iPhone and 50% on Android.”

The interesting thing is how having a web app with a minimal “wrapper” of native code allows Saxo Bank to continually maintain and enhance the core app, without needing to save it for the next version or needing to resubmit it to the app store authorities for evaluation.

Johansen:

“We have spent a very small part of the total development budget to create these wrappers. And, since all the core/important functionality is in the web application, we don’t have to spend any more money on extending the native part when we introduce new business functionality – we don’t even have to submit a new version to the app stores.”

It is worth noting that functions previously only available to native applications, such as push notification, location, camera and working offline are now or will be soon be available to web-based applications, which means hybrid apps will need even fewer native extensions.

Another advantage web technologies bring to apps is the ease if testing, as Updown’s Chris Freise explains:

“Most testing (of the app functionality that doesn’t require plugins) can take place in a browser. Changes can be tested with a refresh at the push of a button rather than having to do a full compile of the app each time.”

Performance: the need for speed

Every silver lining has a cloud. For hybrid (and web) apps there has been a big question mark over performance versus native apps. This is mostly about how quickly the app reacts to user interactions.

Whether this is real or perceived; whether users a) notice or b) care; and the extent to which performance issues are caused by poor development techniques and inappropriate choice of framework and JavaScript library has been hotly debated for years.

For example, Drew Crawford: Web apps are slow, Dan Bricklin: Oh no they’re not.

The jQuery Mobile JavaScript library has received some criticism for being too large for mobile apps as it was built for mobile web. See here or here.

Yet the creator of the jQuery library John Resig was recruited by Khan Academy to help build their apps – often cited as a poster boy for hybrid apps – and to establish their computer science curriculum.

But the most important thing is what the users think.

Pieter Gorsira is lead developer and co-founder of Lawnmower, an app for Android and iOS that enables people to passively invest their spare change in the digital currency Bitcoin:

“As far as native vs. hybrid, you aren’t missing out on much by going hybrid. Also, it really depends on the application. The Lawnmower app is really just a nice interface for a user to interact with their Lawnmower account. For this purpose, native really doesn’t offer anything special over hybrid.

It used to be that hybrid apps suffered performance-wise (especially with transitions etc.) but that era is long gone. Most consumers have no idea that Lawnmower is a hybrid app and would be unable to tell the difference between native and hybrid performance. For something with bleeding-edge performance needs, you may need to go native, but for 95% of apps the hybrid approach is more than sufficient.”

Choosing a framework

The best known framework for building cross-platform hybrid apps is PhoneGap which has been downloaded over 1 million times and is being used by over 400,000 developers.

PhoneGap is built on an open source platform called Apache Cordova, which was donated to the Open Source world by PhoneGap’s owners Adobe.

Other frameworks also use the Cordova source, such as Ionic, Monaca, Onsen, Telerik, Intel XDK and Framework7.

See these analyses of the leading platforms by Noeticforce or Tutorialzine.

Choose a framework that:

Has a pedigree, commercial backing, active community, good customer base, and been used to build lots of good apps (like yours).

Has lots of tools, plugins and a good JavaScript library – all of which, should be well-documented and well-maintained.

Fits the purpose of your app – some frameworks are more suited to enterprise apps, others to consumer or games and some are better for cross-platform development.

Plays to your strengths e.g. if you have worked with Angular JS choose a framework that is based upon it, such as Ionic; if you are new to hybrid app development, choose a more straightforward framework.

Or no framework

When you break down most hybrid apps, you find a web app and/or web site displayed with an in-app web browser called WebView with some additional native code, often formed of plugins. This set-up doesn’t require a framework.

Magnus Jern, president DMI International:

“It’s also becoming more and more common to create your own hybrid apps combining a shell with the main menu and core functionality, mostly with WebView content. Over the past year, Apple’s App Store has become increasingly friendly towards apps that use WebView, since browser performance has drastically improved.

This is the most common method for m-commerce apps, used by Abercrombie & Fitch, GAP, H&M, Mango, Furniture Row, TK Maxx and others, as it means they can develop a thin layer of native core functionality such as push notifications, barcode scanning and geolocation with all the product catalogue and commerce functionality based on responsive website in WebView.

For commerce apps, hybrid is usually the only alternative as the e-commerce platforms were not set up with APIs (e.g. REST JSON) needed to support native apps – therefore WebView is the only option.”

Plugins

A plugin is a piece of ready-to-use code that enables hybrid applications to access the native functions of the device, such as camera, barcode-scanner, touch ID, geolocation, NFC and push notifications.

There are repositories of plugins such as Cordova Plugins which boasts 954 plugins as well as and smaller specialist ones such as ngCordova for Angular JS users. But the environment still can cause frustration for developers.

Updown’s Chris Freise:

“The Cordova plugin landscape is quite disorganized. On more than one occasion we’ve installed a plugin only to discover that the application will no longer compile due to conflicts with another previously installed plugin. This has resulted in us having to spend time to find some creative workarounds, even having to abandon a specific plugin altogether.

The plugin environment is improving, though. Sites like ngCordova have done a good job aggregating the best and most useful plugins in one place and linking out to the setup documentation.”

Good press/bad press

It’s difficult to get a definitive list of big-name download apps that are hybrid. VenturePact lists Amazon Appstore, Evernote, Apple App Store, Gmail, Khan Academy, Instagram and Twitter as hybrid apps.

Yauh adds Feedly and Mafia Wars to the list. Both also include Uber, but the company says this is false. Telerik cites Basecamp and Yelp.

If you have too much time on your hands you could conduct an investigation yourself.

Over the years, the news that some big names have dropped hybrid apps for native, has caused damage to the credibility of both web and hybrid apps.

These include LinkedIn in 2013 and Facebook in 2012. Facebook’s slating of HTML5 prompted quite a backlash. Sencha even built a Facebook web app to prove Facebook’s failure couldn’t be blamed on HTML5.

Ecosystem

Developers are dependent on a healthy ecosystem, which means a ready supply of tools, methodologies and reusable code – including plugins in the hybrid environment.

The main reason LinkedIn gave for its change of direction in 2013 was lack of mature development ecosystem, including lack of tools – e.g. for debugging the software.

Back then Kiran Prasad, senior director for mobile engineering, LinkedIn said:

“It’s not that HTML5 isn’t ready; it’s that the ecosystem doesn’t support it. There are tools, but they’re at the beginning.”

In three years, of course, things have changed a lot. Today the number of developers building web and hybrid apps has swollen massively, all contributing to methodologies, skills, plugins etc., and creating a massive market for tools vendors.

As noted previously, HTML5 and JavaScript is the primary platform for more US app developers, than any other platform.

This isn’t just about the open source community, there are plenty of tech heavyweights investing in hybrid app development, platforms and tools – particularly around enterprise apps (internal apps developed by companies to mobilize their workforces), which has all helped to boost the ecosystem.

These include SAP, IBM, Oracle and Intel.

Money

One of the major advantages of hybrid development is that can cost less – a lot less, according to San Diego web shop Comentum – than developing native apps for each platform as well as a web site/app.

But the more custom native development on top of the web app, the more each app is going to cost.

DMI’s Magnus Jern:

“It’s not that a hybrid app is not good enough for the consumer. Most customers probably don’t care as long as the performance, reliability and UX is good.

The main challenge is that the cost of delivering a native like experience using hybrid is usually higher than developing real native apps for iOS and Android. Therefore few companies that have gone down that path will talk about it. LinkedIn, Twitter and Facebook all went down the hybrid route to start with ‎and then had to redo their apps from scratch.”

ClickZ attempted to contact several of the big-name hybrid apps, but found none keen to discuss it.