Как стать автором
Обновить
0
Рейтинг

SvelteJS *

Фреймворк для создания быстрых web-приложений

Сначала показывать
Порог рейтинга

Как подружить Svelte и Spring Boot

Java *Kotlin *SvelteJS *
Из песочницы

Эта статья рассчитана на Spring Boot разработчиков, желающих пощупать мир современного фронтенда. Я потратил некоторое количество времени на поиск наиболее приличного фреймворка и мой выбор пал на Svelte. Почему именно он, а не React или Vue? Лучше всего на этот вопрос ответит главная страница фреймворка, а я выделю главные его особенности.

Читать далее
Всего голосов 9: ↑5 и ↓4 +1
Просмотры 3.5K
Комментарии 8

Новости

Как сократить код Canvas API в Svelte

Блог компании SkillFactory Разработка веб-сайтов *Программирование *TypeScript *SvelteJS *
Перевод

Разработчик из консалтинговой компании в области разработки This Dot Labs рассказывает, как использовать canvas в Svelte и как превратить многословный API Canvas в краткий, более декларативный. Подробности — к старту нашего курса по фронтенду.

Узнать больше
Всего голосов 15: ↑13 и ↓2 +11
Просмотры 2K
Комментарии 0

Туториал: SvelteKit JWT авторизация

JavaScript *TypeScript *SvelteJS *
Из песочницы
Перевод

В этой статье рассказывается о том, как внедрить аутентификацию в ваш SvelteKit проект. Это будет JWT аутентификация с использованием refresh токенов для дополнительной безопасности. Мы будем использовать Supabase в качестве базы данных (PostgreSQL), но основы должны быть теми же.

Читать далее
Всего голосов 4: ↑4 и ↓0 +4
Просмотры 2.8K
Комментарии 2

Кепка на ESP32 с спектроанализатором, BLE, svelte и работает на устройствах apple

Разработка под Arduino *DIY или Сделай сам SvelteJS *
Из песочницы

Привет, Хабр! В этой статье хочу поделиться с вами историей о проекте носимой электронике, в примере кепки с эквалайзером, бегущей строкой и эффектами.

Читать далее
Всего голосов 29: ↑28 и ↓1 +27
Просмотры 9K
Комментарии 6

Создание музыкального инструмента с помощью Web Audio API

CSS *JavaScript *HTML *SvelteJS *
Перевод

Недавно я поехал в Техас и купил трехрядный диатонический баян. Диатонические аккордеоны популярны для множества различных типов народной музыки, которую обычно учат на слух. Это хорошо для меня, потому что я все равно не умею читать ноты.

Аккордеон имеет 34 кнопки со стороны высоких частот и 12 кнопок со стороны басов. В отличие от фортепианного аккордеона, который имеет такое же логическое хроматическое расположение, как и фортепиано, у диатонического аккордеона просто набор кнопок, и я действительно не знал, с чего начать. Кроме того, каждая нота отличается независимо от того, вытягиваете ли вы меха или вталкиваете их, поэтому на самом деле на стороне высоких частот 68 нот (хотя некоторые из них повторяются). Кроме того, как я думаю, вы знаете, аккордеоны громкие. Очень громкие. Чтобы сильно не злить соседей, и узнать, как работает компоновка этой коробки, я решил сделать маленькое веб-приложение.

Читать далее
Всего голосов 10: ↑9 и ↓1 +8
Просмотры 2.1K
Комментарии 6

Забавы с маргинальными фреймворками: Пишем приложение для отладки TCP соединений с Malina.js

Разработка веб-сайтов *JavaScript *SvelteJS *

Одна из моих работ связана с отлаживанием протоколов общения теплосчётчиков для удалённого снятия показаний. Чаще всего теплосчётчик даже не мой, а находится у клиента на объекте, поэтому я подключаю его через GPRS-терминал к какой-либо своей сетевой машине, где поднят TCP сервер откуда посылаю байтики и смотрю, что мне ответит теплосчётчик. Посылать байты с консоли можно, но не очень удобно. Есть ряд приложений с которыми этот процесс упрощается, но я решил сделать себе в помощь специальный TCP сервер в виде Node-приложения с Web-интерфейсом, созданном с помощью фреймворка Malina.js.

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

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Просмотры 2.1K
Комментарии 0

Книга «Svelte и Sapper в действии»

Блог компании Издательский дом «Питер» Профессиональная литература *SvelteJS *
image Привет, Хаброжители! Многие веб-фреймворки замедляют работу приложений, загружая сотни строк кода «на всякий случай». Svelte позволяет компилировать приложения в эффективные крошечные пакеты с минимальным временем загрузки. Объединение Svelte с фреймворком Sapper облегчает маршрутизацию страниц, генерирование на стороне сервера, разработку статических сайтов и решение многих других задач. Хотите научиться создавать быстрые и элегантные веб-приложения? Вам помогут компоненты Svelte и качественный опыт взаимодействия. Вы научитесь использовать уникальную модель управления состояниями, освоите упрощенную маршрутизацию страниц, разбиение кода, поддержку автономного режима и работу с представлениями, генерируемыми на сервере.
Читать дальше →
Всего голосов 5: ↑5 и ↓0 +5
Просмотры 2.6K
Комментарии 5

