What is Svelte.js and How does it Compare to Other JavaScript Frameworks?
JavaScript frameworks have become more and more popular in the last few years. There are many options to choose from, but what are the differences among the major players?
Introduction
Svelte.js is a javascript framework that can be used to speed up the development process and make it more efficient. Originally, this framework was created so developers could create apps with fewer errors and use less code.
Svelte.js vs React vs Vue
Svelte.js is a lightweight JavaScript framework that compiles efficient, single-use components. It has been designed with the goal of making web development more productive and enjoyable by focusing on a modern workflow without compromising performance.
React is an open-source library for building user interfaces developed by Facebook. It is most commonly used as the view layer in MVC applications, but it can also be used as a standalone library for other purposes.
Vue is a progressive framework for building user interfaces that provide data-driven reactivity, composable components & directives with an easy-to-use API, and optimized performance.
Let’s compare their code base by creating a simple todo app:
React js
import { useEffect, useRef, useState } from 'react';
import './App.css';function App() {// State
const [todos, setTodos] = useState([]);// Binding
const todoText = useRef();// Side Effects / Lifecycle
useEffect(() => {
const existingTodos = localStorage.getItem('todos');
setTodos(existingTodos ? JSON.parse(existingTodos) : []);
}, []);// Events
function addTodo(event) {
event.preventDefault();
const next = [...todos, todoText.current.value];
setTodos(next);
localStorage.setItem('todos', JSON.stringify(next));
}return (
<div>
<ul>
{todos.map(todo => (<li key={todo}>{todo}</li>))}
</ul> <form onSubmit={addTodo}>
<input type="text" placeholder="What needs to be done?" ref={todoText} />
<input type="submit" value="Add Todo" />
</form></div>
);
}export default App;
Vue js
<template>
<div>
<ul>
<li v-for="todo in todos" v-bind:key="todo">{{ todo }}</li>
</ul> <form v-on:submit.prevent="addTodo">
<input v-model="todoText" placeholder="What needs to be done?">
<button type="submit">Add Todo</button>
</form>
</div>
</template><script>
export default {
name: "HelloWorld",
data() {
return {
todos: [],
todoText: '',
};
},
methods: {
addTodo() {
this.todos = [...this.todos, this.todoText];
localStorage.setItem('todos', JSON.stringify(this.todos));
},
},
mounted() {
const existingTodos = localStorage.getItem('todos');
this.todos = JSON.parse(existingTodos) || [];
}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Svlete js
<script>
import { onMount } from 'svelte'; let todos = [];
let todoText = ''; onMount(() => {
const existingTodos = localStorage.getItem('todos');
todos = JSON.parse(existingTodos) || [];
}); function addTodo() {
todos = [...todos, todoText];
localStorage.setItem('todos', JSON.stringify(todos));
}</script><main> <ul>
{#each todos as todo}
<li>{todo}</li>
{/each}
</ul> <form on:submit|preventDefault={addTodo}>
<input bind:value={todoText} placeholder="What needs to be done?">
<input type="submit" value="Add todo">
</form></main>
Is Svelte worth it?
If you want to create an application that loads fast and works well on low-end devices, or if you want to create an application that is easy to maintain and understand and has great performance then Svelte is the right choice for you.
Thank you.
