Earlier this month, ByteDance—the company behind TikTok and CapCut—introduced Lynx.js to the world. This could be big news for the Vue community, as it may enable native app development with Vue!

Lynx is a UI framework built on JavaScript that allows developers to build both web and mobile applications that feel native thereby fulfilling the “write once, run anywhere” dream frontend/UI developers have pursued for a long time.

Now, you’ve most likely heard of cross-platform UI frameworks before, so why should this one matter? In this article, we’ll explore Lynx, how it works, and what it means for the future of native mobile apps built with Vue.

History of Mobile development with Vue

Before we get into Lynx and why this is an exciting update for the Vue community to keep an eye on, it’s important to discuss other cross-platform solutions that currently exist in the Vue ecosystem.

1. Nativescript-Vue

NativeScript-Vue allows developers to create native mobile applications using Vue and Nativescript. It provides direct access to native APIs and platform-specific functionalities while maintaining the familiar Vue syntax and development patterns. Nativescript Vue has been around since 2018 and is fully open source.

2. Ionic Vue with Capacitor

Ionic Vue combines the power of the Ionic Framework with Vue.js to create cross-platform applications using web technologies. While not strictly “native”, Ionic Vue applications can access native device features through Capacitor plugins, making it a popular choice for hybrid mobile development and mobile web/pwa solutions.

3. Quasar Framework

Quasar is an open-source Vue.js framework that enables developers to build applications for multiple platforms including web, mobile, and even desktop (through Electron) using a single codebase. It provides a rich set of Vue components and utilities, along with built-in support for PWA, Capacitor, and Electron, making it a versatile choice for cross-platform development.

While these are all great options for building cross-platform apps using Vue, they all come with their many challenges. Native-script uses webpack and doesn’t support modern development tooling like Vite and Rspack by default, Ionic Vue is great for web-like experiences but doesn’t always deliver truly native performance and feel, which is a big deal today. And Quasar, despite its comprehensive feature set, can have a steeper learning curve due to its all-in-one approach.

These challenges have created opportunity for innovation, particularly in achieving a balance between developer experience and native performance. That’s why Lynx, with its fresh perspective on cross-platform development, shows such promise.

Why Lynx for Mobile Vue Apps?

In the official documentation, Lynx is referred to as an alternative web tailored for app development. Let’s look at some key features that make Lynx a compelling option for Vue developers looking to build performant and scalable mobile applications.

1. Lynx is Performance Driven

Lynx is built for performance-first mobile applications and uses a dual-threaded architecture which means that key tasks during development are separated into multiple threads. Namely, the UI/main thread and the Application/Background thread.

Let’s break down these terms:

The UI/main thread: This is primarily responsible for rendering the user interface, and handling synchronous UI tasks like event handling. The UI thread is powered by a custom JS engine called Prim JS which was built and optimized specifically for Lynx. It also uses Rspeedy (a toolchain based on the popular Rust-based bundler Rspack).

The Background thread: This handles your application logic, such as data processing, API calls, and state management.

By separating these two threads, Lynx makes for a more fluid user experience where complex background tasks with heavy computations don’t block the main thread, thus resulting in instant first frame rendering for the end user.

This performance improvement can already be seen powering some parts of the Tiktok ecosystem such as its search, studio, and live.

2. Lynx takes a Web-first Approach

Another core feature of Lynx is that it remains true to its web-first approach. Lynx allows you to bring along your existing web development knowledge of building UIs with markup (HTML-like syntax) and native CSS just as you would for the web.

It takes it a step further by offering direct support for modern CSS features and visual effects like gradients, clipping and masking.

3. Lynx uses Components

Lynx encourages the component way of building UIs as seen in modern JS frameworks like Vue.

This component-based architecture promotes code reusability and maintainability. Developers can create encapsulated, reusable pieces of UI that manage their own state, making it easier to build and scale complex applications.

4. Lynx is framework and platform agnostic

Unlike React Native, Lynx takes a framework-agnostic approach. Lynx’s architecture allows for integration with other popular frontend frameworks like Vue. According to the announcement blog post, frameworks other than React already account for roughly half of Lynx’s total usage.

This design decision opens up possibilities for the Vue community to leverage Lynx’s powerful features while maintaining their preferred development environment.

Lynx is not only framework agnostic but also platform agnostic in terms of host platforms and rendering backends. This flexibility allows Lynx to expand to various platforms, including desktop computers, TVs, and IoT devices.

Vue + Lynx

Lynx launched with support for React (ReactLynx) as their initial frontend framework, and since then there has been a lot of discussions around creating its Vue counterpart.

The most popular of these discussions came from this post on X by Evan You (founder of Vue.js) where he states that the Vue team would be happy to support anyone willing to work on a Vue on Lynx integration.