Capacitor: a practical, powerful tool for native web app development

At Atipik, we opt for native mobile app development (iOS and Android) in almost all cases. We know from experience that no other hybrid technology can compete, either in terms of performance or UX. However, there are situations where developing an app in hybrid may be relevant.

It's safe to say that every fan of the fabulous world of computing has heard of hybrid mobile app development. This type of development has been tried and tested for several years now, and the number of frameworks is growing: React Native, Flutter, KMM, Ionic to name but a few. In this article, we introduce you to Capacitor, the new kid on the block from the Ionic framework team, which is sure to win you over, under the right conditions.

What is Capacitor?

You may already have heard of Apache Cordova. It can be seen as the predecessor of Capacitor. In fact, most Cordova plugins are supported by Capacitor and explicitly referenced in the documentation.

The Ionic team sums up Capacitor very well:

Capacitor is an open source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.

It's a native environment (iOS, Android, Web) for building cross-platform native web apps in JS, HTML and CSS. This means you can create web apps for all platforms.

The term "native web app" sums up Capacitor's philosophy. It allows you to create web apps that can exploit native APIs (iOS, Android, Web). Web and native technologies work hand in hand.

Like its Apache Cordova predecessor, Capacitor provides a whole range of plugins for accessing native APIs:

• Capacitor Official Plugins: official plugins maintained by the Capacitor team.
• Capacitor Community Plugins: plugins provided by the Capacitor community
• Capacitor Enterprise Plugins: paid plugins for enterprises
• Cordova Plugins: Cordova plugins compatible with Capacitor

When and why choose Capacitor?

The choice of a framework or tool, when necessary, is crucial to the success of a project. That's why it's important to study the advantages and disadvantages before taking the plunge. Here are a few criteria to help you in your decision to choose Capacitor for the development of your hybrid Web app.

1. Wanting to port a PWA to iOS and Android

If all you want to do is develop a web app, there's no need for Capacitor. On the other hand, if you intend to port your PWA to mobile, Capacitor will prove a very good choice.

2. Have a completely custom design

Capacitor doesn't provide any UI components for creating your user interfaces (UI). All it does is create a web application bundled inside a native app, providing access via plugins to native APIs. It's then up to you to create (from scratch) all the elements that make up your interface, such as navigation, etc...

The Look and Feel of your app will therefore not be that of a native app. If, on the other hand, you want a design that's close to native, you're better off with Ionic, React Native or Flutter.

3. Staying with Web development

If your team is primarily Web-based, and doesn't want to learn other languages or switch to native development, Capacitor is the obvious choice. It allows you to keep the framework of your choice, or even use Vanilla JS.

4. Start with an existing web project

One of Capacitor's strengths is that it integrates very well with existing web projects (VueJS, React, Angular or even Vanilla JS). If your app is already responsive, you can easily add the Capacitor layer and deploy your app on iOS and Android.

Advantages

Code once, run everywhere

As with any hybrid development framework, Capacitor's primary advantage lies in reusing the same code to run on all platforms. This clearly saves time.

Web standards

A Capacitor app is nothing more than a web app, executed inside a WebView (a mini-browser, if you prefer). No need to learn a new language or technology. Just HTML, CSS and JS, and that's it!

CLI

The capacitor commands (CLI) are simple and effective, and with just a few commands you can launch the app on iOS and Android.

Hot-reload on physical devices too!

Web development means hot-reloading (or live-reloading). Capacitor lets you configure the capacitor.config.json to load the web app (embedded in the WebView) from the development server. In this way, any changes to the JS code are automatically propagated to the devices.

Low dependency

Since Capacitor acts as a wrapper for the web app, it's perfectly possible to decide one day to do without it and migrate to something else. Of course, you'll need to replace all the Capacitor plugins you use.

Disadvantages

An interface to build from scratch

As already mentioned, Capacitor doesn't provide any basic components for building interfaces (buttons, forms, etc.). So you'll have to do everything by hand. On the other hand, you may decide to start with Ionic if you want a design close to native without too much effort.

No default navigation system

As for navigation, it's up to you to set it up. Once again, a framework like Ionic will give you access to an integrated navigation system.

Lower performance than native apps

As ever in the world of hybrid apps, performance is not comparable to that of native apps. Nevertheless, the performance of embedded web apps (WebView) is slowly but surely moving towards performance that's closer and closer to native. If the app you're developing isn't resource-intensive, you shouldn't have any problems there.

A still young community

Although Capacitor is developed/supported by the Ionic team, its community is still young. The plugins provided by the community are not yet numerous, and you may encounter bugs or unresolved issues.

Conclusion

Capacitor is not suitable for all apps/projects. If you're looking for optimal performance or near-native design, you're better off turning to a framework like Ionic or React Native, or even going native. However, if you're looking to quickly develop a hybrid web app for iOS and Android, or if you want to "port" an existing web app to mobile, Capacitor could be an excellent choice. Note that Capacitor is still in its infancy, and its community, though growing, is far from matching that of Flutter, React Native or Ionic. So you can expect to encounter a few bugs and headaches if you decide to implement features that could be described as exotic.