KINTO Tech Blog
Development

Comparison of Svelte and other JS frameworks - Irregular Svelte series-01

Cover Image for Comparison of Svelte and other JS frameworks - Irregular Svelte series-01

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.

Fetch on Svelte
<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.

Fetch on 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.

Fetch on Vue
<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.

Reactive on Svelte
$: 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 $:.

Reactive on React
import {useState} from 'react'
const [foo] = useState(false)

Vue.js

When using Vue, it changes when you generate with reactive.

Reactive on Vue
<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

ChildComponent.svelte
<script>
  export let name
</script>

<p>Hello, I'm :{name}</p>
ParentComponent.svelte
<script>
import ChildComponent from './ChildComponent.svelte'
</script>

<ChildComponent name="Svelte" />

React

ChildComponent.jsx
const ChildComponent = (props) => {
  return <h1>Hello, I'm :{props.name}</h1>;
}
export default ChildComponent;
ParentComponent.jsx
import ChildComponent from './ChildComponent.jsx'

function App() {
  return (
    <ChildComponent name="React" />
  );
}

export default App

Vue.js

ChildComponent.vue

<template>
	<p>Hello, I'm {{name}}</p>
</template>

export default {
  props: {
    name: String,
  }
}
ParentComponent.vue

<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.

Facebook

関連記事 | Related Posts

We are hiring!

【フロントエンドエンジニア(コンテンツ開発)】新車サブスク開発G/東京

新車サブスク開発グループについてTOYOTAのクルマのサブスクリプションサービスである『 KINTO ONE 』のWebサイトの開発、運用をしています。​業務内容トヨタグループの金融、モビリティサービスの内製開発組織である同社にて、自社サービスである、クルマのサブスクリプションサービス『KINTO ONE』のWebサイトコンテンツの開発・運用業務を担っていただきます。

【フロントエンドエンジニア】新車サブスク開発G/東京

新車サブスク開発グループについてTOYOTAのクルマのサブスクリプションサービスである『 KINTO ONE 』のWebサイトの開発、運用をしています。​業務内容トヨタグループの金融、モビリティサービスの内製開発組織である同社にて、自社サービスである、TOYOTAのクルマのサブスクリプションサービス『KINTO ONE』のWebサイトの開発、運用を行っていただきます。