Приклад проекту на Svelte

Коли ти шукаєш роботу на позицію Front End то треба знати щось з популярного React, Angular, Vue, а краще розбиратись в одному, а інші хоч поверхнево знати, принаймні такої стратегії притримувався б сам

Та я займаюсь серверною розробкою і тому можу дома гратись з різними JavaScript каркасами і коли на одному код стає занадто заплутаним переносити на інший каркас і в процесі рефакторити

Проект «карта вакансій» з самого початку була на чистому JS, потім на jQuery + TypeScript, зараз React + TypeScript і ось переношу на Svelte + TypeScript GitHub

React мені подобається, і якщо десь на нього нарікав то лише тому що мало досвіду, робив без Redux-а бо на мою думку він ускладнює код, сподобалась підтримка TypeScript + JSX = .tsx, з нею набагато зрозуміліше встановлювати в інтерфесі props + state які очікує компонент

Замість Redux використовував свій об’єкт Container в якому можна було підписатись на подію зміни фільтра одного компонента і викликати setState вже в іншому, так це антипатерн, код став заплутаним і перестав приносити задоволення при його зміні, переписувати було мало бажання, а ось спробувати щось нове саме те

Де я вперше почув про Svelte складно сказати, принаймні в останньому Front-end дайджесті жодної згадки про нього, лише в коментарях

Подивившись пару уроків, побачивши що зрозумілий, почав переносити на Svelte, перше розчарування, що в середені *.svelte файлів відсутня можливість писати в форматі TypeScript, підключати *.ts файли можна, а ось вказати тип вже ні

В цілому Svelte має гарну документацію, в основному викристовував svelte.dev/examples, значно лаконічніший ніж React, для мене показово як виглядають приклади «Click counter»:
React

import React, {useState} from "react";

function Example() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
    }

    return (
        <div>
            <p>{count}</p>
            <button onClick={handleClick}>Click me</button>
        </div>
    );
}

Svelte

<script>
    let count = 0;

    function handleClick() {
        count += 1;
    }
</script>

<div>
    <p>{count}</p>
    <button on:click={handleClick}>Click me</button>
</div>

То що, хто буде починати домашні проекти на Svelte?

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті