Written by Eze Sunday✏️

There’ll always be a new, latest-and-greatest framework for building applications, but before deciding to jump to any new framework, first determine if it’s the right one for your project and ultimately worth the switch.

In today’s article, we’ll compare React Native with the new kid on the block, Svelte Native.

First, let’s learn about both and what they offer.

What is Svelte Native?

Svelte Native is based on Svelte, and it allows Svelte developers to build native Android and iOS applications. It was initially released in November 2021 by Rich Harris, the Creator of Rollup, the popular JavaScript module bundler.

Why use Svelte Native?

Don’t we already have enough JavaScript libraries and frameworks? Why use another? Well, Svelte was built to be slick, interactive, simple, and efficient. Svelte is the opposite of the frameworks you already know and love, you’ll find out more about it further in this article.

Svelte Native is a combination of the goodness of both Native Script and Svelte.

According to the Svelte Native website, it’s a “mobile application framework powered by Svelte that enables you to build mobile apps using the web framework you already know.”

What is React Native?

React Native is a React-based cross-platform mobile app development framework that allows you to build native Android and iOS applications. It is one of the top mobile app development frameworks, designed and developed by Facebook for its internal development. However, it was made an open-source project in 2015.

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

Before React Native, devs used hybrid mobile applications that were built with web technologies like HTML, CSS, and JavaScript. Even though they could access native APIs, the UI mostly leveraged your mobile device web views.

This caused many problems in performance, speed, and app store crack-down. Enter React Native, which allows JavaScript code to talk to native code using a bridge, making apps faster and more performant. You’ll see more details about this in the next section of this article.

So, if both Svelte and React Native accomplish the same tasks, what makes them different? I’ll get into that. First, I’ll explain the internal working of both of them. Let’s start with React Native.

How React Native works

React Native creates a native bridge between the app and the target device — Android/iOS — that allows the JavaScript code to talk to the native code and vice versa. It does this by creating three threads that interpret your JavaScript code at different levels: a UI thread, a shadow thread, and a JavaScript thread.

The UI thread in React Native

This runs your app and is the only thread that has access to your UI. So, it can spin up new or even update your UI.

Shadow thread

This calculates the UI layouts you created with React and sends them to the native code in the UI thread. React Native leverages Yoga to convert the JavaScript UI code to a layout system that the host platform understands.

JavaScript thread

The JavaScript thread handles your JavaScript UI layouts and sends them to the shadow thread for calculation, consequently sending them to the UI thread.

React Native’s design comes with some challenges, however. For applications with several animations where many frames stack up on the UI per second, performance can be an issue. The React Native team has been working on Fabrics to address this issue, as it will allow your React Native code to talk to your device native code directly.

Eventually, this will eliminate the bottlenecks that come with using React Native bridge. You can learn more about React Native bridge and how React Native works in this presentation by Emil Sjölander.

Now, let’s cover Svelte Native.

Working with Svelte Native

Svelte Native leverages NativeScript, which allows you to develop native apps with JavaScript and gives the JavaScript code access to the device native code directly. It has no wrapper, meaning you can access all supported device APIs.

Svelte Native vs. React Native

JSX support in React Native

JSX is a JavaScript syntax that allows you to write HTML and JavaScript together. React Native supports JSX, as every React developer switching to React Native is already familiar with JSX.

However, Svelte doesn’t support JSX. Svelte Native allows you to write view components as HTML that map directly to the device’s native view components.

Two-way data binding

Two-way data binding allows different components’ data to be updated in real-time because of the change in data from another component. Svelte allows you to bind data using a bind:value directive in your HTML and/or component.

<script>
  let name = 'Eze';
</script>
<input bind:value={name}>
<h1>Hello {name}!</h1>

But, React Native does not have this feature. You can, however, always set the value and change handler to achieve two-way data binding with React as shown in the piece of code below:

import React, { useState } from 'react';
function App() {
  const [value, setValue] = useState("");
  const changeEventHandler = (e) => {
    setValue(e.currentTarget.value);
  };
  return (
    <>
    <p>Hello {value}</p>
      <input onChange={changeEventHandler}  value={value} />
    </>
  );
}
export default App;

Platform-dependent code

When I write Svelte Native code myself, I’ve noticed that I wrote more Svelte code than I do JavaScript. Of course, that’s because Svelte considers itself its own web framework rather than a JavaScript framework, unlike React, even though most of the syntax consists of more vanilla HTML and JavaScript.

For example, a loop in React will look like this:

import React from 'react';
function App() {
  const numbers = [1,2,3,4,5,6];
  return (
    <>
    {numbers.map((num)=><p>num</p>)}
    </>
  );
}
export default App;

It’s essentially the same code you’ll write in vanilla JS. But in Svelte, it’s different — you’ll have to learn new ways to write a loop. The loop uses template tags that look like mustache syntax:

<script>
  let numbers = [1,2,3,4,5];
</script>

<div>
  {#each numbers as num }
    <p>{num}</p>
  {/each}
</div>

It’s so simple! But it’s not pure JavaScript, so as long as you don’t intend to re-use this code in another project, you’re good to go.

Community adoption for Svelte Native and React Native

React Native has a vast community compared to Svelte Native. At the time of writing, React Native had over 100k stars on GitHub, while NativeScript, which powers Svelte Native, had 20k+ stars.

It will be easier for developers to find help when working with React Native than with Svelte Native if they run into errors, as there are likely many developers who’ve had the same issues and shared their solutions.

Learning curve and speed of development

React Native has a steep learning curve compared to Svelte Native. Any developer who knows JavaScript can start working with Svelte Native today, as the syntax is simple, short, and easy to understand.

React Native requires knowledge of React, which is not as easy to jump into immediately, as you’ll need to understand how JSX works and how lifecycle hooks works.

Development speed will largely depend on the developer and how well they know how to use the tool — React or Svelte. What if you want to transition from using React Native to Svelte Native? It won’t be as difficult to transition from a React Native developer to a Svelte Native-focused developer, but if you’re switching from Svelte Native to React Native, it may take more time to learn.

React Native vs. Svelte Native setup

Setting up React Native for development highly depends on the tool you are using. It's more challenging to set up React Native if you are using React Native CLI, as you’ll need to set up Xcode or Android SDK to compile and run an emulator. However, using Expo can simplify the setup process because it compiles your code in real-time. You can also easily see the changes in the Expo test app.

For Svelte Native, you will need to set up the Android SDK to run NativeScript because there is currently no tool that allows you to test like Expo does for React Native. Developers used to use the Preview app for testing, but it’s deprecated and no longer maintained. Hopefully, there will be one in the future.

Conclusion

Both mobile app development frameworks are amazing. As always, there is no right answer for which is best for you. If you plan to start a new mobile app project and you’re familiar with JavaScript and want to build quickly, start with Svelte Native.

However, if you are a React developer, you may prefer building with React Native, as it is best suited for React stacks. One last note: Svelte Native is still in beta as of the time of writing, expect some limitations and continuous improvement as time goes on. Thanks for reading!

LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.

Start proactively monitoring your React Native apps — try LogRocket for free.