Developing native cross-platform experiences requires choosing the right user interface (UI) library, as it serves as the foundation for creating visually appealing and interactive user experiences. Tauri, a popular toolset for building lightweight desktop (and soon mobile!) apps using web technologies, offers compatibility with various UI libraries. Here, we cover some of the fastest UI libraries suitable for native cross-platform apps with the Tauri toolset. We explore Angular, React, Vue, Svelte, SolidJS, and Qwik and other UI libraries that primarily focus on JavaScript and/or TypeScript, and how they compose together with Tauri.
Svelte
Svelte and Tauri together form an attractive solution for creating performant, lightweight, and cross-platform apps. Svelte is a modern JavaScript compiler that helps to write easy-to-understand JavaScript code which, when compiled, results in highly efficient, imperative code that directly updates the Document Object Model (DOM). The synergy of Svelte and Tauri allows developers to build projects that are both high-performing and resource-efficient, mainly because both approaches tend to disappear and focus on the end products.
Fun fact: this entire website is built on SvelteKit, the Svelte-based framework!
Svelte differs from other frontend frameworks and libraries (like React, Vue, or Angular) in that it shifts the work from the browser to the build step by writing code that directly updates the DOM when state changes. This results in less JavaScript that needs to be downloaded and parsed, ultimately resulting in faster initial load times.
Tauri is designed to offer a lean and efficient runtime for desktop apps. It accomplishes this by utilizing a Rust backend and leveraging the system’s webview for rendering the frontend. The end result is a small binary size and a low memory footprint, leading to quicker startup and better runtime performance.
Svelte’s performance is generally better than that of React, Vue, and Angular because it compiles components to highly efficient imperative code that directly manipulates the DOM. React and Vue use a virtual DOM, which introduces additional overhead, while Angular’s performance can be affected by its complex change detection mechanism.
Things built with Svelte tend to have smaller bundle sizes compared to those with React, Vue, and Angular because Svelte removes the need for a virtual DOM and includes only the necessary code in the final bundle. Since Tauri is agnostic to the frontend framework apps use, it can be combined with Svelte to provide a lightweight runtime for projects built with Svelte, React, Vue, or Angular.
Svelte is often considered easier to learn than React, Vue, and Angular due to its simpler syntax and more intuitive reactivity system. However, its ecosystem and community are not as large as those of React, Vue, and Angular, which might result in fewer resources for learning and troubleshooting.
SolidJS
SolidJS and Tauri form another potent combination for creating performant, lightweight, and secure experiences. SolidJS is a reactive UI library that is similar to Svelte in the way it compiles away reactivity and updates the DOM directly, but it also incorporates a fine-grained reactivity system reminiscent of libraries like Marko, Knockout, and MobX.
Some would say SolidJS is “like Svelte++” given that SolidJS is compiled like Svelte is, with the added benefits of fine-grained reactivity. We do not necessarily share this view, but it might help formulating a mental model about SolidJS if there is already some familiarity with Svelte.
SolidJS is designed with performance as its primary focus. It uses a specific reactivity system, which means it can track dependencies at a granular level and only update the parts of the DOM that depend on changed state. This results in highly optimized updates that can outperform even the most performant virtual DOM libraries. In addition, like Svelte, SolidJS compiles components to highly efficient imperative code that updates the DOM directly.
SolidJS also champions the use of signals as a primitive for its reactivity that has taken the web community by so much of a storm that Angular is also adopting them, giving Angular a further performance boost and bringing Angular closer to SolidJS in terms of performance.
SolidJS’s performance is often compared favorably to that of other libraries and frameworks due to its fine-grained reactivity and compile-time optimizations. This makes SolidJS highly efficient and can result in better runtime performance compared to React, Vue, Angular, and even Svelte in some cases. Similarly, Tauri provides a lightweight and efficient runtime for any frontend library or framework. It uses a Rust backend and leverages the system’s webview for rendering the frontend. This approach results in a very small binary size and a low memory footprint, leading to quicker startup and, ultimately, better runtime performance.
SolidJS, also like Tauri, aims to be as minimal as possible, often resulting in smaller bundle sizes compared to React, Vue, and Angular, and similar sizes to Svelte. However, at scale, the need to add plugins for additional functionality could increase complexity.
Angular
Angular and Tauri form a robust combination for creating powerful apps. Together, they offer an interesting blend of features, each balancing the other’s strengths and weaknesses.
Angular, as a comprehensive framework, is known for its completeness in managing complex applications. It’s a type of swiss army knife in terms of UI capabilities. It employs a change detection mechanism and ahead-of-time (AOT) compilation, which optimizes apps by compiling components into highly efficient JavaScript code before the initial load. This enhances the performance of Angular by reducing the need for client-side compilation and minimizing the amount of JavaScript downloaded and parsed by the browser. However, Angular’s completeness can be a double-edged sword. While it performs excellently with complex and large-scale projects, it might be overkill for simpler use cases where a more lightweight library could suffice.
Tauri stands out for its focus on minimalism and efficiency. It uses Rust, a language known for its memory safety and performance, to interact with the operating system’s webview for rendering the user interface. The Tauri team has made conscious design choices to keep the binary sizes incredibly small and the memory footprint minimal. This leads to faster startup times, lower memory usage, and overall snappier performance compared to alternatives.
React
React and Tauri form an innovative blend for building lightweight, secure, and performant projects. React, the most popular JavaScript library for building user interfaces, has been developed and maintained by Meta. This combination can bring several benefits. It allows developers to harness the power of React for the frontend while Tauri facilitates a secure and efficient container for running the application as a desktop app on various operating systems.
React is renowned for its simplicity and component model, courtesy of its virtual DOM feature. In a typical web site, direct manipulation of the DOM is slow and often unsafe. React overcomes this bottleneck by introducing a virtual DOM. It creates an in-memory cache of the real DOM, computes the differences between the real DOM and the virtual DOM, and then efficiently updates the real DOM. This is different from Svelte, where there is no virtual DOM and Svelte merely transforms your Svelte code into highly efficient imperative code that directly manipulates the DOM.
React’s virtual DOM makes a difference where user interaction leads to frequent changes in the UI. However, for simple use cases or static pages, the virtual DOM may not offer any significant performance advantage. In fact, it might add unnecessary overhead.
Vue
Vue.js and Tauri bring together the best of both worlds, offering a compelling stack for creating performant, cross-platform apps. Vue.js, an approachable, versatile, and performant JavaScript framework, has gained immense popularity for building user interfaces. When combined, Vue.js and Tauri provide a unique blend of tools that allows developers to create robust and performant experiences that are both small and fast.
Vue.js is known for its high performance, primarily due to its lightweight design and efficient update strategy. Like React, Vue.js uses a virtual DOM to update components efficiently. However, Vue.js optimizes this process further by asynchronously batching updates. Vue.js automatically batches multiple changes to the same component in a single update cycle, reducing the overhead of rendering updates. Vue.js also uses a lazy evaluation strategy for computed properties, meaning that computed properties are only evaluated when a dependency has changed, further optimizing rendering performance.
In the context of adoptability, Vue.js is often considered easier to learn than both React and Angular due to its simpler syntax and more intuitive reactivity system. Angular, with its extensive feature set, has the steepest learning curve. Similarly to Vue.js, Tauri’s learning curve is relatively low for developers familiar with web technologies.
Qwik
Qwik and Tauri represent a novel combination for creating performant, secure, and lightweight apps. Qwik is a modern JavaScript framework optimized for maximizing First Contentful Paint speed by prioritizing above-the-fold content.
Qwik is designed with a unique approach to rendering called resumability. Instead of sending JavaScript to the client and then rendering, Qwik sends server-rendered HTML to clients, and then the clients “resume” where the server left off, becoming interactive if and when required in an incremental manner. This results in extremely fast initial rendering, as the browser can render the HTML immediately and then progressively enhance the experience as JavaScript loads.
Similarly, Tauri is built for efficiency. Utilizing a Rust backend and the system’s webview for rendering the frontend, it offers a small binary size and a low memory footprint. This results in quick startup and superior runtime performance.
Qwik’s unique approach to rendering can result in faster initial render times compared to React, Vue, Angular, Svelte, and SolidJS, as it sends HTML to the client first and then progressively enhances the application. However, as more of the page is interacted with, more JavaScript will be loaded, which could impact runtime performance. This can also result in a smaller initial bundle size compared to React, Vue, Angular, Svelte, and SolidJS, but the total size can increase as more parts are interacted with.
In fact, there is data showing that Qwik might be slightly more performant than SolidJS in terms of initial load, because Qwik loads a consistent ~1kB of data on initial load which is then progressively enhanced. This is unique among UI libraries. SolidJS, like other UI libraries, loads a larger initial bundle size which can then be cached and reused for subsequent loads. However, most applications load components over time, so a more appropriate apples-to-apples comparison could be a fully-loaded Qwik application vs. a fully-loaded SolidJS application being used over time. As far as we can tell, such a comparison has not been done yet.
Finally, Qwik introduces a new approach to rendering, though maintains syntax that is near-identical to React, which greatly lowers the learning curve for developers.
Trade-Offs
Now that we understand the various UI libraries and their interplay with Tauri, let’s examine some of the trade-offs involved in choosing which one to use, according to the parameters we all care about and should ideally consider when making such a decision.
Size and Complexity
Svelte’s innovative approach results in a smaller bundle size, which can significantly improve load times, particularly for more complex use cases. However, Svelte currently doesn’t have as robust an ecosystem as other, more established frameworks like Angular, React or Vue. For complex projects, this might mean having to write more functionality from scratch. Svelte as a language however is very easy to learn and has a very low learning curve, so this should be no problem.
SolidJS focuses on being minimal and lightweight. It offers a lean core and has a vast ecosystem for additional benefit, such as routing or state management. SolidJS also ships with a framework like others called SolidStart, that provides primitives for routing, data fetching, and more directly to SolidJS applications. This can be a great starting point for building applications. However, this can also lead to a larger bundle size, which can impact load times.
React is a library focused on building user interfaces, and it does an excellent job in this domain. However, for features like routing or state management, you’ll have to rely on additional libraries like React Router or Redux. This modularity gives you the freedom to pick only what you need, potentially keeping your bundle size small. But it also adds complexity as you need to ensure compatibility between different libraries.
Angular does the opposite, and gives a developer everything out of the box including powerful primitives for routing, state management, and more. However, sometimes this can lead to a larger bundle size, which can impact load times.
Vue.js is designed to be incrementally adoptable, which means you can use as much or as little of the framework as you need. For complex cases, you can use Vue Router for routing, Vuex for state management, and Vue CLI for tooling. However, each additional library adds to the overall size of the project.
Qwik’s focus on fast initial rendering leads to a minimal amount of JavaScript being sent to the client initially. However, as things become more interactive, more JavaScript will be loaded. This progressive enhancement can lead to a small initial size, but the total size can increase as more parts of the page are interacted with. Qwik also depends on serverful code splitting and infrastructure, so local-only desktop projects may be out of the question here.
Ultimately, these are the major trade-offs between these UI libraries. However, Tauri counterbalances any increase in size by packing the app into small, efficient binaries which are significantly smaller compared to alternative solutions. This makes bundle size a smaller factor, since binaries are downloaded once and then installed/executed locally.
Learning Curve and Development Experience
SolidJS’s API is similar to other UI libraries, which can make it easier for developers coming from React, Vue, or Svelte. However, SolidJS’s fine-grained reactivity system introduces new concepts that can take time to understand fully and come with a few small footguns exclusive to SolidJS’s reactivity primitives (signals). This can make it more difficult to learn than React, Vue, or Svelte for the uninitiated. However, the SolidJS documentation makes these footguns abundantly clear, and the SolidJS community is very helpful and responsive.
Svelte is designed to be easy to learn, with a simple and intuitive syntax that integrates well with standard JavaScript. It removes the need for a virtual DOM, which can simplify the mental model for developers.
Vue.js is known for its simplicity and ease of use. It provides a gentle learning curve, making it an excellent choice for developers new to frontend development. The syntax is straightforward, and the single file components make it easy to understand the structure of Vue.js projects.
React is known for its component-based architecture and the unidirectional data flow, which make it predictable and easy to understand. JSX, an HTML-like syntax used by React, allows for clear and concise code. However, mastering React’s concepts and ecosystem of libraries can take time.
Qwik introduces a new approach to rendering, which can require a shift in thinking for developers accustomed to traditional JavaScript frameworks. However, its API is designed to be simple and intuitive and as close to React as possible. This makes it easy to learn for developers coming from React.
Tauri is relatively straightforward to set up and integrate with JavaScript applications, but it requires some familiarity with Rust and Node.js tooling. It also might have fewer resources available for learning and troubleshooting compared to more mature projects. However, its setup and configuration are straightforward, making it easier to integrate with existing projects regardless of UI library.
Security
One of Tauri’s main security features is its ability to prevent remote code execution. It restricts the actions that the frontend can perform on the backend, adding an additional layer of security. It achieves this by isolating the frontend from the backend with a permission layer, ensuring that only safelisted commands can be executed.
This security feature is crucial when paired with the mentioned UI libraries. While these libraries offer various levels of built-in security mechanisms, they generally operate in a web context, which could potentially expose them to common web security vulnerabilities such as cross-site scripting (XSS) and cross-site request forgery (CSRF). Tauri helps mitigate these risks by isolating the app in its own window, separate from the user’s regular browser environment. This isolation technique effectively puts up a barrier against potential security threats originating from the web.
In addition, it also reduces the attack surface by eliminating the use of Node.js in the runtime. This results in a more secure environment for your applications, regardless of the UI library you choose to use.
At CrabNebula, we are experts (and authors) of Tauri particularly around security. If you’re interested in getting help, feel free to reach out to us.
Cross-Platform Compatibility
Tauri provides a unique capability for a wide range of JavaScript-based libraries and frameworks, enabling them to be packaged as desktop applications for Windows, MacOS, and Linux. This includes libraries and frameworks like SolidJS, Svelte, Vue.js, React, Angular, and Qwik, which are inherently portable across platforms due to their web-based nature.
However, when using it, there might be slight differences in behavior and appearance between different operating systems. This is because Tauri uses the system’s webview for rendering the frontend. Despite these potential differences, it offers a balanced approach to building desktop applications by complementing the strengths of these libraries and frameworks.
For instance, the sophistication of React’s user interfaces pairs well with Tauri’s focus on performance and security. Angular’s rich feature set also complements its emphasis on efficiency and security.
In Summary
Having explored the synergy between Tauri and a range of frontend frameworks and libraries such as Angular, React, Vue.js, Svelte, SolidJS, and Qwik for building desktop applications, here is an integrated summary of the discussions:
Each combination brings unique advantages and considerations, with performance varying based on the library or framework in use. Tauri consistently enhances these combinations by providing a lightweight and efficient runtime, leading to smaller binary sizes and faster startup times compared to other solutions.
Angular and Tauri form a robust combination, leveraging Angular’s comprehensive feature set and Tauri’s minimalistic approach. However, the complexity of Angular might be unnecessary for simpler applications.
In combination with React, it capitalizes on React’s virtual DOM and Tauri’s focus on minimalism and efficiency, resulting in performant applications. Yet, for more complex applications, additional libraries may be needed due to React’s library-centric nature.
Vue.js offers a balanced approach to building desktop applications. Vue.js’s incremental adoptability and lighter footprint make it an attractive choice, particularly when combined with Tauri’s lean runtime.
Svelte provides a compelling toolkit for developers, shifting work from the browser to the build step for performance benefits. However, Svelte’s smaller ecosystem and community might pose challenges.
SolidJS’ focus on fine-grained reactivity and compile-time optimization offers a modern, lean, and efficient stack for building desktop applications. This is arguably the best UI library for Tauri applications.
Conclusion
Tauri provides a robust, secure, and efficient platform for transforming applications built with a variety of frontend frameworks and libraries into lightweight desktop, and soon mobile applications. Whether you’re using Angular, React, Vue.js, Svelte, SolidJS, or Qwik, it can and does enhance the capabilities of these technologies, allowing for the creation of performant, secure, and platform-independent applications.
Each combination of Tauri with a frontend technology offers unique advantages and trade-offs, and the choice between them should depend on the specific requirements of the project, including factors like application complexity, the learning curve of the technology, security needs, and cross-platform compatibility.
Ultimately, it’s clear that Tauri, with its focus on performance, security, and efficiency, has the potential to radically improve the way we build desktop applications with web technologies. Its ability to interface seamlessly with a multitude of frontend frameworks and libraries makes it a versatile and valuable tool in the modern web development landscape.
We’re the team that creates it. If you’re interested in using Tauri for a new project, or getting our expertise on an existing one, please do not hesitate to reach out to us immediately
Author: Tejas Kumar, Director of Developer Relations
Top comments (0)