The Magic of Vite and Native in 2024: A Brief Overview

As we navigate through the technological advancements of 2024, Vite is becoming an essential tool for helping developers create high-performance apps for the web and mobile devices. The combination of Vite and native development is proving especially powerful, empowering developers to create even better web and mobile applications.

Let’s look at the latest in Vite-based tools and gather insight into the ever evolving ecosystem of the Web Native landscape. We’ll see what new tools are out there, the latest targets we can deploy to, and how tools like Ionic are utilizing Vite to provide the best-in-class experience for developers. 

Vite: The Heartbeat of Modern Development

For the uninitiated, Vite is a developer tool that has become the de facto tool for most frameworks in 2024. With a focus on speed (vite is French for ‘quick’), it provides an extremely fast dev server with hot module replacement as a default and a pre-configured build process to ship a highly optimized build of your app and assets. Vite achieves this speed by leveraging ES modules instead of providing its own module API. 

While we’re going to look at Vite from a Web Native preselective, Vite is also utilized in other ecosystems like meta-frameworks such as Nuxt, SvelteKit, SolidStart, Astro, and Analog.

With this in mind, let’s look at what tools matter in a Web Native context, how they differ from one another, and how they are utilizing Vite.

Four Universal Native + Web Tools

There are a few tools that aim to support native compilation to multiple device targets. They’re Capacitor by Ionic, Tauri, NativeScript, and React Native. All are free and open source.

Only Capacitor and Tauri are framework agnostic and Vite-powered.

NativeScript

For the foreseeable future, NativeScript uses Webpack as its build tool and is tightly coupled to it, meaning it’s not likely to move to Vite anytime soon. NativeScript also does not try to completely solve the deploy-to-web problem as having a completely universal build (mobile + web) is not its primary goal. NativeScript’s primary goal is to provide a familiar development experience for web developers, but focus on building for native platforms. With this goal in mind, it can adapt to new native platforms, like Apple Vision Pro, without having to account for supporting the web platform.

React Native

React Native is an incredibly popular tool that provides a React-based abstraction around native UI & controls. If you’ve done any work with React Native in past years, you’re probably familiar with their build tool/bundler, Metro. Instead of Vite, React Native developers almost exclusively use Metro. It serves a similar purpose, but you lose access to the broad Vite plugin ecosystem.

Recently, the React Native community has started to look into using Vite instead of Metro. Nathan Weinert, the creator of Tamagui – a cross-platform React component library – has been experimenting with using Vite with React Native after months of work. While very impressive, it requires a lot of effort and is coming from a community member and not the core team, so it’s hard to know if this will become the default in the future.

Tauri

Tauri is a cross-platform tool chain based on Rust that originally started out as a replacement for Electron. Recently, Tauri has shipped a beta version of their new mobile platform, which aims to bring all the Rust APIs they’ve built for their desktop platform to mobile.

Tauri’s architecture is practically identical to Capacitor’s as far as its capabilities go – it will support any bundler or meta-framework. The differences are in the native bridges, testing workflow, plugin ecosystem, and debugging workflow. Because Tauri allows you to write some of your web application code in Rust, the requisite debugging and testing workflows involve mocking out any RPC calls as well as working with Rust-specific test harnesses for any code written in Rust.

Another difference between Capacitor and Tauri is the plugin system architecture. Currently, Tauri takes first party ownership of their entire plugin ecosystem. It is not possible to write custom plugins for Tauri like it is for Capacitor. Since Tauri mobile is newly in Beta, they may very well open up the plugin ecosystem in the future.

Overall, since Tauri is front-end agnostic, Vite can be used here with ease. As there are plenty of starter templates that are based on Vite, you can get started building with Tauri for mobile and desktop quickly.

Capacitor: The Native Bridge

Capacitor is a cross-platform tool that exposes native APIs through a bridge and provides a TypeScript API to interact with said API. Capacitor is also front-end agnostic, so you’re free to use any choice of SPA-framework or meta-framework that you are comfortable with.

Capacitor has supported Vite out of the box since day one. This becomes super compelling when you are developing on the device and using Vite’s dev server to power your whole experience. Taking this a step further, even if your framework of choice does not use Vite, you can still use Capacitor which only requires a dist folder to bring in your web assets.

For projects aiming for a native feel without abandoning web technologies or meta-frameworks, Capacitor is the clear choice. It’s been around for years and has a mature and open plugin ecosystem. Its ability to wrap web apps in a native shell, offering access to device features, makes it a versatile option for projects developed with Vite.

2024 News: Navigating Regulatory Changes in the EU

Due to the discussions happening between Apple and EU regulators, the native landscape is shifting. It’s critical for developers to stay informed if they are shipping PWAs to their users. All of these changes, but particularly those around PWAs and missing + removed features by Apple, underscore the importance of flexible development and deployment strategies. Capacitor provides a robust solution to meet user needs amidst ever-changing regulations.

On March 1st, Apple reversed their decision to kill PWAs in iOS 17.4. Throughout the entirety of February, it had looked like Apple was going to release iOS 17.4 with their broken PWA implementation, in spite of EU regulations. It’s great to see that decision reversed; however, web developers that were relying on PWAs to serve their EU user’s mobile needs are understandably concerned and want to make sure they have an answer for if something like this happens again.

Both Capacitor and Tauri would safeguard developers if something like this occurs in the future.

Looking Forward

While NativeScript won’t work with Vite or compile for the web, it’s a viable choice if you want to build a highly platform-oriented application to ship to things like VisionOS, Android, Apple TV, and iOS. 

Tauri’s foray into mobile development, though in its early stages, represents an exciting frontier for developers who also like Capacitor, want to ship to Desktop, and are willing to experiment with new technologies. Meanwhile, Capacitor is a tried-and-true option for those looking to ship to mobile using web technologies, with robust community support and a vast plugin library behind it. Learn more and try Capacitor for yourself today.