April 8, 2019
  • Perspectives
  • Cordova
  • PhoneGap
  • UX

PhoneGap Devs: It’s Time to Embrace a UI Framework

Matt Netkow

PhoneGap (and later Adobe PhoneGap & Apache Cordova) emerged back in 2009 as a major evolution in app development. It allowed web developers like myself to reapply their web skills to create native mobile experiences for Android, iOS, and other platforms. In fact, I’ve been a long-time PhoneGap developer that loves the platform’s power and potential.

Even before I joined the Ionic team, one of the things I learned quickly was the importance of pairing Cordova/PhoneGap with a cross-platform UI framework like Ionic. In this post, I’ll share a few key reasons why every PhoneGap developer should be using Ionic (or something similar) to build their next mobile app.

Why PhoneGap and Ionic?

PhoneGap powers the capabilities that permit web code to run when embedded into a native app shell, as well as accessing native device features (camera, Bluetooth, etc.) using JavaScript.

While all of this is great, it’s what PhoneGap doesn’t give you that we are going to talk about today. When it comes to PhoneGap, the big thing that’s missing from the puzzle is the rest of the SDK and UI infrastructure that you need to build a high-performing, native-like app. Things like gestures, animations, modals, and button components. The technology also doesn’t offer built-in navigation or scrolling features—You’ll have to build all that yourself or use a UI toolkit.

Native SDKs vs PhoneGap

One such toolkit is the open source Ionic Framework. With over 100 UI components, plus navigation, platform-specific styling, and lots of other goodies that we’ll talk about here, it allows you to focus on your app’s core features instead of wrestling with a variety of concerns encountered when building for mobile devices.

Now, let’s jump into some of the major advantages of using Ionic if you’re a PhoneGap developer.

Platform Continuity

The first thing that web developers want to accomplish when building mobile apps is ensuring that the UI looks and feels like the platform on which the app is running. Additionally, developers want to implement Apple and Google-approved platform design styling with minimal effort, while users want a familiar, high-performing app experience. In fact, this is a typical criticism directed at hybrid mobile apps: If you simply throw your existing website into a native app shell, it’s noticeable.

An Ionic app viewed on an iOS device will automatically style itself with the iOS theme, while an Ionic app viewed from an Android device renders with the Material Design theme. When viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Also, deciding which platform to use in certain scenarios is entirely configurable and Ionic UI components automatically include platform-specific animations as well.

Android vs iOS Ionic styling

You could reproduce this on your own, but note the subtle design differences in the image above, starting with the “Home” header: The alignment is centered in iOS and is right-aligned on Android. Additionally, the icons in the tab footer have slightly different designs. When appearing across an entire app experience, these differences add up!

Responsive Design

The most compelling reason to build a web-based, cross-platform app is the ability to write one codebase and use it everywhere. This is easier said than done: You need to ensure that the app is responsive across many form factors. On mobile, with thousands of devices available today, this has never been more challenging.

Fortunately, Ionic’s UI components have built-in responsive design. Consider the Ionic SplitPane component, for example: When viewed on a larger, desktop-sized screen, it automatically expands to fill one-third of the available space. Within a smaller viewport, it displays a standard mobile hamburger menu.

Ionic SplitPane component

To test this out yourself, check out the Ionic 4 Conference app on GitHub, implemented in a variety of web frameworks including Angular, React, and Vue.

Constantly Changing Mobile Landscape

There’s no denying it—the mobile ecosystem evolves quickly. There are always new iOS and Android operating system releases to test your app on and thousands of mobile phones and tablets to support. On top of all that, there are occasional new hardware device form factors that are introduced, such as the iPhone notch.

Before joining Ionic, I wrote a guide specifically on the topic of handling device form factors after struggling to get my PhoneGap app to display correctly on the iPhone X. In order to get it to display properly, several steps were required:

  • Updating the viewport meta tag to ensure the entire iPhone screen is utilized
  • Switching to Storyboard splash screens to remove black bars at the top and bottom of the screen
  • Defining “safe area” perimeters so that the physical notch doesn’t hide the status bar
  • Applying a “safe area” for the footer

I struggled with this for hours, tediously researching and incrementally testing each change. Through a combination of Stack Overflow questions, an article from a well-known PhoneGap community member, and the official Webkit blog, I finally managed to cobble together a solution.

Was the effort worth it? In a certain sense, yes, because I needed to support an important new Apple design found in their flagship devices. However, the time I spent on these updates was time not spent building new features, answering user support emails, and so forth.

Fortunately, there’s a better way—A UI framework that has a proven track record of keeping up with the chaotic mobile ecosystem, so you can focus on building your app. Ionic automatically handles the iPhone notch details for you and keeps a constant lookout for any new designs handed down from Apple and Google.

iOS Notch example

What about learning Angular?

Until now, you may have held off adding a UI component library like the Ionic Framework for many reasons, including concerns around timing and effort involved. For me personally, I really wanted to move my PhoneGap apps to Ionic but was scared off at the time by needing to know Angular first.

However, with the recent release of Ionic 4, all major web frameworks are supported (including React and Vue), meaning Angular knowledge is no longer required to leverage Ionic. Additionally, Ionic 4 components even work without a web framework, which is perfect for PhoneGap developers looking to slowly incorporate Ionic into their mobile app.

Getting Started

Even if you started building PhoneGap apps around the same time I did (2013 or so), it’s easy to give the apps a fresh coat of paint by adding Ionic. All that’s required is a <script> tag to include the Ionic UI component library and a <link> tag to include Ionic CSS. See here for more details.

If you’d like to create a new Ionic app from scratch, install Ionic and start building!

Matt Netkow