И как Svelte помогает мне экономить время и деньги при создании веб-сайтов.

Большинство людей, желающих создать блог или веб-сайт, думают, что им нужно использовать такие платформы, как WordPress, чтобы добиться успеха. Правда в том, что, хотя многие из этих платформ могут поднять ваш сайт с нуля, ими чрезвычайно сложно управлять и оптимизировать их для SEO.

Предполагая, что у вас есть базовый опыт кодирования, использование облегченных фреймворков, таких как Svelte и SvelteKit, может помочь вам создать отличный веб-сайт, который прост в обслуживании, расширяем и оптимизирован для SEO. Давайте погрузимся и узнаем о Svelte.

Что такое Svelte и SvelteKit?

Svelte позволяет вам писать простые веб-приложения без большого объема, обычно связанного с фреймворками JavaScript. Основное различие между React и Svelte заключается в том, что Svelte не использует виртуальный DOM, что делает его более эффективным. Svelte компилирует ваши компоненты во время сборки, а не в браузере, создавая статический HTML, CSS и Javascript.

SvelteKit — это следующий шаг в эволюции фреймворка Svelte. Тесное согласование с веб-стандартами делает реальностью создание действительно универсальных приложений. SvelteKit также предлагает несколько функций, которые делают его уникальным среди других фреймворков, таких как интуитивно понятный API и подход к разработке компонентов. Кроме того, SvelteKit позволяет экспортировать ваше приложение для нескольких платформ, таких как Netlify и Vercel.

Почему я решил строить с помощью SvelteKit

При создании веб-сайта можно использовать множество различных фреймворков. Я решил создавать свои веб-сайты с помощью Svelte и SvelteKit, потому что мне нужен быстрый, легкий и простой в использовании фреймворк. С помощью Svelte я могу быстро и легко создавать свои веб-сайты без необходимости заниматься обычной конфигурацией и головными болями с базами данных.

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

Недавно я создал блог для инженеров-программистов, чтобы узнать, как обучение программным навыкам может улучшить их карьеру, под названием MoreThanCoders. Благодаря этому опыту я отточил свои навыки работы со Svelte и оценил фреймворк. Вот мои основные выводы из сборки с использованием Svelte и SvelteKit.

Svelte прост в создании, развертывании и обслуживании

Простота означает, что мои веб-сайты легче поддерживать в долгосрочной перспективе. Svelte предоставляет краткий способ написания компонентов, который в целом приводит к меньшему количеству кода. Вот пример простого компонента изображения, который при необходимости включает атрибуцию:

<script>
    export let image_location;
    export let image_alt;
    export let has_attribution;
    export let attribution_name;
    export let attribution_link;
    export let credit_link;
</script>
<img src={image_location} alt={image_alt} />
{#if has_attribution}
    <div class="attribution">
        Photo by <a href={attribution_link}>{attribution_name}</a> on <a href={credit_link}>Unsplash</a>
    </div>
{/if}

Этот простой компонент означает, что я могу иметь согласованные изображения во всем моем приложении, оптимизированные для SEO, не просматривая каждую статью для их обновления. Поскольку это компонент, я могу назвать его в своей статье следующим образом:

<Image
    image_location={image_1}
    image_alt="A man running through an empty airplane terminal."
    has_attribution={true}
    attribution_name="James Dean"
    attribution_link="https://morethancoders.com"
    credit_link="https://morethancoders.com/credit"
/>

А поскольку эти компоненты созданы с использованием Javascript, вы можете быстро развернуть код без настройки серверов, как это необходимо для таких инструментов, как WordPress.

SvelteKit обеспечивает достаточную структуру

SvelteKit обеспечивает достаточную структуру, чтобы быть полезным, но не перегруженным. Поскольку он удобен для пользователя и не слишком сложен, с ним проще работать по сравнению с такими фреймворками, как React и Vue.

Кроме того, поскольку это полноценная платформа приложений, в ней используются лучшие отраслевые практики, такие как рендеринг на стороне сервера (SSR) и разделение кода. Эти рекомендации помогают разработчикам сосредоточиться на создании отличных приложений, а не на настройке сред.

Svelte и SvelteKit оптимизированы для SEO

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

Поскольку Svelte создавался как легкий, сборка приводит к гораздо меньшим пакетам и меньшему количеству HTTP-запросов. Ограничение количества запросов имеет решающее значение для SEO. SvelteKit делает еще один шаг вперед и предоставляет полную цепочку инструментов для сборки, которая упрощает создание приложений, готовых к SSR, с отличными свойствами SEO.

У меня также больше контроля над структурой HTML. WordPress печально известен наличием тысяч строк кода и вставок повсюду, если только он не сильно отредактирован. Увеличение размера файла и включение бесчисленного количества скриптов через плагины негативно влияет на SEO.

Инструменты для разработки веб-сайтов с помощью Svelte

Существует множество инструментов, которые помогут вам изучить Svelte и создавать высококачественные приложения. Поскольку Svelte использует пакеты и может использовать преимущества NPM/Yarn, существует множество пакетов, которые помогут вам ускорить разработку.

Документация SvelteKit

Документация Svelte и SvelteKit — это фантастические инструменты, которые помогут вам создать свое первое приложение Svelte. Они содержат четкие и лаконичные примеры, которые помогут вам в процессе создания вашего первого приложения. Я настоятельно рекомендую прочитать оба комплекта документации, прежде чем приступить к работе.

REPL и примеры

Svelte и SvelteKit REPL и примеры — отличные инструменты для начала создания приложения Svelte. С помощью REPL вы можете оценивать выражения, вставлять и удалять код и видеть результаты изменений вашего кода в режиме реального времени. Примеры служат отправной точкой для вашего приложения и показывают, как вы можете реализовать различные функции.

Тонкие кнопки «Поделиться»

Компонент svelte-share-buttons-component — это простой компонент для добавления социальных сетей на любую стройную страницу. Этот компонент предоставляет простой способ сделать ваш блог или веб-сайт общедоступным без использования тяжелой сторонней библиотеки. Этот компонент представляет собой решения HTML и CSS, а не javascript.

Карта сайта Svelte

Пакет Svelte Sitemap Generator сканирует ваше приложение svelte для создания карты сайта, которая может помочь поисковым платформам, таким как Google, сканировать и индексировать ваш сайт. Этот генератор карты сайта является отличным примером того, как Svelte и SvelteKit обеспечивают достаточную структуру и поддержку, не будучи громоздкими.

Plop.js

Большинство фреймворков не предоставляют решения для создания или добавления файлов. В этой пустоте и появляется Plop.js. Plop.js генерирует файлы и добавляет содержимое с помощью командной строки.

Я использую Plop.js для создания новых статей для своего блога. Я ввожу основную информацию через командную строку, а Plop.js создает новый файл статьи на основе шаблона, обновляет хранилище данных и добавляет все необходимые папки для изображений. Это значительно экономит время и не дает мне совершать ошибки.

Svelte позволяет создавать высококачественные веб-приложения

Создание веб-приложений с помощью Svelte и SvelteKit — отличный способ создавать веб-сайты, которые, как вы знаете, могут привлекать трафик. Выбирая сборку с помощью Svelte, вы выбираете простую и удобную в использовании структуру, которая сделает вашу жизнь как разработчика намного более управляемой.

Не говоря уже о том, что Svelte также оптимизирован для SEO, а это означает, что ваши веб-приложения будут более заметны для поисковых систем. С таким количеством замечательных функций неудивительно, что все больше и больше разработчиков предпочитают использовать Svelte.

Want to Connect?
If you are interested in learning more or reaching out, you can connect with me on LinkedIn.