Добро пожаловать в учебник по Svelte. Здесь вы узнаете, что создавать лёгкие и быстрые web-приложения совершенно не сложно.
Вы также можете обращаться к документации API и к примерам, или — если вам не терпится начать прямо сейчас — Быстрый старт за 60 секунд.
Что такое Svelte?
Svelte — это инструмент для создания быстрых web-приложений.
Он похож на такие JavaScript фреймворки, как React и Vue, которые преследуют общую цель — облегчить создание удобных интерактивных пользовательских интерфейсов.
Но есть существенное отличие: Svelte преобразует ваше приложение в идеальный JavaScript во время сборки, а не интерпретирует код приложения в своей среде выполнения. Это означает, что вы не платите производительностью за абстракции фреймворка и меньше ждёте при первой загрузке приложения.
С помощью Svelte можно собрать приложение целиком или постепенно добавить его в существующий проект. Также можно создавать компоненты в виде автономных пакетов, которые могут работать где угодно, не требуя лишних зависимостей, в отличие от обычных фреймворков.
Как пользоваться учебником
Вам нужно иметь базовые знания HTML, CSS и JavaScript, чтобы понять Svelte.
По мере прохождения учебника вам будут показаны мини-упражнения, призванные проиллюстрировать новые функции. Более поздние главы основаны на знаниях, полученных ранее, поэтому рекомендуется изучать Svelte по порядку глав. При необходимости, можно перейти в любой раздел учебника, кликнув по заголовку ('Введение / Основы').
В каждой главе учебника будет кнопка 'Покажи мне', которую можно нажать, если при выполнении задания у вас возникли трудности. Постарайтесь использовать её как можно реже. Вы будете учиться быстрее, если поймёте, куда должен быть вставлен тот или иной блок кода и собственноручно напечатаете его в редакторе.
Понимание компонентов
В Svelte приложение состоит из одного или нескольких компонентов. Компонент — это многократно используемый автономный блок кода, который изолирует разметку, стили и поведение, которые связаны друг с другом и записаны в единый файл .svelte. Посмотрите на пример 'Привет, мир!' в редакторе кода — так выглядит простейший компонент.