DEV Community

loading...
Cover image for The Easiest Way for Web Developers to Build Mobile Apps
Ionic

The Easiest Way for Web Developers to Build Mobile Apps

maxlynch profile image Max Lynch ・4 min read

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:

Alt Text

An Example

Alt Text

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:

Alt Text

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:

Alt Text

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (5)

pic
Editor guide
Collapse
rajeeva profile image
Rajeev Jayaswal

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.

Collapse
maxlynch profile image
Max Lynch Author

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.

Collapse
rajeeva profile image
Rajeev Jayaswal

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.

Thread Thread
maxlynch profile image
Max Lynch Author

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.

Collapse
adnanhz profile image
Adnan

I love Ionic, been using it for a few apps now. BTW is there any advantage using Angular over React if I know both?