Javascript-фреймворки будущего

Про Vue.js, Single Source of Truth, получение с сервера только данных в виде JSON и рендеринг исключительно на клиенте — это было моей мечтой в 2011—2012 году, которая исполнилась. А потом прошло 6 лет.

Кое-что изменилось. Начну издалека:

HTML — это язык разметки, а CSS целиком отвечает за отображение. Согласно этой концепции, теоретически можно было один раз описать содержание страницы в HTML, и с помощью CSS завернуть его хоть в 1000 различных дизайнов.

Со временем эта концепция развалилась. Названия CSS-классов стали описывать не суть содержимого, а то, как его надо отображать. Взять, хотя бы, все col- из Bootstrap.

События в Javascript. Сначала были button onclick, потом пришел jQuery, где все события навешиваются на имеющийся HTML. Удобно, но со временем становится сложно понять, какие обработчики вызовутся при определенном событии.

Третья волна — это Vue.js, где методы снова прописываются в HTML, как старый добрый onclick.

Общий тренд —back to the HTML! В HTML описывается отображение и поведение.

Однако, во Vue.js отображение и поведение описываются в HTML, а вот данные хранятся в другом месте, и Vue.js следит за тем, чтобы HTML следовал за данными.

Почему бы не перенести в HTML еще и данные?

Про то, почему лучше генерить HTML на сервере (даже для мобильных приложений) и передавать целиком на клиент:

Перезагрузка страниц ощущается «медленной» не из-за обработки HTML, а из-за обработки CSS и JS. То есть, мы подменяем целиком HTML с сервера, к нему применяются уже загруженные CSS и JS. Бинго!

Про то, почему маленьким командам не стоит брать пример с Гугла. И почему это круто, когда веб, десктоп, iPhone, Android — все это работает на одной системе, и каждый разработчик в команде понимает её от начала и до конца:

У меня отсюда такой вывод: не надо разделять backend и frontend, если у вас не огромная команда. Это одно и то же. Разделение — это крайняя вынужденная мера, а не цель.

Про JS-фреймворк для такого подхода:

Оказалось, Stimulus уже использует этот подход

Данные хранятся в HTML, вызовы методов написаны в HTML. Я еще не использовал этот фреймворк в деле, но был очень рад увидеть реализацию того, что уже некоторое время зарождалось у меня в голове.

Вместо: «Получаем с сервера данные, генерим HTML на основании этих данных, следим за действиями пользователя, меняем данные — это триггерит сохранение на сервер и изменения отображения.»

Сделать: «Получаем с сервера HTML, все данные там написаны (в data-id, data-name и подобных свойствах). Если это value, то даем просто изменить value. И в тот момент, когда мы хотели бы вызвать save(), мы парсим данные из HTML и сохраняем их.»

http://andrewkolpakov.ru