If you ever tried to develop mobile apps without touching at all native code like Java, Kotlin, C-Objective, or Swift, you surely have heard about fabulous frameworks that allow you to develop such applications using web technologies like Ionic, Cordova, Phonegap, Flutter, etc. Believe it or not, about 60% of all apps in the app store are cross-platform (they all share the same codebase for multiple platforms).
Well, there's a new framework joining the neighborhood, I'm talking about CapacitorJS, a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom native plugins that your app may need. Additionally, Capacitor provides first-class Progressive Web App support so you can write one app and deploy it to the app stores and the mobile web. Capacitor comes with a Plugin API for building native plugins. Plugins can be written inside Capacitor apps or packaged into an npm dependency for community use. Plugin authors are encouraged to use Swift to develop plugins in iOS and Kotlin (or Java) in Android. CapacitorJS is primarily based on web-nature (unlike cross-platforms natives like React Native and Xamarin).
When to use CapacitorJS
CapacitorJS is traditionally used to convert your existing webb apps to mobile apps. Whether they have been built with Vue.js or React, this tool has been designed to drop into any existing modern JavaScript web application. If you have this kind of app already or you want to start from scratch to the design a native mobile app on iOS and Android, this framework will help you to use familiar web languages to access native features like the Camera without messing with the complexity of the native code.
What are the differences between Capacitor and Cordova?
In spirit, Capacitor and Cordova are very similar. Capacitor offers backward compatibility with a vast majority of Cordova plugins.
Capacitor and Cordova differ in that Capacitor:
- takes a more modern approach to tooling and plugin development
- treats native projects as source artifacts as opposed to build artifacts
- is maintained by the Ionic Team
💙 😊
See the docs for more details.
Do I need to use Ionic Framework with Capacitor?
No, you do not need to use Ionic Framework with Capacitor. Without the Ionic Framework, you may need to implement Native UI yourself. Without the Ionic CLI, you may need to configure tooling yourself to enable features such as livereload. See the docs for more details.
How to use Capacitor
As mentioned, you could deploy CapacitorJS in any modern JavaScript application. For example if you have a VueJS application that works already, you may simply install capacitor with the following command:
npm install @capacitor/cli @capacitor/coreAfter installing the core, initialize the Capacitor instance in your project:
npx cap initNow, add a platform to work with, for example android:
npm install @capacitor/android
npx cap add androidBuild your regular VueJS application to build the web resources. As usual, the build will be stored in the dist directory of your Vue project and that's exactly what Capacitor will use as web resources. Synchronize your web assets with the Android project:
npx cap syncAnd, assuming that you have already Android Studio installed, you may open the project with the following command:
npx cap open androidYou can use then the UI of Android Studio to launch your new mobile app either in your own device or an emulator.
Willing to test CapacitorJS to develop your next application? Visit the official website or the official GitHub repository for more information.
