Является Ли Svelte Хорошим Выбором Для Реализации Виджетов?

Привет! Меня зовут Дмитрий Усов, я фронтенд-разработчик в компании Ситимобил.

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

Исходные данные

1. Со стороны бизнеса:
   • Виджет должен загружаться и запускаться быстро.

     В результате размер конечного пакета должен быть как можно меньшим.

2. Со стороны разработки:
   • Компонентный подход. Это облегчит дальнейшие изменения.

   • Возможность избежать ручного управления DOM. Это позволит вам писать код быстрее.

   • Мне хотелось, чтобы эта технология развивалась, чтобы у нее было сообщество и хорошая документация.

У React, Vue и Angular с этим проблемы.

1. Все еще тот же размер во время выполнения.

2. Stateofjs — насколько технология интересна разработчикам и насколько они ею довольны.

Преимущества Свелте:

1. Выигрышные показатели в таблице.

2. Отличная возможность для экспериментов, так как проект небольшой.

   Preact здесь проигрывает, так как внутри это React, который мы уже везде используем.

3. Большинство компонентов являются домашняя страница Mail.ru написан на Svelte.

Несколько слов о Svelte

Svelte - это язык с принципиально новым подходом к созданию пользовательских интерфейсов.

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

Выполнение

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

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

Доступен виджет - Здесь .

Сама реализация не заняла много времени — в Svelte имеется огромное количество полезных инструментов (об этом позже).

Один из самых запоминающихся моментов: поднятие локального обратного прокси для связи с серверной частью в обход CORS. Изначально для сборки проекта был выбран роллап, но, как выяснилось позже, запрещено убедитесь, что и горячая перезагрузка, и прокси активны, поскольку каждый предоставляет свой собственный сервер, и вы можете использовать только один.

Пришлось уже готовый роллап поменять на вебпак.

В остальном все проблемы, с которыми я столкнулся, были решены быстро.

Итак, преимущества Svelte

Важный : все написанное здесь - мое личное мнение.

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

Низкий порог входа

Новички и разработчики с опытом Vue/React/Angular обязательно найдут в Svelte что-то знакомое.

Скорость

1. Размер времени выполнения (мин+gzip) 1,4 КБ .

2. Нет виртуальный DOM .

   На этапе сборки Svelte знает все состояния приложения и то, как оно может меняться между ними.

3. Минимальный шаблон .

4. Технология удаления мертвого CSS. Если ваше приложение не использует какую-то часть CSS-кода, то подключенный линтер сообщит вам об этом.

   И если вы вдруг забудете удалить этот код, компилятор сделает это за вас.

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

1. Существует компонентный подход.
2. Есть реактивность .

3. Есть жизненные циклы компонентов .

4. Есть контекст И магазины , позволяющий взаимодействовать между компонентами.

5. Действия .

   Я также рекомендую статья AlexxNB , в котором он раскрыл больше примеров.

6. Есть самый простой и функциональный анимация как я когда-либо видел.

   Несмотря на то, что анимации написаны как функции JS, они компилируются в нативные CSS-анимации и, соответственно, выполняются в отдельном от JS потоке.

Сообщество и документация

1. Есть подробное документация В сети.

2. Управление , который содержит все, что вам нужно знать, чтобы начать писать на Svelte.
3. Есть русскоязычное сообщество в Telegram, в котором более 1500 человек.

4. Есть официальный Дискорд с чатами на разные темы (сапер, свелте, вакансии, машинопись и т.д).

Минусы Свелте

Опять же, важно : все написанное здесь - мое личное мнение.

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

Подсветка синтаксиса в Gitlab

Это большая проблема в развитии команды.

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

Мониторинг ошибок

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

Хотелось бы иметь возможность отслеживать ошибки JS конкретно в виджете.

Количество библиотек

выводы

1. Внимательно проверьте, соответствует ли выбранная вами технология заявленным требованиям.

2. Во время реализации казалось, что лучшей технологии для виджета и быть не может. Писать на Svelte было огромным удовольствием.

   Надеюсь, появятся еще проекты, в которых это можно будет применить.

3. Svelte — это пример того, как, не имея за собой финансовой поддержки, можно сделать отличную технологию, у которой определенно есть ниша для применения.

   Надеюсь, что с годами оно будет только расти.

Полезные ссылки и плагины на примере vscode

• Репортаж Ильи Климова поможет каждому, кто смотрит на Svelte, ответить на вопрос: «Является ли Svelte хорошим выбором для моего проектаЭ»
• Здесь о Svelte много информации и видео.

• Telegram-сообщество
• Сообщество в раздоре
• Статьи на dev.to
• Машинопись
• Состояние Svelte 2020
• Автоимпорт стройных
• Строгий синтаксис
• Svelte IntelliSense
• Стройные фрагменты

Благодарности

Теги: #JavaScript #svelte #SvelteJS

• Новые Системы Хранения Netapp Под Управлением Ontap 9.1

  19 Oct, 24

• Распределение Данных В Apache Ignite

  19 Oct, 24

• Настройка Archlinux На Asus Eee 1201Nl

  19 Oct, 24

• Число Твитов Превысило Отметку В 20 Миллиардов

  19 Oct, 24

• Новый Вид Аудиорекламы – Трансляция Звука Прямо В Голову

  19 Oct, 24

• Дискретная Математика Для Wms: Алгоритм Сжатия Товаров В Ячейках (Часть 2)

  19 Oct, 24

• Выбрав Не Того Мобильного Оператора, Вы Можете Получить 10 000 Долларов!

  19 Oct, 24

• Система Охлаждения Nvidia Geforce 8800Gt От Thermalright

  19 Oct, 24

• Пак Фпсу-Ип И Его Преимущества

  19 Oct, 24

• Скажите Доброе Слово Бедному Пазлу. Обзор Представителей Самой Популярной Категории Детских Приложений

  19 Oct, 24