Это список различной информации на русском языке о Svelte и Sapper.
Самые полные списки различных компонентов, библиотек и всего что может быть полезно при разработке.
awesome Svelte resources
Официальный чат — чат где можно задать вопрос по svelte. Уже больше 1000 пользователей, очень приятное сообщество. Если есть вопросы или что-то не понятно, пишите там.
Официальный канал - канал русскоязычного сообщества SvelteJS с полезными ссылками
Вакансии Svelte - канал с вакансиями по svelte. Да! Реальная работа, за настоящие деньги :)
Официальный канал Sapper - канал русскоязычного сообщества Sapper
🔥 Svelte Russia Meetup #1, опубликовано 22 февраля 2019 г.
Web Components, или Туда и обратно, Павел Малышев, РИТ++ 2019, опубликовано 21 февраля 2019 г.
Тезисы и презентация http://frontendconf.ru/moscow-rit/2019/abstracts/4622
Про чешское светлое, Александр Шушунов, на митапе Tver.io Polyglot Meetup, опубликовано 21 февраля 2019 г.
Ссылка на слайды https://tver.io/meetup/2019/02-polyglot/slides/2019-ashushunov-svelte-first-try.pdf Исходный код https://github.com/AlexanderShushunov/guess_who
Стоит ли делать ставку на Svelte?, Илья Климов, для https://www.patreon.com/javascriptninja, опубликовано 24 января 2020 г.
Павел Малышев. State of SvelteJS, Павел Малышев, Dump, опубликовано 9 декабря 2019 г.
Павел расскажет о текущем состоянии набирающего популярность компилируемого фреймворка SvelteJS, его экосистемы и сообщества, а также почему это не «yet another JS framework» и вам стоит присмотреться к нему.
Получите быстрый обзор новой технологии, сравнение с существующими решениями от мейнтейнера проекта и фасилитатора русскоязычного сообщества.
Svelte. Why it's called "Cybernetically enhanced web apps"?, Антон Конев, BeerJS Ekaterinburg Speeches, опубликовано 23 ноября 2019 г.
Антон Конев рассказывает о том, что такое Svelte, о плюсах и минусах, почему приложения написанные на нём называют кибернетически улучшенными и немного сплетен о Vue.
Три истории о Svelte, Илья Климов, iTechArt, опубликовано 10 октября 2019 г.
Почти наверняка вы слышали о Svelte - новом фреймворке, который самый быстрый, самый маленький и самый лучший. Svelte действительно популяризировал ряд идей, которые важны для современного фронтенда. Перед любой командой и любым программистом возникает вопрос - а какие риски несет для нас переход на Svelte. В этом докладе я поделюсь тремя историями, участником которых я был. И (спойлер) не все они окончились хорошо. Неважно, пишете ли вы на React, Angular или Vue - с этого доклада вы уйдете с пониманием рисков, что несет вам Svelte.
Svelte. Первый взгляд, Alexander Shushunov, RSCONF 2019, опубликовано 7 октября 2019 г.
Рассказ о первом знакомстве с Svelte. Его основные особенности (что лежит в основе, основные концепции). Что нужно, чтобы написать первое приложение. Общие впечатления. Положительные и отрицательные стороны. Небольшое сравнение с React. Доклад начального уровня. Рассчитан на людей, которые давно слышали о фреймворке, но руки не доходили попробовать.
О Svelte, Александр Зинченко, GetIT 2019, опубликовано 26 сентября 2019 г.
Что такое Svelte, отличное сравнение Svelte и React на различных примерах.
Reactive programming. Svelte way, Александр Ковтун, VinnytsiaJS 2019, опубликовано 5 сентября 2019 г.
🔥 Svelte Cookbook. Мастер класс по SvelteJS, Павел Малышев, HolyJS, опубликовано 28 августа 2019 г.
Почти 3 часа о Свелте и Саппере на различных примерах
Исчезающие фреймворки, Павел Малышев, FrontendConf 2018, опубликовано 28 мая 2019 г.
Разберемся, зачем в действительности мы используем фреймворки, и почему классические фреймворки подходят не для всех проектов. Поговорим о новом тренде "исчезающих фреймворков" на примере SvelteJS, и почему это не «yet another javascript framework».
"Svelte - конкурент React и Angular?", Александр Грибанов, Компьютерная школа Hillel, опубликовано 17 июля 2019 г.
- что же такого необычного в этом фреймворке;
- сможет ли Svelte пошатнуть уже устоявшиеся позиции фреймворков-лидеров.
"Svelte - будущее JS фреймворков?", Роман Часовитин, Mad Devs, опубликовано 6 июня 2019 г.
Взлетит ли новый герой - Svelte? Спикер затронет проблемы современных фреймворков на примере React, проведет небольшой обзор Svelte и расскажет, чем же он действительно хорош и как может повлиять на другие фреймворки.
"Установка и настройка Svelte - frontend доски объявлений", Трансляция Django School, опубликовано 12 июня 2019 г.
Устанавливаем и настраиваем Svelte, смотрим что за зверь такой.
Уроки по Svelte, Владилен Минин, опубликовано 12 июня 2019 г.
Серия уроков про Свелт
- Что такое SvelteJS (отличие от React, Angular, Vue)
- Как работает SvelteJS
- Переменные и стили в SvelteJS
- Как добавлять события в SvelteJS
- Реактивность в SvelteJS
- Как SvelteJS работает с формами (bind)
- Как работают условные операторы в SvelteJS
- Как создавать компоненты в SvelteJS
- Как работают циклы в SvelteJS. Зачем нужен key
Актуальная версия Svelte 3. Изменился синтаксис, но основные подходы и преимущества остались актуальными.
Магически исчезающий JS фреймворк, Павел Малышев, JS NN, опубликовано 19 мая 2018 г.
Поговорим о новом тренде AoT-компиляторов в ванилу на примере SvelteJS
"Первый взгляд на Svelte", Александр Шушунов, EPAM Moscow ITsubbotnik, опубликовано 16 мая 2019 г.
Доклад на примере приложения "Угадай кто?".
Приложение-викторина "Угадай кто?" исходный код Слайды Так же есть версия приложения для Svelte 3, см. выше
"Svelte: обзор и сравнение", Александр Федотов, MoscowJS 42, опубликовано 28 августа 2018 г.
Веб-стандарты 167 / Редакторы, фреймворки, образование и Илья Климов из GitLab
00:32:59 LitElement, Svelte, рантайм
Веб-стандарты 170 / Edge на Chromium, jQuery, JS-импорты, SEO и SSR, веб-компоненты, Svelte и SPA без рантайма
01:21:57 Svelte и SPA без рантайма
Подкаст Девшахта Youtube или Soundcloud
- 00:00:45 Как Павел пришёл к Svelte
- 00:09:22 Действительно ли Svelte фреймворк без рантайма?
- 00:14:38 Как работает изоляция стилей в Svelte
- 00:18:27 Используются ли в Svelte динамически генерируемые стили
- 00:22:35 Как решились перейти к большим проектам от виджетов
- 00:25:13 Специфика Smart TV-приложений
- 00:30:23 Как продавать заказчикам редкую технологию
- 00:34:24 Какие есть ниши для Svelte кроме виджетов?
- 00:40:30 Workshop по Svelte от Павла
- 00:42:26 Куда идти за информацией?
- 00:44:56 Какие есть конкуренты у Svelte
- 00:47:57 Что делает Svelte — одним предложением
Хороший ли выбор Svelte для реализации виджета?
Привет! Меня зовут Дмитрий Усов, я фронтенд-разработчик в Ситимобил. Буквально несколько месяцев назад появилась задача создать виджет для заказа такси через сайт. В этой статье я хотел бы рассказать, почему для этой задачи был выбран Svelte, поделиться своим мнением о его достоинствах и недостатках, а также полезными ссылками, если вы решитесь изучать или применять эту технологию.
Svelte, исчезающий фреймворк, который уже не исчезнет
Когда на днях в наш уютный чатик @sveltejs в телеграм запостили ссылку на очередную «разоблачающую» статью про Svelte, я очень обрадовался, предвосхищая интересный технический батл или хотя бы увлекательное чтиво чужого практического опыта. Кроме того, что это всегда интересно и полезно, определенное стечение обстоятельств — плановый отпуск и карантин — заставляют меня скучать дома, а подобная статья могла бы несколько разнообразить мой день. Каково же было мое разочарование, вы даже представить себе не можете… но давайте по делу.
Чему я научился, написав библиотеку компонентов на Svelte
Попробовав Svelte в личных проектах, мне захотелось двигаться дальше, и взять фреймворк в проект побольше. Для этого написал библиотеку компонентов svelte-atoms. За основу я взял UI кит на React, который используем на работе.
Дайджест материалов сообщества Svelte (16.01 — 01.02)
Сегодня мы начинаем делиться с вами наиболее заметными материалами сообщества Svelte. Приятного чтения!
Уйти от jQuery к Svelte, без боли
Я бэкэнд разработчик и фронтэнд задачи решаю как умею, то есть на jQuery, это работало в 2015, работает и сейчас. Но при наличии Vue и React это уже не камильфо. Из любви к особому пути я решил осваивать не проверенный миллионами разработчиков Angular/React/Vue, я решил попробовать Svelte.
Сделав пару упражнений из учебника, я решил перейти к практике. Для этого я взял одно из своих успешно выполненных тестовых заданий.
В этой статье я расскажу, что такое Действия и на простейших примерах покажу их применение.
Чему я научился, написав библиотеку компонентов на Svelte
Попробовав Svelte в личных проектах, мне захотелось двигаться дальше, и взять фреймворк в проект побольше. Для этого написал библиотеку компонентов svelte-atoms. За основу я взял UI кит на React, который используем на работе.
У Радислава Гандапаса есть отличная книга Полная Ж. В ней говорится о том, как оценить направления своей жизни, и как разработать план развития. Мне захотелось создать инструмент, который будет в моем смартфоне и поможет составить мой радар.
Кибернетически улучшенные Web-приложения
Современный фронтенд шагнул далеко вперед со времен jQuery и обычных HTML страничек. У нас появились сборщики, менеджеры пакетов, компонентный подход, SPA, SSR и много еще чего. Кажется, что у нас есть все, что нужно для счастья. Но индустрия двигается вперед. Я хочу вам рассказать о компилируемом фреймворке Svelte, и какие преимущества у него есть перед аналогами.
Данный пост является ответом на вчерашнюю статью «Боль и слёзы в Svelte 3» и появился как следствие сильно «располневшего» комментария к оригинальной статье, который я решил оформить в виде поста. Ниже я буду использовать слово автор для отсылки к автору оригинальной статьи и позволю себе сделать некоторые уточнения по всем пунктам. Поехали!
Статья будет полезна тем, кто так-же как и Мы решил попробовать Svelte в живом проекте. В нашу небольшую компанию пришёл заказ на разработку веб-админки для сервиса с бекэндом на Mongodb Stitch. В последние пару лет frontend Мы пишем на React или Vue (в зависимости от размера проекта и нужен ли ReactNative), но наслышав о красотах Svelte мы решили попробовать его, чтобы понять для себя так ли он хорош. И может нам тоже стоит дальше использовать его вместо Vue или React?..
Быстрое введение в Svelte с точки зрения разработчика на Angular
Поскольку мой основной опыт разработки связан с Angular, вполне естественно, что я пытаюсь изучить Svelte, копируя уже привычные мне подходы. И именно об этом будет рассказано в этой статье: как в Svelte делать те же самые вещи, что и в Angular.
Примечание: Не смотря на то, что в ряде случаев я буду высказывать своё предпочтение, статья не является сравнением фреймворков. Это простое и быстрое введение в Svelte для людей, которые уже используют Angular в качестве своего основного фреймворка.
Внимание спойлер: Svelte — это весело.
Не так давно я смотрел фреймворки для написания веб-компонентов и в частности познакомился со Svelte в качестве инструмента написания веб-компонентов. Было создано всё тоже модальное окно, что и в случае LitElement & Stencil
Svelte 3: Переосмысление реактивности
Буквально на днях произошло большое событие для сообщества SvelteJS, да и вообще, как мне кажется, для всего современного фронтенда — долгожданный релиз Svelte 3! Посему, под катом перевод статьи автора Svelte и прекрасное видео с его доклада на YGLF 2019.
Почему SvelteJS возможно лучший фреймворк для новых веб-разработчиков
Теперь мы работаем с инструментами сборки, маршрутизацией на стороне клиента, специальными фреймворками с причудливым рантаймом, привязывая везде «this», шаблонными литералами, CSS-in-JS… как же выбрать то, что важнее всего?
У дизайнера новая идея? Что может быть проще
Стоит ли как-то кастомизировать существующие компоненты? Да еще так, чтобы не отхватить регрешн на существующих кейсах. Или же действовать по принципу «работает — не трогай» и написать новые компоненты с нуля. При этом, раздувая UIkit и усложняя поддержку.
Легенда о Фреймворке Всевластия
В последнее время набирает популярность тренд «исчезающих фреймворков», локомотивом которого, без сомнения, можно считать SvelteJS — buildtime-фреймворк и компилятор в ванильный javascript.
Несмотря на то, что концептуально Svelte весьма прост, а в использовании еще проще, многие разработчики задаются вопросом, в чем же killer-фича данного фреймворка, да и подхода в целом? Почему это не «yet another javascript framework»?
В этой статье я расскажу про одну из множества суперспособностей Svelte, которые могут всерьез облегчить вам жизнь.
Как сделать поиск пользователей по GitHub без React + RxJS 6 + Recompose
Эта статья является ответом на статью-перевод «Как сделать поиск пользователей по GitHub используя React + RxJS 6 + Recompose», которая буквально вчера научила нас как надо использовать React, RxJS и Recompose вместе. Что ж, предлагаю теперь посмотреть, как это можно реализовать без оных инструментов.
Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp»
Это небольшая ответная статья на публикацию «Сравнение JS-фреймворков: React, Vue и Hyperapp». Вообще я не большой фанат подобных сравнений. Однако раз уж речь зашла о таком маргинальном фреймворке, как Hyperapp, в сравнении с мастодонтами, типа React и Vue, я подумал, почему бы не рассмотреть все те же примеры на Svelte. Так сказать, для полноты картины. Тем более, это займет буквально 5 минут. Поехали!
Этот пятничный пост посвящен переводу интересной статьи, вышедшей вчера на Medium. Решил осваивать для себя новый жанр переводов, поэтому прошу сильно не пинать, если где-то что-то не так. А по возможности даже уведомлять об ошибках и опечатках в личку.
Буквально вчера вышла 2-я версия молодого, но весьма многообещающего фреймворка SvelteJS. Версия мажорная, а значит содержит не только новые фичи и исправленные баги, но и соответствующие «breaking changes». Что новенького предлагает разработчикам новая версия и почему Svelte стал еще лучше, читайте под катом.
Всем бодрого времени суток! Вдогонку к моему предыдущему посту, хочу показать простой пример микро-компонента автокомплита на SvelteJS. Кто еще не успел познакомиться с данным мирко-фреймворком — велком под кат!
Как я опубликовал PWA на Svelte в Google Play
Под катом рассказ о том, как я переписал приложение с react-native на Svelte и опубликовал его в Google Play.
Tic Tac Toe: содержание цикла статей
На сайте React'a есть туториал, в котором описывается разработка игры Tic Tac Toe. Я решил повторить разработку этой игры на Svelte.
Разработка игры Breakout на Svelte
На сайте React'a есть туториал, в котором описывается разработка игры Tic Tac Toe. Я решил повторить разработку этой игры на Svelte.
Почему я не использую веб-компоненты
Я пишу это в основном для себя в будущем, чтобы у меня было куда сослаться, когда кто-нибудь спросит меня, почему я скептичен в отношении веб-компонентов и почему Svelte не компилируется в веб-компоненты по умолчанию. (Тем не менее, он может компилироваться в веб-компоненты, а так же интегрироваться с ними, что подтверждается превосходной оценкой на Custom Elements Everywhere).
Разрабатываем игру на Svelte 3
Для закрепления пройденного я сделал небольшой проект и делюсь результатами с вами. Это не one-more-todo-list, а игра, в которой нужно отстреливаться от черных квадратов.
Настоящее реактивное программирование в Svelte 3.0
Заголовок статьи может показаться немного кричащим, впрочем как и сам фреймворк Svelte и те идеи, что стоят за ним. Если вы ещё не знаете ничего про Svelte, пристегнитесь, сейчас мы рванём навстречу революции.
Учтите, что это не урок по началу работы со Svelte. Уже существует прекрасное пошаговое интерактивное руководство от команды Svelte, которое погрузит вас в мир реактивного программирования.
Почему мы используем фреймворки? Angular, React и Vue помогают нам строить сложные веб-приложения: структурировать код, управлять состоянием и разрабатывать сложные интерфейсы. За последнее десятилетие фреймворки стали стандартом. Дорогим стандартом. С тех пор как фреймворки вошли в обиход, JS сильно раздуло. Страниц весом несколько мегабайт становится больше, и существенная часть этого объема — фреймворк сам по себе. Кажется, это немного, но для пользователя критично — на телефоне или слабом интернете страница может даже не загрузиться. Это проблема.
Кроме лишнего веса у классических фреймворков много других минусов и они подходят не для всех проектов. Эти проблемы решены в «исчезающих фреймворках». Что это за новый тренд, почему это не «еще один JS-фреймворк», а хорошая идея и как таинственные фреймворки могут улучшить наши приложения, расскажет Павел Малышев.
Хайп по Svelte после недавнего релиза 3 версии фреймворка всё-таки имеет место быть, чему свидетельствуют сильно возросшее комьюнити и огромное количество вопросов как в официальном чате, так и в нашем рускоязычном telegram-канале. Всё больше разработчиков украдкой или всерьёз присматриваются к этой технологии и задумываются о её применении в своих новых проектах. Для этих разработчиков и всех прочих интересующихся темой максимально эффективного написания кода, Rich Harris, автор и идеолог фреймворка, опубликовал статью о том, как Svelte помогает разработчику минимизировать усилия при создании современных реактивных web-приложений, перевод которой я и предлагаю ниже.
Пишем компонент с «материальными» кнопками для Svelte
Вдохновившись статьями SvelteJS: Релиз второй версии, Исчезающие фреймворки и Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp», про «исчезающий» фреймворк Svelte (читается «свелт», а то мало ли), я захотел его попробовать. И для начала решил написать небольшой компонентик с кнопками из Materialize.