Решил попробовать, “каково это там на фронте” и выбрал Svelte, как самый любимый разработчиками веб-фреймворк по результатам опроса StackOverflow (к которому стоит относиться с опаской, потому что на втором месте ASP.NET Core, а на седьмом — Spring). Ключевая фишка — отсутствие виртуального DOM. Я вообще сначала думал, что он будет чуть ли не SSR и компиляция, но в процессе изучения понял, что ошибался.

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

Основа интерактивности компонентов — во взаимодействии через привязку к переменным. Привязка может быть односторонней, а может быть двухсторонней. Двухсторонняя может быть только в случае, если свойство элемента может быть изменено пользователем — это не очень очевидно и немного не универсально: если компонент написан на чистом JavaScript, то привязаться к нему надо будет через события или через промежуточный слой. А еще не будет работать привязка на изменяемое свойство контролируемой переменной, потому что обновление вызывается при присваивании самой переменной. Условной привязки нет, поэтому чтобы заставить по галочке двигаться два ползунка одновременно, а при ее снятии — независимо, мне пришлось накостылить решение через Store, который обычно используется для сложных взаимодействий по PubSub модели. Можно было сделать через события, но получилось бы не сильно лучше, имхо.

Синтаксис шаблонирования в HTML выглядит довольно простым, жаль только, что в условиях обычный JavaScript, а не TypeScript. Впрочем, ничего сложного я с ним и не делал, в Jekyll’овском шаблонизаторе на грабли тоже не сразу наступил.

Не очень очевидным оказался процесс инициализации, потому что некоторые вещи надо вызывать через onMount, после привязки к DOM, а некоторые, например, код в “статическом” блоке — сразу.

С SSR ждало разочарование — из коробки его нет, настраивать не очень понятно как, одобренный способ еще не устаканился. “Compile-centric” тоже не ощутил: да, все зависимости в dev, но почти все ошибки все равно ловить через отладку в браузере.

По дороге меня еще ждали типичные проблемы с CORS, которые я обошел использованием allOrigins, сложности CSS (я по-прежнему офигеваю, как там тяжело сделать “простые” вещи, например, вертикальное выравнивание текста по середине). Немного споткнулся и о TypeScript — работа с undefined оставляет желать лучшего, импорт типа ведет себя не очень очевидно, но тут я скорее не все понял.

Отдельной болью была отладка и адаптация под планшет. Вляпался в отличия обработки нажатий мышкой и пальцем, неработающую запись без https, отсутствие поддержки MediaRecorder (пришлось использовать полифилл, который поддерживает API не полностью). Изюминкой было то, что если не сработала привязка в элементе, то браузер показывал просто пустой экран — и попробуй догадайся, что ему не понравилось — на планшете нет консоли разработчика, подключать ее геморройно. А проблема была в том, что не поддерживался оператор ?..

В целом впечатления остались скорее приятные. От Svelte у меня почти не горело :). Идея инкапсулировать компонент в одном файле и потом использовать как HMTL-тег на мой взгляд довольно прикольная. Выглядит похоже на Vue (как он мне смутно запомнился по мимолетному знакомству).

P.S. Не знаю, зачем я продолжаю заниматься этим мазохизмом с фронтендом :) Но возможность показать что-то доступное для интерактива немного греет.