О, кинчик

Разработка веб-сайтов *JavaScript *Разработка игр *SvelteJS *

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

Встречайте, О, кинчик!

Читать далее
Всего голосов 18: ↑18 и ↓0 +18
Просмотры 7.3K
Комментарии 16

Sapper и Svelte: быстрое руководство

Блог компании Издательский дом «Питер» JavaScript *Программирование *SvelteJS *
Перевод

Замечание редактора английского оригинала: Это руководство по Svelte и Sapper было обновлено 2 июля 2021 года с учетом информации о SvelteKit, пришедшем на смену Sapper. Подробнее о SvelteKit рассказано в статье “Exploring SvelteKit, the newest Svelte-based framework.”

Исследовав фреймворк Svelte.js, можно убедиться, что на нем можно писать по-настоящему реактивные приложения, но при этом обходиться значительно меньшим количеством кода, чем при использовании других фронтенд-фреймворков. В то время, как можно создавать довольно сложные приложения при помощи одного только Svelte, код такого приложения быстро может прийти в беспорядок. Знакомьтесь с Sapper!

Здесь мы в общем виде рассмотрим Sapper, продемонстрируем, как с его помощью писать полнофункциональные, но при этом легковесные приложения, а также детально разберем приложение для рендеринга на стороне сервера.

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Просмотры 4.3K
Комментарии 1

Какой JS-фреймворк выбрать новичку — мнения шести экспертов

Блог компании Яндекс Практикум Angular *ReactJS *VueJS *SvelteJS *
Привет! Меня зовут Дима Чудинов, я наставник на веб-факультете Яндекс.Практикума, Head of Frontend в СберМаркете.

В первой статье о JS-фреймворках я рассказал о самых популярных из них: Angular, React, Vue и других. В комментариях опытные разработчики спорили о том, какой фреймворк лучше, а новички спросили у меня, какой же инструмент выбрать для проекта и с чего начать знакомство с библиотеками.



Большую часть пути разработчика я писал на React. Хоть я и начинал с AngularJS, но убеждён, что это не единственный путь и можно начать с любого другого фреймворка, поэтому для статьи я решил собрать мнения знакомых разработчиков, которые пишут на разных фреймворках. Статья не даст однозначного ответа на вопрос «Что же выбрать?», но поможет решить, в каком направлении двигаться. А ещё подскажет, какие инструменты лучше применять в пет-проектах, а какие — в энтерпрайзе. Если нет времени читать статью целиком, в конце я собрал список лучших фреймворков для новичков на основе личных мнений экспертов.
Читать дальше →
Всего голосов 22: ↑20 и ↓2 +18
Просмотры 24K
Комментарии 26

Core Web Vitals: с чего начать?

Блог компании VK Разработка веб-сайтов *JavaScript *SvelteJS *


Согласно web.dev, улучшение качества взаимодействия с пользователем — ключ к долгосрочному успеху любого сайта. Понимая, насколько важен для развития интернета качественный пользовательский опыт, компания Google в 2020 году представила инициативу Web Vitals. Это единое руководство по метрикам качества, которые необходимы для обеспечения удобного взаимодействия с пользователем. Хотя за прошедшие годы Google создала ряд инструментов для измерения эффективности взаимодействия и составления отчетов (Lighthouse, PageSpeed Insights и Measure), Web Vitals должна упростить измерение производительности и помогает разработчикам сайтов сосредоточиться на самых важных показателях — Core Web Vitals.
Читать дальше →
Всего голосов 28: ↑28 и ↓0 +28
Просмотры 7.5K
Комментарии 0

Паттерн «Импорт при взаимодействии» (часть 1)

JavaScript *Angular *ReactJS *VueJS *SvelteJS *
Из песочницы
Перевод

Ссылка на оригинал

Паттерн заключается в отложенной загрузке ресурсов, то есть только тогда, когда пользователю нужна какая-либо часть интерфейса.

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

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

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

Это может негативно отразиться на таких метриках как:

Продолжение следует...
Всего голосов 4: ↑3 и ↓1 +2
Просмотры 2.5K
Комментарии 1

Переиспользуемый компонент Svelte: чтобы никому не было больно

Разработка веб-сайтов *JavaScript *SvelteJS *
Tutorial

Переиспользуемый компонент Svelte: чтобы никому не было больно


Компонентные фреймворки независимо от названия никогда не покинут область только нишевого использования, если сообщество не будет создавать для них общедоступные компоненты, которые можно легко встроить в свой проект.


За последние года полтора для фреймворка Svelte уже создано множество различных компонентов, которые можно найти на NPM, GitHub или официальном списке. К сожалению, не все из них правильно "приготовлены" и порой их использование раздует размер бандла приложения сильнее, чем должно быть. А бывает, что такие пакеты просто невозможно использовать, потому что его автор не силён в подготовке пакетов и упустил какие-то важные моменты.


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

