Как стать автором
Обновить
0

SvelteJS *

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

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

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

Время на прочтение9 мин
Количество просмотров6.1K

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


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


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


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

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

Svelte + Redux + Redux-saga

Время на прочтение6 мин
Количество просмотров4.9K

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

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

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

Время на прочтение10 мин
Количество просмотров8K

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

Читать далее
Всего голосов 14: ↑13 и ↓1+16
Комментарии12

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

Время на прочтение22 мин
Количество просмотров79K

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


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


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


Читать дальше →
Всего голосов 47: ↑43 и ↓4+56
Комментарии113

Истории

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

Время на прочтение2 мин
Количество просмотров646
Встречаемся 30 сентября в 19:00.

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

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

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

Svelte <3 TypeScript

Время на прочтение5 мин
Количество просмотров8K

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

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

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

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

Время на прочтение3 мин
Количество просмотров1.8K
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 раза быстрее).
Читать дальше →
Всего голосов 6: ↑5 и ↓1+6
Комментарии1

Возможно, вам не нужен Svelte, чтобы уменьшить ваш JavaScript

Время на прочтение4 мин
Количество просмотров12K

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


Недавно вышла статья "Хороший ли выбор Svelte для реализации виджета?" с опытом реализации проекта с критичным размером бандла. Это отличный повод проверить обещания пиарщиков Svelte на реальном проекте.


Давайте его проанализируем!

Читать дальше →
Всего голосов 41: ↑35 и ↓6+42
Комментарии26

Хороший ли выбор Svelte для реализации виджета?

Время на прочтение4 мин
Количество просмотров8.3K

Привет! Меня зовут Дмитрий Усов, я фронтенд-разработчик в Ситимобил. Буквально несколько месяцев назад появилась задача создать виджет для заказа такси через сайт. В этой статье я хотел бы рассказать, почему для этой задачи был выбран Svelte, поделиться своим мнением о его достоинствах и недостатках, а также полезными ссылками, если вы решитесь изучать или применять эту технологию.


CitymobilSvelte

Читать дальше →
Всего голосов 19: ↑18 и ↓1+28
Комментарии19

Svelte, исчезающий фреймворк, который уже не исчезнет

Время на прочтение19 мин
Количество просмотров28K
Когда на днях в наш уютный чатик @sveltejs в телеграм запостили ссылку на очередную «разоблачающую» статью про Svelte, я очень обрадовался, предвосхищая интересный технический батл или хотя бы увлекательное чтиво чужого практического опыта. Кроме того, что это всегда интересно и полезно, определенное стечение обстоятельств — плановый отпуск и карантин — заставляют меня скучать дома, а подобная статья могла бы несколько разнообразить мой день. Каково же было мое разочарование, вы даже представить себе не можете… но давайте по делу.


Читать дальше →
Всего голосов 96: ↑62 и ↓34+44
Комментарии241

Svelte, исчезающий фреймворк, что всё никак не исчезал

Время на прочтение5 мин
Количество просмотров16K

Когда я вижу очередную статью о Svelte:


RE: Боль и слёзы в Svelte 3
Svelte 3: Переосмысление реактивности
Почему SvelteJS возможно лучший фреймворк для новых веб-разработчиков
Легенда о Фреймворке Всевластия
Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp»
Исчезающие фреймворки


Меня переполняет восхищение от наглости писавших её. С серьёзнейшим видом эти люди приходят и начинают рассказывать что их фреймворк в принципе может рассматриваться как альтернатива большой тройке: Angular, React, Vue. Первый раз я подумал, что автор из-за своей неопытности на полном серьёзе рассматривает Svelte как вменяемую production-ready альтернативу устоявшимся фреймворкам. Второй раз я подумал, что автор испытывает творческий кризис и его так тошнит от большой тройки, что ему хочется писать на чём угодно, но только не на ней. В последующие разы меня преследовало чувство, что кто-то просто строчит заказные посты.


Паранойя, скажете вы и будете правы. Но мой психотерапевт занят поддержкой пострадавших от коронавируса. Им нужнее. Поэтому выговариваться мне придётся вам. А выговориться я бы хотел на тему того, что Svelte — натужно пиаримый кем-то мертворождённый фреймворк. Который в 2020 году является пустой тратой времени и не имеет никаких реальных конкурентных преимуществ по сравнению с другими фронтенд-фреймворками.


Читать дальше →
Всего голосов 80: ↑51 и ↓29+32
Комментарии156

Почему стоит использовать Svelte для своих веб-проектов

Время на прочтение8 мин
Количество просмотров21K
Если вы занимаетесь веб-разработкой, вы, вероятно, слышали о Svelte Js. Тем не менее, думаю, вам будет интересно, почему он набирает популярность и какими интересными преимуществами для веб-разработчиков обладает.

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

Всего голосов 7: ↑4 и ↓3+6
Комментарии31

Малоизвестные, но популярные JS-фреймворки для фронтенда

Время на прочтение5 мин
Количество просмотров14K
Не так давно мы, создавая динамические веб-приложения, использовали для работы с DOM чистый JavaScript или jQuery. С тех пор появилось много замечательных JavaScript-фреймворков и библиотек. Они помогают разрабатывать проекты, которые, по привлекательности и удобству, превосходят то, что было раньше.



