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

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

Ещё у него довольно приятный синтаксис, поэтому разобраться с ним не составит труда.

Рекомендуем пару ресурсов для ознакомления с фреймворком:
— Учебник от создателей на русском: https://ru.svelte.dev/tutorial/
— И учебник от поклонников Svelte на английском: https://www.freecodecamp.org/news/the-svelte-handbook/

#фронтенд #svelte

​Учимся пользоваться Svelte

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

Автор этой серии статей знакомит всех желающих со Svelte и просто и понятно рассказывает, как работают различные функции этого фреймворка:

Часть 1 — https://tprg.ru/HdV7
Часть 2 — https://tprg.ru/s7xu
Часть 3 — https://tprg.ru/wk7q

#фронтенд #svelte

Svelte для разработчиков React

Статья-обзор библиотеки Svelte, созданная специально для разработчиков React.

Если вам хочется понять основы, но не хочется лезть в документацию, то здесь вы сможете разобраться в том, как работает управлением состояние, взаимодействие с DOM и прочее:

https://tprg.ru/yJux

#svelte #react

Практическое введение в Svelte

В этом руководстве вы узнаете о том, что такое Svelte, познакомитесь с его основными концепциями и синтаксисом, а ещё сможете создать первое небольшое приложение на нём:

https://tprg.ru/9xXQ

#svelte

​Как использовать Svelte Kit с Tailwind CSS для своевременной компиляции

Давайте выжмем максимум из вашего следующего проекта! В этой статье вы узнаете, как настроить проект с использованием последних версий Svelte и Tailwind:

https://tprg.ru/HiZy

#svelte #tailwind

Основные переходы и анимация в Svelte

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

В этой статье вы научитесь использовать их:

https://tprg.ru/HhAz

#svelte

​Svelte за 100 секунд

Посмотрев это видео, вы не станете специалистом по Svelte, но вы сможете познакомиться с основными особенностями и возможностями этого фреймворка.

Убедитесь сами:

https://tprg.ru/9C7W

#видео #svelte

​Первый взгляд на Svelte

Опытный разработчик решил создать свой собственный веб-сайт и для его создания решил использовать новый для себя инструмент — Svelte. В этой статье он поделился своими впечатлениями от него и разобрал основные возможности:

https://tprg.ru/f5EV

#svelte

Создание веб-сайта на Golang и Svelte

Интересная статья о создании веб-сайта на крутом, но не самом привычном стеке. В этом варианте ответственность за фронтенд на себя берёт Svelte.js, а за бэкенд отвечает Golang, а точнее пакет gofiber.
Подробнее тут:

https://tprg.ru/84x3

#golang #svelte

​Reacting in Svelte — понимание компонентов в svelte на основе знаний React

Svelte — относительной молодой фреймворк, который достаточно быстро обретает преданных поклонников. Одним из них стал автор статьи, который даже перевёл свой сайт-портфолио с React на Svelte. О том почему он это сделал, читайте в статье:

https://tprg.ru/LGyA

#svelte

​Как создать многопользовательскую игру в реальном времени с нуля

Для этого нам понадобится немного HTML и CSS, горстка JavaScript-кода, охапка библиотек и Svelte в качестве вишенки на торте. Если все ингредиенты у вас готовы, то дело за малым — открывайте статью и следуйте рецепту:

https://www.smashingmagazine.com/2021/10/real-time-multi-user-game/

#html #css #javascript #svelte

​Интеграция SvelteKit с Backendless

Вы когда-нибудь работали с Backendless? Это платформа Backend as a Service, которая позволяет без какого-либо кода настроить бэкенд приложения.

В этой серии статей вы изучите полное руководство по интеграции SvelteKit с Backendless, настроите вход и регистрацию, маршрутизацию и многое другое:

https://dev.to/brewhousedigital/integrating-sveltekit-with-backendless-3gip

#svelte #backendless

​ReSvelte — инструмент разработчика Svelte и визуализатор дерева компонентов

Svelte — крайне удобный инструмент для создания сайтов. Однако он имеет две важные проблемы, а именно трудно выявляемый повторный рендеринг компонентов и их некорректное размещение в дереве. Чтобы избавиться от этих проблем команда Hoon Park создала инструмент, включающий визуализатор дерева компонентов и решающий проблему повторного рендеринга ReSvelte.

В этой статье вы найдёте подробный обзор библиотеки:

https://nuancesprog.ru/p/15780/

#svelte #resvelte #фронтенд

​Создание микрофронтенда со Svelte и Podium

Микрофронтенд позволяет нам создавать независимые части крупной архитектуры, что делает разработку удобнее и быстрее. В этой статье вы узнаете, как создавать отдельные микросервиы для фронтенда, используя Svelte, Rollup и Podium, а затем научитесь их компилировать в единое приложение:

https://blog.logrocket.com/building-svelte-micro-frontends-podium/

#микрофронтенд #svelte #фронтенд

Синтезатор в браузере: создаём музыкальный инструмент на Web Audio API

AudioContext, OscillatorNode и GainNode — всё, что нужно, чтобы браузер зазвучал. Этот пошаговый материал научит вас превращать вашу клавиатуру в мини-аккордеон: вы подготовите таблицу частот, подключите осцилляторы разной формы волн, пропишите обработчики keypress/keyup и настроите все в Svelte.

В итоге вы получите полноценный JavaScript-инструмент с открытым исходным кодом. Все подробности в статье.

#фронтенд #svelte