Читать дальше →
Всего голосов 17: ↑15 и ↓2 +13
Просмотры 4.8K
Комментарии 17

Истории

Svelte + Redux + Redux-saga

JavaScript *SvelteJS *

Большинство из нас сталкивались с redux, а те, кто использовал его в ReactJS могли пощупать хуки useSelector, useDispatch, в ином случае через mstp, mdtp + HOC connect. А что со svelte? Можно навернуть или найти что-то похожее на connect, по типу svelte-redux-connect, описывать огромные конструкции, которые будем отдавать в тот самый connect.

Читать далее
Всего голосов 7: ↑7 и ↓0 +7
Просмотры 4.3K
Комментарии 19

Компилируем Svelte в уме. Часть 1/3

Разработка веб-сайтов *JavaScript *SvelteJS *
Перевод

В данном материале Tan Li Hau, один из мейнтейнеров фреймворка Svelte, в доступной форме рассказывает о том как работает компилятор Svelte и что скрывается под капотом когда мы пишем простейший компонент.

Читать далее
Всего голосов 18: ↑17 и ↓1 +16
Просмотры 6.6K
Комментарии 12

Что нужно знать о популярных JS-фреймворках

Блог компании Яндекс Практикум Разработка веб-сайтов *JavaScript *ReactJS *SvelteJS *

Привет! Меня зовут Дима Чудинов, я наставник на веб-факультете Яндекс.Практикума, Head of Group, Front-end, ABBYY.


Студенты недавно задали мне вопрос: «Что лучше: Angular или React?». Я начал отвечать и понял, что мне понадобится для этого статья. Позже я понял, что и одной статьи не хватит.


О том, какой фреймворк выбрать, я расскажу в другой раз. А в этой статье опишу историю создания фреймворков и их особенности. Выбрать рабочий инструмент статья не поможет. Зато поможет вести споры с другими разработчиками на кухне (если не будет карантина) и в сети. Статья будет полезна новичкам, которые только начинают своё знакомство с фреймворками и библиотеками, и поможет взглянуть на «зоопарк» веб-технологий сверху.


Читать дальше →
Всего голосов 64: ↑60 и ↓4 +56
Просмотры 60K
Комментарии 113

Приглашаем на DINS JS EVENING (online): обсуждаем рефакторинг приложений и SvelteJS

Блог компании DINS JavaScript *Конференции SvelteJS *
Встречаемся 30 сентября в 19:00.

В этот вечер Андрей Владыкин из DINS расскажет, с какими трудностями столкнулся при рефакторинге Chrome Extension и с помощью каких технических решений справился с этой задачей. Михаил Кузнецов из ING Bank сделает обзор нового фреймворка SvelteJS и проведет демо с разработкой простого приложение в прямом эфире. Участники встречи смогут задать вопросы спикерам.

Участие бесплатное, но нужна предварительная регистрация. Под катом — подробная программа и информация о спикерах.

image
Читать дальше →
Всего голосов 5: ↑5 и ↓0 +5
Просмотры 518
Комментарии 0

Svelte <3 TypeScript

Разработка веб-сайтов *JavaScript *TypeScript *SvelteJS *
Перевод

Поддержка Typescript, без сомнения, была самой желанной и востребованной фичей в течении долгого времени и вот она здесь: Svelte официально поддерживает TypeScript!

Мы полагаем, что это даст вам гораздо более приятный опыт разработки. Который прекрасно масштабируется на больших приложениях, независимо от того, используете ли вы TypeScript или JavaScript.

Читать далее
Всего голосов 10: ↑10 и ↓0 +10
Просмотры 6.8K
Комментарии 11

Что если скрестить Svelte и Angular? Или мутабельный Svelte

JavaScript *Angular *SvelteJS *
Svelte — очень хороший фреймворк/библиотека, но она имеет чувствительный недостаток (где их нет...) — это система отслеживания изменений, она плохо ловит мутации данных, поэтому в Svelte комьюнити форсируется иммутабельный подход.

И у меня давно чесались руки попробовать систему отслеживания похожую на ту что используется в Angular для Svelte, и вот появились свободные выходные и я на скорую руку из «говна и палок» состряпал Svelte-подобный компилятор (Svelte-M), что дало положительный побочный эффект в плане размера бандла и скорости работы:

Размер бандла получился почти в 2 раза меньше (todo приложение):

Svelte: 4.7k (2.2k gzipped)
Svelte-M: 2.7k (1.2k gzipped)

Скорость работы:

Рендеринг 5000 элементов: Svelte 894ms, Svelte-M 563ms (Svelte-M быстрее: 63% от времени Svelte).
Удаление 1 элемента: Svelte 113ms, Svelte-M 38ms (Svelte-M быстрее в 3 раза).
Пере-рендеринг (удаление и добавление 5000 элементов): Svelte: 859ms, Svelte-M 418ms (в 2 раза быстрее).
Читать дальше →
Всего голосов 8: ↑7 и ↓1 +6
Просмотры 1.6K
Комментарии 1