Автор статьи, перевод которой мы сегодня публикуем, хочет рассказать о нескольких мощных, но малоизвестных клиентских фреймворках и библиотеках, основанных на JavaScript. Конечно, «большая тройка», в лице Angular, React и Vue, никуда не делась, но в мире веб-разработки есть и другие инструменты, достойные внимания. Такие, например, как Svelte, Preact и Riot. Вопрос выбора подходящего средства зависит от многих факторов. Среди них — знания разработчика, особенности проекта, ситуация на рынке. Поэтому давайте рассмотрим малоизвестные фреймворки, расширив тем самым свободу выбора тех, кто ищет подходящий инструмент для своего очередного проекта.
Читать дальше →
Всего голосов 23: ↑18 и ↓5+28
Комментарии30

Ближайшие события

Пришло ли время забыть о React и перейти на Svelte?

Время на прочтение6 мин
Количество просмотров37K
Каждый год выходит исследование State of JavaScript, которое обобщает результаты опроса, изучающего текущее состояние экосистемы JavaScript. Это исследование затрагивает фронтенд-фреймворки, серверную и мобильную разработку, тестирование, популярные ресурсы для разработчиков и многое другое.

В нём всё, конечно, крутится вокруг JavaScript. Поэтому если вы используете для веб-разработки JS — я очень рекомендую взглянуть на State of JavaScript в том случае, если вы ещё этого не сделали.

Для меня одним из самых интересных результатов State of JavaScript стало неожиданное внимание тех, кто участвовал в опросе, к фронтенд-фреймворку Svelte.

В общем рейтинге ведущих фронтенд-инструментов (основанном на показателях осведомлённости о фреймворке, интереса к нему и удовлетворённости им) Svelte появился на второй позиции. Он идёт там сразу после React, опережая такие хорошо известные инструменты, как Vue.js, Preact, Angular и Ember.
Меня это слегка шокировало, так как Svelte — это сравнительно новый инструмент — как в плане возраста, так и в плане парадигмы разработки программного обеспечения.


Рейтинг фронтенд-фреймворков по результатам исследования State of JavaScript
Читать дальше →
Всего голосов 32: ↑25 и ↓7+30
Комментарии117

Svelte: знакомимся с Действиями

Время на прочтение5 мин
Количество просмотров9.1K

Недавно на Хабре появилась статья от @sanReal, где Александр рассказал о том, каким приёмам и каким возможностям Svelte он научился на собственном опыте. Я был немного удивлён не увидев в его списке упоминания одного из самых мощных инструментов фреймворка — Действий. К тому же, общаясь с людьми в сообществе @sveltejs, которые уже создают очень хорошие приложения при помощи Svelte, я иногда замечаю, что не все пользуются Действиями даже там, где их применение идеально решало бы задачу. В этой статье я расскажу, что такое Действия и на простейших примерах покажу их применение.

Читать дальше →
Всего голосов 20: ↑18 и ↓2+21
Комментарии2

Уйти от jQuery к Svelte, без боли

Время на прочтение6 мин
Количество просмотров6.4K
Всем привет.

Я бэкэнд разработчик и фронтэнд задачи решаю как умею, то есть на jQuery, это работало в 2015, работает и сейчас. Но при наличии Vue и React это уже не камильфо. Из любви к особому пути я решил осваивать не проверенный миллионами разработчиков Angular/React/Vue, я решил попробовать Svelte.

Сделав пару упражнений из учебника, я решил перейти к практике. Для этого я взял одно из своих успешно выполненных тестовых заданий.

По заданию надо было сделать просмотр списка задач и одной задачи из этого списка, CRUD не нужен.

Клиентская часть выполнена как SPA, и вся работа с DOM ведётся через jQuery, для замены jQuery на Svelte это отличный кандидат.

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

Другим камнем преткновения было использование

$

в Svelte это зарезервированный символ, поэтому его использование в коде который будет скомпилирован Svelte приводит к ошибке:


[!] (plugin svelte) ValidationError: $ is an illegal variable name
Читать дальше →
Всего голосов 11: ↑8 и ↓3+8
Комментарии10

Дайджест материалов сообщества Svelte (16.01 — 01.02)

Время на прочтение1 мин
Количество просмотров4.4K

Сегодня мы начинаем делиться с вами наиболее заметными материалами сообщества Svelte. Приятного чтения!
image

Читать дальше →
Всего голосов 7: ↑6 и ↓1+9
Комментарии33

Чему я научился, написав библиотеку компонентов на Svelte

Время на прочтение5 мин
Количество просмотров13K


Попробовав Svelte в личных проектах, мне захотелось двигаться дальше, и взять фреймворк в проект побольше. Для этого написал библиотеку компонентов svelte-atoms. За основу я взял UI кит на React, который используем на работе.


Каким приемам Svelte я научился, читайте под катом.

Читать дальше →
Всего голосов 21: ↑21 и ↓0+21
Комментарии64

Полная жизнь на Svelte

Время на прочтение8 мин
Количество просмотров13K

У Радислава Гандапаса есть отличная книга Полная Ж. В ней говорится о том, как оценить направления своей жизни, и как разработать план развития.


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


image

Читать дальше →
Всего голосов 26: ↑25 и ↓1+24
Комментарии8

Кибернетически улучшенные Web-приложения

Время на прочтение8 мин
Количество просмотров6.6K

Современный фронтенд шагнул далеко вперед со времен jQuery и обычных HTML страничек. У нас появились сборщики, менеджеры пакетов, компонентный подход, SPA, SSR и много еще чего.


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



Автор изображения Andrew Walpole

Читать дальше →
Всего голосов 16: ↑16 и ↓0+16
Комментарии42