Saktanong -

Ionic Capacitor emerging as successor to Cordova

The Ionic Capacitor mobile development framework helps enterprise developers build apps using standard web technology so they can tune their custom web apps for mobile devices.

Ionic's Capacitor is emerging as a key tool for web developers to build native iOS and Android apps using the web tools, libraries and frameworks they already know.

Capacitor is an open source cross-platform runtime that works on iOS, Android, mobile and desktop web, and even native desktop apps similar to the Electron JavaScript framework, although Ionic Capacitor is much more optimized towards mobile. Ionic will release version 3 of Capacitor next month.

Capacitor is a follow-on to Cordova, the popular open source framework that allows web developers to wrap an HTML/JavaScript app into a native container that can access the device functions of several platforms, including iOS and Android.

However, the big difference is that Ionic Capacitor is a "generational" step forward, and makes use of  Web APIs, native tools, and other modern dev standards that simply didn't exist when Cordova was first introduced, said Max Lynch, CEO and co-founder of Ionic in Madison, Wisconsin.

Max LynchMax Lynch

Capacitor apps offer tighter native integration -- including direct access to SDKs and device APIs, along with greater performance and support for Progressive Web Apps (PWA) using the latest Web APIs to access native device features.

"I've worked on several cross-platform applications over the years and hybrid applications are usually my go-to solution," said Guy Nesher, a developer for Chicago-based Locusview in Herzliya, Israel. "Until recently, Cordova was the main library used for developing hybrid applications -- however, the limited ongoing support and development was causing a lot of issues. In fact, if I had to guess, this was probably the reason Ionic decided to develop Capacitor."

Next-generation technology

Capacitor offered a modern approach to hybrid applications, and came bundled with many of the native capabilities he generally uses and offered better integration with PWAs, Nesher said. It also had backward compatibility with third-party plugins that were written for Cordova, he said.

"I waited a while before making the jump just to make sure it was stable enough for production, but that happened rather quickly," Nesher added.

Meanwhile, prior to 2018, Sworkit used Cordova for its native app development. Cordova enabled the maker of home workout and fitness apps, based in Bethesda, Md., to create hybrid apps that worked on iOS and Android while writing primarily web code -- HTML, CSS and JavaScript. As they needed native functionality, they would add Cordova plugins.

However, like Nesher, "Sworkit developers continually struggled with Cordova as more team members tried to work on the same project," said Cory McArthur, a user experience engineer at Sworkit. "We spent quite a bit of time getting the build to work before we could get development work done," he said. "This is primarily because Cordova considers each platform a build time asset -- meaning you don't typically commit the build to Git."

On the other hand, Capacitor considers each platform a source asset instead of a build time asset. That means developers can commit any native code they write.

Another feature that drew Sworkit to Capacitor was its cross-platform support, McArthur said. For example, if a developer wants to apply a photo, they can simply call one function within Capacitor, and it will work on websites, iOS and Android. Cordova did not provide any support for web development, so developers would have had to write that themselves, and add logic to determine when to call that code.

An eye on flexibility

Capacitor was originally introduced to the Ionic community as the core of the Ionic stack but has since gained traction in the broader web community. You can use Capacitor with Tailwind, React Material UI, Angular, React, Vue and any other web library or framework. And unlike alternatives such as React Native or Flutter, developers build with standard web tools. There is no proprietary layer or special languages like Dart that a developer would have to learn.

With Capacitor, developers use their existing knowledge of HTML/CSS and can use whichever JS [JavaScript] library they prefer.
Guy NesherSoftware developer, Locusview

The main competitors to Ionic Capacitor are React Native and Flutter. Both offer better performance but require a steeper learning curve.

"With Capacitor, developers use their existing knowledge of HTML/CSS and can use whichever JS [JavaScript] library they prefer," Nesher said. "This makes hiring much simpler and reduces the onboarding process significantly. On the other hand, Flutter uses a niche language called Dart and is fairly new, meaning we are unlikely to find experienced developers and will need to spend more time training new hires."

Enterprise adoption

As a result, Capacitor's adoption stats are growing quickly, with 400,000 monthly downloads. Capacitor is particularly appealing to large enterprises like Restaurant Brands International -- parent company of Burger King, Tim Hortons and Popeye's -- who already have their own custom web UI libraries and would prefer to bring those to mobile rather than build from scratch with the native UI components offered on iOS and Android. The Burger King app is an example of Capacitor in the wild.

Enterprises are prioritizing mobile development and they want assurances from a vendor that the Ionic enterprise packages offer, such as customer support, enterprise support SLAs and premium add-on solutions for biometrics, authentication and mobile DevOps.

"I'm mostly using Capacitor at work where we built an enterprise application for the underground infrastructure industry," Nesher said. "It's a fairly large application that has deep integration with external Bluetooth devices -- GPS receivers, barcode scanners and more, and complex mapping use cases with thousands of locations that include complex data set."

Nesher also used Capacitor to develop a small application that enables users to share the locations of edible fruit trees inside cities, which has mostly been used in his local community.

Darryl K. Taft covers DevOps, software development tools and developer-related issues from his office in the Baltimore area. He has more than 25 years of experience in the business and is always looking for the next scoop.

Dig Deeper on Mobile application strategy

Unified Communications