The following is a guest blog post from Dan Pastori of Server Side Up. Server Side Up is an online community that shares tutorials and resources about Vuejs, Laravel, Wordpress, and more recently have started creating resources on how to deliver native apps with Capacitor.
Using CapacitorJS with NuxtJS is a perfect combination. NuxtJS allows you to develop powerful, modern fronteneds using VueJS. Combined with CapacitorJS, you can take those modern frontends, compilie them to mobile, and deploy to the platform of your choice.
Working with CapacitorJS, the power of native device features is there for you to integrate into your application. These features include GPS, Haptics, Camera, Filesystem, etc. When I structure a NuxtJS frontend, I like to design it in a way that allows me to re-use important modules through-out components, pages, and layouts.
Angular is used to build seriously large applications, but did you know you can target iOS and Android (and PWA) from your codebase without many changes to your existing Angular app?
With Capacitor, any Angular app can be turned into an iOS and Android app with full access to native APIs and OS controls. Capacitor does this by providing a native runtime for web apps with a bridge to communicate from the web app to the native layer, along with many Native APIs and access to hundreds more from the community.
Perhaps a surprise to many Angular developers, Angular is already used to power a significant number of app store apps (at least 15%). This is because Ionic Framework has been widely used as a mobile UI framework for Angular since the AngularJS days and many Cordova apps used Angular over the years.
Capacitor is a cross-platform native runtime for web apps, or hybrid apps, if you prefer. That's quite a mouthful, what does that mean exactly?
At a high level, that means Capacitor takes a typical browser-based web app, and then packages it up to run on iOS, Android, and PWA with access to native platform features and OS-level controls.
Capacitor then acts as the runtime facilitating communication between the web app and the underlying OS.
Let's dig in and explore how Capacitor works under the hood.
In the React world, the primary way to build native iOS and Android apps has been React Native. Created by Facebook in 2015, React Native enables developers to use their React skills to build iOS and Android apps using platform native UI elements. React Native is popular and widely used, and it’s a great solution for many teams.
However, React Native comes with a number of tradeoffs. First, it requires developers to build in a React Native specific way, using views/JSX for each platform, and using libraries that support react-native (as opposed to most React libraries that support react-dom). But perhaps most importantly, React Native is not a web environment, so it’s not possible for teams to take their web-based React apps and libraries to deploy native apps.
The net effect is that it’s not possible to take, say, a Material-UI React web app, and deploy it natively to the Apple App Store or Google Play Store with React Native.
To do that, we need to take a look at Capacitor -- a native runtime for cross-platform web apps, including any and all React web apps.
Today at the first ever official Ioniconf, we unveiled a number of exciting updates to Capacitor and the Capacitor community.
In no particular order, we announced:
Today we are excited to announce Capacitor 2.0!
Capacitor 2.0 offers some key platform updates as well as security and bug fixes. These include:
We documented the whole update and talked about what's next for Capacitor over on the Ionic blog.
Check it out:
Today I’m thrilled to announce the 1.0 release of Capacitor, Ionic’s new Native API Container that makes it easy to build web apps that run on iOS, Android, and the web as Progressive Web Apps—with full access to native functionality on each platform.
We documented this momentous occasion over on the Ionic blog, complete with a comparison to Cordova and where Capacitor is headed from here.