Что такое Svelte.js и чем он отличается от других фреймворков JavaScript?

В последние несколько лет фреймворки JavaScript становятся все более популярными. Есть много вариантов на выбор, но каковы различия между основными игроками?

Введение

Svelte.js — это фреймворк javascript, который можно использовать для ускорения процесса разработки и повышения его эффективности. Изначально этот фреймворк был создан для того, чтобы разработчики могли создавать приложения с меньшим количеством ошибок и использовать меньше кода.

Svelte.js против React против Vue

Svelte.js — это облегченная среда JavaScript, которая компилирует эффективные одноразовые компоненты. Он был разработан с целью сделать веб-разработку более продуктивной и приятной, сосредоточив внимание на современном рабочем процессе без ущерба для производительности.

React — это библиотека с открытым исходным кодом для создания пользовательских интерфейсов, разработанная Facebook. Чаще всего он используется в качестве уровня представления в приложениях MVC, но его также можно использовать как отдельную библиотеку для других целей.

Vue — это прогрессивная платформа для создания пользовательских интерфейсов, обеспечивающая реактивность на основе данных, компонуемые компоненты и директивы с простым в использовании API и оптимизированной производительностью.

Давайте сравним их кодовую базу, создав простое приложение todo:

Реагировать на 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;

Вью 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>

Стоит ли Свелте того?

Если вы хотите создать приложение, которое быстро загружается и хорошо работает на недорогих устройствах, или если вы хотите создать приложение, которое легко поддерживать и понимать, а также оно обладает высокой производительностью, то Svelte — правильный выбор для вас.

Спасибо.