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

SvelteJS

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

Сначала показывать
  • Новые
  • Лучшие
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

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

JavaScriptAngularReactJSVueJSSvelteJS
Из песочницы
Перевод

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

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

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

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

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

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

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

Новости

Показать еще

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

Разработка веб-сайтовJavaScriptSvelteJS
Tutorial

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


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


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


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

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

Svelte + Redux + Redux-saga

JavaScriptSvelteJS

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

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

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

Разработка веб-сайтовJavaScriptSvelteJS
Перевод

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

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

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

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

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


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


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



Библиотеки и фреймворки


Для начала важно понимать, что библиотека и фреймворк — не одно и то же.

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

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

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

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

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

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

Svelte <3 TypeScript

Разработка веб-сайтовJavaScriptTypeScriptSvelteJS
Перевод

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

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

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

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

JavaScriptAngularSvelteJS
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.4K
Комментарии 1

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

Разработка веб-сайтовJavaScriptSvelteJS

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


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


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

Читать дальше →
Всего голосов 54: ↑48 и ↓6+42
Просмотры11K
Комментарии 26

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

Блог компании СитимобилJavaScriptSvelteJS

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


CitymobilSvelte

Читать дальше →
Всего голосов 30: ↑29 и ↓1+28
Просмотры6.6K
Комментарии 19

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

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


Читать дальше →
Всего голосов 112: ↑78 и ↓34+44
Просмотры23K
Комментарии 241

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

JavaScriptAngularReactJSVueJSSvelteJS
Из песочницы

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


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


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


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


Читать дальше →
Всего голосов 90: ↑61 и ↓29+32
Просмотры14K
Комментарии 156

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

Блог компании VDSina.ruРазработка веб-сайтовJavaScriptSvelteJS
Перевод
Если вы занимаетесь веб-разработкой, вы, вероятно, слышали о Svelte Js. Тем не менее, думаю, вам будет интересно, почему он набирает популярность и какими интересными преимуществами для веб-разработчиков обладает.

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

Читать дальше →
Всего голосов 12: ↑9 и ↓3+6
Просмотры7.8K
Комментарии 29

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

Блог компании RUVDS.comРазработка веб-сайтовJavaScriptSvelteJSEmber.js
Перевод
Не так давно мы, создавая динамические веб-приложения, использовали для работы с DOM чистый JavaScript или jQuery. С тех пор появилось много замечательных JavaScript-фреймворков и библиотек. Они помогают разрабатывать проекты, которые, по привлекательности и удобству, превосходят то, что было раньше.



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

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

Блог компании RUVDS.comРазработка веб-сайтовJavaScriptReactJSSvelteJS
Перевод
Каждый год выходит исследование State of JavaScript, которое обобщает результаты опроса, изучающего текущее состояние экосистемы JavaScript. Это исследование затрагивает фронтенд-фреймворки, серверную и мобильную разработку, тестирование, популярные ресурсы для разработчиков и многое другое.

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

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

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


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

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

Разработка веб-сайтовJavaScriptSvelteJS
Tutorial

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

Читать дальше →
Всего голосов 25: ↑23 и ↓2+21
Просмотры6.8K
Комментарии 2

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

Разработка веб-сайтовSvelteJS
Tutorial
Recovery mode
Всем привет.

Я бэкэнд разработчик и фронтэнд задачи решаю как умею, то есть на 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
Читать дальше →
Всего голосов 14: ↑11 и ↓3+8
Просмотры5.4K
Комментарии 10

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

Разработка веб-сайтовJavaScriptSvelteJS

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

Читать дальше →
Всего голосов 11: ↑10 и ↓1+9
Просмотры4.1K
Комментарии 33

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

Разработка веб-сайтовJavaScriptSvelteJS


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


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

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

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

Разработка веб-сайтовJavaScriptSvelteJS
Tutorial

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


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


image

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

Вклад авторов