{"id":2681,"date":"2019-04-08T14:25:59","date_gmt":"2019-04-08T14:25:59","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2681"},"modified":"2020-10-15T22:33:13","modified_gmt":"2020-10-15T22:33:13","slug":"phonegap-devs-its-time-to-embrace-a-ui-framework","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/phonegap-devs-its-time-to-embrace-a-ui-framework","title":{"rendered":"PhoneGap Devs: It’s Time to Embrace a UI Framework"},"content":{"rendered":"

PhoneGap (and later Adobe PhoneGap & Apache Cordova<\/a>) 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.<\/p>\n

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.<\/p>\n

<\/p>\n

Why PhoneGap and Ionic?<\/h2>\n

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.<\/p>\n

While all of this is great, it’s what PhoneGap doesn’t give you<\/em> 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\u2014You’ll have to build all that yourself or use a UI toolkit.<\/p>\n

\"Native

One such toolkit is the open source Ionic Framework<\/a>. 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.<\/p>\n

Now, let’s jump into some of the major advantages of using Ionic if you’re a PhoneGap developer.<\/p>\n

Platform Continuity<\/h2>\n

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.<\/p>\n

An Ionic app viewed on an iOS device will automatically style itself with the iOS theme<\/a>, while an Ionic app viewed from an Android device renders with the Material Design theme<\/a>. 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.<\/p>\n

\"Android

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!<\/p>\n

Responsive Design<\/h2>\n

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.<\/p>\n

Fortunately, Ionic’s UI components have built-in responsive design. Consider the Ionic SplitPane component<\/a>, 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.<\/p>\n

\"Ionic

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

Constantly Changing Mobile Landscape<\/h2>\n

There’s no denying it\u2014the 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.<\/p>\n

Before joining Ionic, I wrote a guide<\/a> 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:<\/p>\n