Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Getting Real With Hybrid Mobile Apps

DZone's Guide to

Getting Real With Hybrid Mobile Apps

Hybrid apps are certainly tempting, so here's what you need to know about offline support, client-side data storage, frameworks, performance, i18n, and more.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

I first got introduced to the PhoneGap platform shortly after Adobe acquired them in 2011. I had begun to play a bit with mobile development using Flex, but PhoneGap really enticed me. As a web developer, being able to reuse my existing HTML, JavaScript, and CSS skills (OK, I can Google for CSS stuff) was extremely enticing. I spent a lot of time working with PhoneGap, and then Cordova, and quickly discovered what many developers have - it's simple to go from random web files to something that appears on your phone. It is far more difficult to build something that actually works well. That's not a failing of the hybrid platform, but a simple truth. In my session at Mobile+Web DevCon, I'll be going over some basic tips to help go from "it works" to "it works well!" What are those tips?

1) Knowing your DevTools Is 100% Required

While this is true of web development in general, hybrid mobile development makes it even more true. If you don't know how to use the tools within your browser to debug your web apps, you will not be prepared to use them to debug your hybrid apps. (And with some platforms, like Ionic, you can do a lot of development in your desktop browser.) In 2017, knowing DevTools is just as required as knowing HTML, CSS, and JavaScript.

2) Offline Support is Essential

In some ways, a hybrid mobile app already has offline support. All of your assets (HTML, CSS, JavaScript files, images, etc) ship with the app and are installed on the user's device. But if your app makes any use of a remote API, then you have to be prepared to handle cases where your app is offline. Also, an app may go offline and online randomly! Plus, you may be online, but in a poor network state. If you're moving large amounts of data across the wire, you would need to check not only for being online, but being in a high-speed network.

3) Client-Side Data Storage

Part of the way you can handle being offline is by making use of client-side data storage. Hybrid mobile apps can store data in SQLite databases, IndexedDB, WebStorage, and even the file system. Each of these methods has their own strengths and weaknesses as well as places where they make the most sense.

4) There's a Whole World Out There — Is Your App Ready?

Sometimes, it's easy to forget that our world is made of people who not only speak different languages, but also write dates and numbers in completely different ways. As a simple example, what day is this?

4/8/2017

Is it April 8, 2017? Or is it August 4, 2017? That's a pretty important distinction. Consider numbers — here are three different ways of writing the exact same number:

  • 1,000,000.99

  • 1.000.000,99

  • 1 000 000,99

While not quite as big a problem (I think folks who use periods for thousands separators would probably understand a number written using commas), it's still another point of possible confusion for your users.

And, of course, there's the issue of the app's user interface itself. Should it be an "Add to Cart" button or a … well, let's pretend I didn't forget my years of high school French and I could write the same text in French?

At the end of the day, preparing your app for an international audience could be crucially important for your success. As you can imagine, it adds a bit of work to your development, but it's also something that's better started in the beginning of your development cycle versus the end.

5) Making It Pretty

At the end of the day, it doesn't matter how cool your app is if it looks ugly. Making your app look nice on a mobile device is crucial and certainly can't be done at the last minute. For many hybrid mobile developers, this is where a good framework comes in, and for me, that's Ionic. Ionic helps my app look nice as well as providing common UX interfaces like "Pull to Refresh."

This is also the stage where I will remind you — you must test on real devices. If that means going out and buying an iPhone, then do so. While you can simulate most devices, nothing replaces actually using your app on a device and seeing how well it responds.

6) Performance

Yet another reason to test on real devices is to see how well your app performs. If clicking a button loads some data, what is that experience like on the mobile device? Do you need a "loader" widget of some sort to make it obvious that the app is doing something? Does your app transition nicely from page to page? DevTools can help out here as well!

7) And More…

Finally, other things you will want to check are accessibility and security. In both cases, there are plugins and plenty of support documentation to help with this.

As you can see, this is quite a list. Hopefully, it comes as no surprise that building a good app takes planning, energy, and a lot of hard work. Hybrid mobile development does help quite a bit, but developers new to this way of creating mobile apps should still be prepared to put in a lot of time to build a quality mobile app!

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
hybrid mobile apps ,mobile ,offline mode ,i18n

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}