For web developers interested in building Mobile apps, there's a plethora of options today. Developers can choose between projects like React Native, NativeScript, Cordova, Ionic Framework, and Capacitor, just to name a few.
Given the large number of options, it's not always clear what would be the most appropriate for a web developer looking for a familiar web-based development experience.
With that, I'd like to make the case that Capacitor (optionally with a mobile-focused UI framework like Ionic Framework) is the most natural and easiest way that web developers can build mobile apps.
"Electron for Mobile"
Electron is a massively popular solution for building cross-platform desktop applications using standard web technologies. Web Developers can use the standard HTML, CSS, and JavaScript they use for web apps, including any popular libraries like React/Angular/Vue, Tailwind, or Material UI, and turn those apps into powerful desktop apps.
This simple formula has turned Electron into one of the most popular cross-platform toolkits. Today, Electron powers many popular apps, like Slack and VS Code.
If you ever find yourself asking "what is the analog to Electron but for mobile apps?" the answer is Capacitor.
Like Electron, Capacitor takes a standard web app that runs in the browser, and extends it with access to powerful native APIs and Native UI (like Camera and Filesystem). These APIs work on iOS, Android, Web, and Electron.
While Electron bundles in a "web view" through Chromium, Capacitor uses the standard embedded Web View native controls available on iOS and Android. This means that Capacitor doesn't suffer from the same bloat issues that Electron does.
The net effect is that Capacitor is really a sort of "Electron for Mobile."
What about React Native or Flutter?
You might be asking yourself: why isn't React Native (or Flutter) the "Electron for Mobile?"
The reason is that React Native and Flutter do not use a standard web browser environment to run an app. Rather, they are abstractions over system UI controls and APIs to provide a "web-like" experience building apps rather than a true web environment. Both require code specifically written for each platform, and cannot use web-specific libraries or code.
This is important, because it means the shortest path for a web developer to build a mobile app is Capacitor, hands down:
An Example
Let's take a simple example of a web app using Ionic Framework with React for a native-quality mobile UI experience, and Capacitor to deploy it natively to iOS, Android, and web.
Taking a look at the code, we see that it's just a plain React app that happens to use Ionic Framework for its UI components. For example, developers familiar with React Router should find the JSX used to build the Tab layout familiar.
Then, by running some Capacitor commands, we can bundle the app and run it right in Xcode:
Since our app is just a plain React app, we can also run it directly in the browser and even deploy it as a Progressive Web App to any static web host:
Finally, Capacitor ships with a JS module, @capacitor/core, that provides a consistent, cross-platform approach to accessing device functionality.
For example, to access the Filesystem API, we can use the same code on iOS, Android, Web, and Electron:
import {
Plugins,
FilesystemDirectory,
FilesystemEncoding
} from '@capacitor/core';
const { Filesystem } = Plugins;
async fileWrite() {
try {
const result = await Filesystem.writeFile({
path: 'secrets/text.txt',
data: "This is a test",
directory: FilesystemDirectory.Documents,
encoding: FilesystemEncoding.UTF8
})
console.log('Wrote file', result);
} catch(e) {
console.error('Unable to write file', e);
}
}
Who's using Capacitor?
Capacitor is being used to power major apps today. Companies like Burger King, Popeyes, and the BBC (who wrote a great article about their use of Capacitor to build universal, web-native apps) are using Capacitor build apps across iOS, Android, Web, and Desktop with one code base and standard web technology.
Capacitor is also the new native foundation of Ionic Framework, which powers over 15% of all apps in the app store today.
Getting started with Capacitor
If you're familiar with Electron, Capacitor should feel very familiar to you. It's installed like a typical JS module directly into your app, and a local CLI tool is added for copying your web app to native iOS and Android projects, as well as syncing and installing new Capacitor plugins.
To get started with Capacitor, check out the official Capacitor Docs and get building!
Top comments (7)
Definitely give it a try. I love the approach Capacitor do to make X-platform app.
It's beautiful.
Only one problem I concern atm is Capacitor uses the standard embedded Web View native controls, so our app will break when running in older devices (Android 4-5 for example).
Already read the article about Ionic Portals, hope it ready for production soon.
Good article, but somehow I felt capacitor isn't matured enough interms of app development. I had tried ionic too which had few issues like uploading my sqlite db to google drive account, local notification etc. Then I moved to pure android development which I feel better option if you already know Java.
Hi Rajeev, thanks for the feedback. I'm confused, Ionic has nothing to do with your sqlite db? Also Capacitor has support for Local Notifications and other APIs, or you can drop down to native code to do anything you need to do while still keeping 95% of your app in cross-platform web code.
Hey Max, what I meant was - I had faced lots of issues with ionic in implementing various use cases. One example being uploading sqlite-db to google drive. Had to struggle lots of make it work and then used to get stuck with new issues.
So I moved to native development. I think ionic is great if we just want to build application which does not involve much of system services, backing up data to google drive, etc.
Thanks for your articles and response though.
Appreciate the feedback. I don't think this is anything specific to Ionic because you can drop down to native services all you need to. However, this is likely a lot easier if you use Capacitor instead of Cordova (Capacitor is our modern replacement for Cordova) which makes it a lot easier to add custom native code.
I love Ionic, been using it for a few apps now. BTW is there any advantage using Angular over React if I know both?
Thanks for sharing this 🙌