Old Skull — фронтенд-фреймворк из альтернативной вселенной

[kucheruk]

Результаты бенчмарков вдохновляют, без капли иронии.

Расстраивает необходимость держать html в строках.

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

Насколько DX важнее UX?

Когда речь идёт про отзывчивость интерфейса и скорость загрузки, DX хорошо бы отодвигать на второй план. Не все готовы, к сожалению.

[Raspy]

Так-то современные IDE понимают что в темплейт-стринге находится html и осуществляют подсветку синтаксиса, автодополнения и прочие вещи.

[faiwer]

А какие, если не секрет? WebStorm?

vsCode

[JustDont]

Для vscode есть extensions (в основном написанные для Polymer), которые что-то такое делают, только конечно не прямо вот "самостоятельно", а с некоторыми движениями руками (типа там, писать именно через tagged template literal — html`` и тому подобное).

[Raspy]

Я пользуюсь Intellij IDEA. Есть как подсветка локальных переменных, так и всех тегов. Если навестись на имя css класса, то покажет в каком css определён этот класс.

[faiwer]

Good. А если не убирать пустые пробелы и перенос строки перед <div class тоже работает?

Есть как подсветка локальных переменных

Тут как раз всё просто — это же интерполяция. Так любой редактор сможет. А вот воспринять автоматически это как HTML без бубнов, возможно, только Idea.

[Raspy]

Работает как угодно. Очень рекомендую попробовать. У идеи есть EAP версия, это полноценная бесплатная версия, которую можно использовать для любых целей. Единственное что её нужно постоянно обновлять на самую свежую версию, так как вас используют как "бета-тестера".

[JustDont]

Результаты бенчмарков вдохновляют, без капли иронии.

Были времена, когда svelte (тогда v2) хвалилась результатами бенчмарков на уровне ваниллы.
А потом туда добавили удобства работы, разобрались с большинством сложных нетривиальных случаев компоновки компонент, починили баги, и теперь её вообще достаточно легко можно брать в кровавый энтерпрайз. Но бенчмарками уже не хвалятся сильно. Догадайтесь, почему.

[atomic1989]

Как по мне, все решается сложностью проекта. Учитывая опыт на Backbone, для крупных проектов я бы не использовал. Для очень простых проектов возможно стоит рассмотреть. Вопрос только: svelte или old skull). Для чего-то побольше, все таки лучше react, vue. А для жирненького angular. Они, как по мне, более удобные. old skull не дает нам ничего особого, чтобы побить лидеров.

[halfcupgreentea]

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

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

По моему, если задаваться целью ускорения современного фронтенда и уменьшения объема кода, то лучше копать в сторону AOT компиляции, как уже делают Svelte и Angular. В реакте похожий проект отложили до лучших времен. Но у них другая киллер фича в приортете: параллелизация отрисовки с помощью коопертивного планировщика (это если почти на русский перевести :) )

[justboris]

В статье пропустили самый важный момент успеха современных фреймворков и неуспеха Backbone – возможность создания переиспользуемых компонентов. Берем и пишем:

<div class="something">
  <Button>click me</Button>
</div>

В любом современном фреймворке можно вставить в HTML кастомный элемент, который отрендерит свою разметку и инициализирует свою логику. В Backbone/Marionette так не выйдет – извольте отрендерить контейнер (регион), а потом вручную в него примонтировать компонент.

Видели хоть одну библиотеку UI-компонентов на Backbone? То-то и оно, что на нём такие вещи невозможны в принципе. А на Angular/React/Svelte/Vue/etc – запросто.

[TheShock]

Вы неправильно пишите аббревиатуры в camelCase стиле. Проверить очень просто. Подумайте, как бы вы ее писали в underscore стиле: get_h_t_m_l или get_html?

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

Есть ещё пример - подумайте какой вариант читабельнее: XMLHTTPRequest или XmlHttpRequest ?

[DarthVictor]

И самое интересное — это производительность. Результаты js-framework-benchmark показывают, что Old Skull существенно обгоняет по производительности как Angular, так и React:

Как Angular, так и React всё что новее будет обгонять по производительности. Это связано с банальной обратной совместимостью. Замените React хотя бы Preact'ом, которому не нужно оборачивать любое событие синтетическим (и который при этом совместим с доброй половиной экосистемы React и имеет тот же API) и разница станет уже существенно менее заметной. Равно как и разница с VueJS, который чуть новее React'а. Ну, а относительно новые SolidJS и Svelte на бенчмарках просто быстрее. Потому что у одного нормальная реактивность на атомах без VDOM, а другого анализ зависимостей в compile time.

Сравнение с упомянутыми фреймворками