Bringing Your Web Apps and UI Component Library to Native iOS and Android

If you’re a web developer building traditional browser-based applications, there’s a good chance you will one day need to think about how to bring your web projects to a native mobile app. By using the term "native mobile app," I’m not talking about a PWA or responsive web app. I’m talking about an actual native app that you download from the app store and install on an iOS or Android mobile device.

There are a few common scenarios where this is relevant:

• You have an existing web app that you’d like to deploy as a native Android or iOS mobile app
• You’d like to bring your custom collection of web UI components - written in React, Svelte, Angular or (pick your framework of choice) to a native mobile UI

Or maybe you'd just like to build a native mobile app using your existing web skills, as opposed to learning a whole new way to build apps.

In this post, I’m going to briefly explain the challenges you will face when bringing your web projects to native iOS and Android. I’ll then show you how Capacitor, a new native runtime from the Ionic team, addresses all of these challenges and makes it easy to build native mobile apps with the web. Let’s dive in.

The challenges of bringing your web apps to native iOS & Android

Native UI component library styling

To begin, it’s important to understand that most mobile applications are developed using native UI components. 

What does that mean exactly? 

Here’s an example. Imagine you’re building an interface that involves a button component.  If you’re building with the native toolkits, you will not be able to use the existing button component in your custom web UI component library. You will have to use Apple’s version of a button for iOS, based on their “Cupertino” design system, or Android’s version of a button if building for Android, which is based on Google’s “Material Design” approach. 

Why is that a problem?

For one thing, all of the work you put into customizing your Web UI components will be wasted. They won’t work on your native mobile app. The best you can do is try to customize the styling of the native components to fit your existing brand or style guidelines. This is problematic for two reasons.

First, it’s a VERY big undertaking. It will likely take weeks or months. And it will require becoming an expert in native programming languages and SDKs. Plus, you’ll have to do it for both platforms if you want to deploy your app on iOS and Android, which most people do.

Second, your customization options are limited. You may find that you simply can’t perfectly match your brand or style guidelines using native UI controls. If that happens, you’re out of luck.

What about cross-platform frameworks like React Native, Flutter, and Xamarin? The answer varies. React Native defaults to native UI components, although they do have a method of rendering web-based UI components. Flutter uses a custom rendering engine and is written in Dart, so it won’t be compatible with your existing UI components. You’ll need to use their UI kit, much as you would with the native platforms. And Xamarin Native uses the native UI components, so your options are limited to whatever the native toolkits provide.

Code reuse from web to native mobile

And that’s just the styling. Because the native platforms and some cross-platform solutions (like the ones mentioned above) use a proprietary, non web-based approach, very little, if any, of your web project will be transportable to mobile.

At best, you can reuse some of your existing web application code and logic in React Native, since React Native apps are written largely in JavaScript. But Flutter is written entirely in Dart, so you won’t be able to reuse any of your code there. Xamarin Native works in C#. And of course, the native platforms are written in their own specialized languages -- Swift and Objective-C for iOS and Java and Kotlin for Android.

Thus, in almost every scenario described above, if you have an existing web app or UI component library that you want to replicate in a native mobile app, you will essentially be starting at zero for each mobile platform that you're targeting.

But fret not. Solving this very problem is the whole reason we built Capacitor.

Capacitor is how web developers go native

Capacitor is a cross-platform native runtime that runs equally well on native iOS and Android mobile devices, as well as any web browser. You can think of Capacitor as a native container that lets you build web applications that look, feel, and perform the same as native apps -- because at the end of the day, they are native apps. They run as a native binary on an iOS or Android device, have full access to the native SDKs and any native device feature, and they’re downloaded in the app stores just like any other native mobile app.

The big difference is that, unlike traditional native development or cross-platform approaches like React Native, the UI of Capacitor app runs entirely in the browser. This small, but important distinction opens up a whole world of possibilities for web developers and teams who want to bring their web UI components and apps to Android and iOS.

Bring your own web UI components

If you have an existing web-based component library written in Svelte, React, Stencil, or even jQuery, you can port that over to mobile by using Capacitor, without all the rework of rebuilding your UI library for each native platform, and without giving up the power, control, and unlimited customizations you enjoy when building with CSS and your JavaScript framework of choice. It’s all because Capacitor’s UI layer runs in the browser. 

The browser used by Capacitor to render your UI, known as a WebView, is invisible to your application users. But for the UI components and logic inside the application, they will run just like they do in a typical web browser. Plus, with Capacitor as the “glue” between your web application and the native mobile device, you can access any native device feature - such as camera or geolocation - by adding some additional coding and logic to your application.

This also means any popular UI framework like Bootstrap, Material, or Tailwind, will work great in Capacitor. While you’ll need to anticipate and address the many mobile-specific UI paradigms (more on that below), your existing web-based library will now run natively on any iOS or Android device, and on the web as a PWA.

Unlimited styling with CSS

Secondly, because Capacitor’s UI layer is web-based, your customizations options are virtually unlimited. Any CSS styling or customizations you can implement in a typical web project are possible in a Capacitor app. You’re not bound to the native UI controls like you would be in a React Native or Flutter project. If you can dream it, you can be it.

Reuse your web code and logic

Lastly, if you have a functioning web app that you want to deploy as a native mobile app, you can deploy it using Capacitor -- with 100% code reuse. That means all of the hard work you’ve put into perfecting your web app UI won’t be wasted when you want to bring that experience to native Android or iOS mobile. 

A word of caution

While Capacitor addresses the feasibility of bringing your web-based UI components to Android or iOS, there are other hurdles to consider. Mobile styling, navigation, and performance on mobile devices are all very tricky and can be daunting for the uninitiated.

Indeed, our team at Ionic built Ionic Framework to solve this exact problem. Ionic Framework is a mobile-ready UI library that provides an easy way to build native mobile experiences using the web. Our engineers have spent years tweaking and optimizing our components and styling to look and feel great on mobile, including an Adaptive Styling feature that automatically detects and adapts to whatever platform your app is running on, so that the same component looks like an iOS UI control on an iPhone, and an Android UI control on a Samsung Galaxy. It’s one of the big selling points of Ionic Framework that developers get out-of-the-box.

So, if you’re serious about bringing your own UI library to mobile, be sure to account for the many mobile-specific requirements and give thought to whether you have the expertise in-house to make that happen. 

An alternative is to use an open source library like Ionic Framework as the foundation, and then apply CSS styling to match your brand. You can incrementally add your own custom components as needed. Or, start with your web UI component library as the foundation, and incrementally add Framework components as you need them. There are a variety of options, and it’s not an all-or-nothing proposition.

Build your first Capacitor app

Does the idea of a web-first approach to native mobile app development resonate with you? If so, you’re not alone. Capacitor’s adoption has been exploding as of late, as more and more web developers are realizing its power and potential. 

In fact, Capacitor has been installed over 1.5 million times and is currently powering major production apps with hundreds of millions of users. That includes the new Tim Horton’s mobile app, the Sworkit fitness app, and a new app from Southwest Airlines that is designed to help their employees “feel the LUV.” 

If you're curious to see how it works in practice, check out our docs to get started with Capacitor and see for yourself. Or, watch our recent product demo and walkthrough of the latest version.

About Ionic

Ionic is the leading cross-platform developer solution with 5 million developers worldwide. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.

Ionic is a leader in enterprise app development. Thousands of enterprise customers use Ionic to build mission-critical apps for their customers, both external and internal.