4 min read
Frontend
Comparison of Svelte and other JS frameworks - Irregular Svelte series-01
This summary was generated by AI. Please refer to the article for accurate details.
Read the summary
Svelte lets you write less code by eliminating the need for a virtual DOM. Unlike React and Vue, which rely on virtual DOMs to update the user interface, Svelte compiles code directly into efficient JavaScript at build time. This means less runtime overhead and fewer lines of code for common tasks. We tested fetching and looping in all three frameworks. Svelte’s built-in await and block syntax lets you write this logic in a single, clean block. React requires more lines, often using useState and useEffect in separate pieces. Vue.js feels similar to React, with a smooth flow but still needing more boilerplate. Reactivity is central to modern apps. In Svelte, you add $: before a line to make it reactive—any changes in dependent values trigger updates automatically. Without $:, the code won’t run even if values change. React uses useState for the same purpose, and Vue uses reactive, but Svelte’s syntax is simpler and more intuitive once you get used to it. For passing props, all three frameworks use similar patterns. You import a child component and pass a value. The syntax is easy to understand and consistent across them. This shows that while each has its own style, the core concepts are accessible to developers of any background. The key takeaway is that Svelte focuses on writing less code. In real-world examples, it reduced code by up to 40% compared to React and Vue. This makes it faster to build, easier to maintain, and more readable. For new developers, Svelte is a fun and efficient choice.
Hello (or good evening), let’s start. This is the first part of our irregular Svelte series.
Last time, I roughly described the process to get SvelteKit running. (It has been updated to fit SvelteKit's major update, so please read it.)
This time, I will compare the characteristics of Svelte, which is based on the concept of "Write less code," with other JS frameworks.
Svelte / React / Vue.js
Although React and Vue.js uses virtual DOMs and Svelte does not use DOMs, they are often compared to each other, and we will do that here. *I will use Svelte (v3) / React (v18) / Vue.js (v3).
Fetching & looping
Fetching and looping are often written in sets, so let’s write them together and compare them.
Svelte
Let's start with Svelte. Svelte has its own await/block syntax, that can be written neatly.
<script>
const fetchItems = async function() {
const items = await fetch('URL');
return await items.json();
}
</script>
{#await fetchItems()}
<p>Loading</p>
{:then items}
{#each items as item}
<p>{item.name}</p>
{/each}
{:catch error}
<p>{error.message}</p>
{/await}
React
There are more lines of code compared to Svelte. However, it is usually split up and is almost never left like this. In the beginning, useState is used in the definition. Perhaps this is what is typical of React.
function FetchComponent() {
const [error, setError] = useState(null)
const [isLoaded, setIsLoaded] = useState(false)
const [items, setItems] = useState([])
useEffect(() => {
fetch('URL')
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result)
},
(error) => {
setIsLoaded(true);
setError(error)
}
)
}, [])
if (!isLoaded) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.id}>
{item.name}
</li>
))}
</ul>
);
}
}
Vue.js
Writing with React feels similar to writing with Vue 3 and 2.
<script setup>
import { ref } from 'vue'
const items = ref(null)
const error = ref(null)
fetch('URL')
.then((res) => res.json())
.then((json) => (items.value = json))
.catch((err) => (error.value = err))
</script>
<template>
<div v-if="error">{{ error.message }}</div>
<div v-else-if="items">
<ul v-for="(item,index) in items">
<li>Number:{{index+1}} Name:{{item.name}}</li>
</ul>
</div>
<div v-else>Loading</div>
</template>
Reactive
This is an essential mechanism in modern frontend applications where components are reused.
Svelte
In Svelte, preface with $: to make the code reactive.
If you do not add $:, it will not be executed even if you change dependent values.
If you are used to other frameworks, you may be confused at first, but once you use it, you'll be impressed by how clear it is.
$: foo = false
React
Without getting into details, you generally use useState to define in React. Comparing it to Svelte, useState has the same role as $:.
import {useState} from 'react'
const [foo] = useState(false)
Vue.js
When using Vue, it changes when you generate with reactive.
<script setup>
import { reactive, computed } from 'vue'
const state = reactive({
count: 0
})
const increment = () => {
state.count++
}
</script>
About props
I will now compare by passing a basic string. They all seemed different, but they have almost the same writing style.
Svelte
<script>
export let name
</script>
<p>Hello, I'm :{name}</p>
<script>
import ChildComponent from './ChildComponent.svelte'
</script>
<ChildComponent name="Svelte" />
React
const ChildComponent = (props) => {
return <h1>Hello, I'm :{props.name}</h1>;
}
export default ChildComponent;
import ChildComponent from './ChildComponent.jsx'
function App() {
return (
<ChildComponent name="React" />
);
}
export default App
Vue.js
<template>
<p>Hello, I'm {{name}}</p>
</template>
export default {
props: {
name: String,
}
}
<script>
import ChildComponent from './ChildComponent.vue'
</script>
<template>
<ChildComponent name="Vue" />
</template>
Import the child component and pass the value. All of them were easy to understand.
General comments
This was a short comparison of Svelte, React, and Vue.js. What do you think?
Each one has its own merits, Svelte's focusing on "Write less code." You will notice that it is remarkably accessible.
Have a good Svelte life.
And if you are new to it, please write with Svelte, it is a very fun framework.
関連記事 | Related Posts
We are hiring!
シニア/フロントエンドエンジニア(React/Typescript）／KINTO中古車開発G／東京・大阪・福岡
KINTO開発部KINTO中古車開発グループについて◉KINTO開発部 ：66名 KINTO中古車開発G：9名★ KINTOプロダクトマネジメントG：3名 KINTOバックエンド開発G：16名 契約管理開発G ：9名 KINTO開発推進G：8名 KINTOフロントエンド開発G：...
【バックエンドエンジニア】my route開発G／東京
my routeについてmy routeの概要 my routeは、移動需要を創出するために「魅力ある地域情報の発信」、「最適な移動手段の提案」、「交通機関や施設利用のスムーズな予約・決済」をワンストップで提供する、スマートフォン向けマルチモーダルモビリティサービスです。
Follow Us
KINTOテクノロジーズの最新情報をSNSで発信中！イベント・テックブログ更新情報もお届けします。