SPA (Single Page App) с React.JS позволяют создавать веб приложения которые практически не отличаются от нативных. Все работает быстро, никаких перезагрузок страницы и т.п.

Но! Они требуют написания значительного обьема кода . Нужно писать как-бы два экземпляра кода - один на сервере, второй на клиенте и обеспечивать АПИ взаимодействия между ними.

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



Магия. Как все работает:

- Когда шелкается кнопка на клиенте - событие перехватывается и пересылается на сервер
- Сервер стейтфул, он поддерживает в памяти структуру данных похожую на Риакт компонент - с состоянием и методом рендер. Сервер также хранит виртуальную копию ДОМ браузера. Когда приходит событие - сервер запускает обработчик события. Затем запускает метод рендер. И сравнивает новый ДОМ с тем что был у него в памяти до этого. Формирует ДИФФ, и отправляет разницу браузеру. Все работает очень похоже на риакт, только на сервере.
- Клиент получает ДИФФ от сервера, применяет его к своему ДОММ, и все магическим образом обновляется.

Преимущества.

Простой и краткий код, его меньше чуть ли не в 2 раза и он проще. Можно делать приложения быстрее и дешевле и получать больше бабок .
Если делать скажем копию https://www.sql.ru с риактом (или вуе, ангуляром) - нужно будет создать следующие компоненты:

Сервер:
- Модели работы с Базой (Топик, Коммент и т.п.)
- Контроллеры
- АПИ на РЕСТ/Сокет/ГрафКЛ
- Сериализацию моделей в ЖСОН АПИ

Клиент
- Запросы к АПИ
- Обработка ошибок АПИ
- ЖСОН Модели (Топик, Коммент и т.п.) - в явном, либо неявном виде (как часть компонентов, редукс и т.п).
- Риакт компоненты (Топик, Коммент и т.п.)
- Обработчики событий

А с таким фреймворком половину этого кода можно выкинуть, и останется:

Сервер:
- Модели работы с Базой (Топик, Коммент и т.п.)
- Контроллеры
- Риакт-подобные компоненты (Топик, Коммент и т.п.)
- Обработчики событий

Недостатки:

Латенси. В отличии от риакта где можно делать мгновенную реакцию на события, с таким подходом всегда будет задержка. Но, на практике, она может быть настолько малой что разница между интерфейсами с мгновенной реакцией и с задержкой будет незамента. Например если сервер и пользователи в штатах - можно уложиться в задержку меньше 200мс если вообще не меньше 100.

Пример такого фреймворка , это из него скриншоты с демками, но он к сожалению на Erlang / Elixir
Я хотел бы найти что-то похожее на JavaScript/TypeScript, Ruby или на Java/Kotlin
Если знаете поделитесь пожалуйста :)

П.С.

- Метеор.ЖС работает похоже. Да, метеор делает что-то подобное, только наоборот они перенесли все на клиент. И у метеора достоинство что там нет задержки, но недостаток - он сложнее и больше кода чем данный подход..
- GraphQL, Apollo - не имеет никакого отношения к теме. ГрафКЛ это один из вариантов общения по сети, а весь смысл этого подхода в том чтобы убрать сеть в принципе.
- Vue Angular - не имеет значения, я везьде упоминал Риакт, но можно с тем-же успехом заменить на любой из них.
- Есть Java Wicked, GWT, Vaadin - да, они работают немного похоже, но у них нет виртуального ДОМ. Это половина того что надо, им всем не хватает виртуального дома чтобы стать тем о чем идет реч в этой теме.

авторгалимый asp.net webforms в 2007-м году по сути работал так, только через постбеки, и как оказалось, это нафик никому не упёрлось.Не знаю АСП, но подозреваю что было то-же что и на ГВТ - там не было виртуалного ДОМ и вместо автоматических мутаций их надо было писать вручную. Это не то, я уже упоминал почему это не то в комментах.

автордля этого надо написать код js, и не все так просто в перехвате событий их надо назначать, обрабатывать и пр...
есть куча элементов, которые реализуются приличным объёмом кода.
Посмотри пример по ссылке, там строк тридцать, хоть и на Еликсире но вобщем понятно что происходит. Там просто метку ставишь на элементе куда передавать евент, никакого кода писать не надо <button phx-click="dec" class="minus">-</button>

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

Это не серверный рендеринг, хотя на первый взгляд и похоже. То о чем я говорю совершенно другое. Перечитай еще раз что я описал.

автортакой автокомплит как на твоей картинке, у нас в одном проекте на IceFaces работает.
это обычный ажакс
код на сервере, по ажакс запросу, вернет html
который браузер вставит в нужный div
зачем на сервере виртуальный дом и дифф?
Вот именно чтобы не писать весь этот обвес который ты перечислил - для этого и нужен виртуальный дом на сервере с диффом. Вместо всего этого можно было-бы написать примерно такой код как ниже

Посредством разогнанных протонов, передаются даже раньше чем нажата кнопка. Лучше бы подумал - если они таки передаются (примеры на эликсире работают) - а у тебя нет лучшего обьяснения чем божия воля - о чем это говорит?

Потому и нужна копия виртуального дом и ДИФФ на сервере что весь процессинг происходит именно там, а браузер работает лишь как зеркало получая итоговый ДИФФ и синхронизируя свой ДОМ с серверным. Незнаю как более доходчиво написать.

Конкретно в случае Еликсира и автокомплита - на каждое нажатие клавишы будет слаться событие на сервер, сервер делает поиск в базе, рендерит страницу (на самом деле не всю, а оптимально - только фрагмент), сравнивает с текущей копией ДОМ что у него в памяти, видит что поменалась квери и список автокомплита, формирует ДИФФ, шлет по вебсокету на браузер инструкцию как применить этот ДИФФ, браузер применяет ДИФФ, пользователь видит что поиск обновился.

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

Вся страница там не передается. Я уже несколько раз обьяснял как именно - если нужно больше деталей - по ссылке есть целая статья и детальные примеры как именно это все работает.

авторумные люди передают только введённое значение, и ничего не надо сравнивать в с "копией DOM" на сервере.
надо просто сделать запрос(если мы рассматриваем твой вариант с поиском) получить данные - и сформировать html-строку, которую по ws отправить клиенту. И НИ КАКОГО DIFF!!!
эту строку можно вставить простым innerHTML.
я знаю как это всё работает без всяких статей.

Конечно можно. В обработчике события вручную описывать какие именно мутации ДОМ нужно произвести. Тыщу лет так делали, и если тебя устраивает это ручное писание - не проблема, продолжай. Но многих это не устраивает, и именно для этого и создали Riakt.JS - чтобы просто менять состояние - а мутация дом случалась автоматически. Ну так вот тут происходит то-же самое, только на сервере.

Уже в тысячный раз повторяю - именно для этого и нужна копия виртуальная ДОМ на сервере. Что в отличии от обычного серверного рендеринга про который ты постоянно упоминаешь - тут он используется не только для рендеринга изначального состояния страницы, но также и для мутаций ДОМ.

автортак что насчёт WebSharper скажете?

Спасибо за ссылку. Я посмотрел но он только для С# и F# - а я их не знаю.

авторНачал читать... И где там фреймворк? Библиотека, призванная заполнить определённые пробелы...

Основной фреймворк называется Phoenix, клон Рельсов, ничего особенного. Для него выпускается аддон LiveView - который позволяет вместо обычных контроллеров и темплейтов использовать Phoenix в стиле как-бы серверного реакта.

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

авторумные люди передают только введённое значение, и ничего не надо сравнивать в с "копией DOM" на сервере.
надо просто сделать запрос(если мы рассматриваем твой вариант с поиском) получить данные - и сформировать html-строку, которую по ws отправить клиенту. И НИ КАКОГО DIFF!!!
эту строку можно вставить простым innerHTML.
я знаю как это всё работает без всяких статей.

Я так понимаю что "... сформировать html-строку ..." и "... эту строку можно вставить простым innerHTML. ..." - все это означает написания кода типа `$('#query').text('новый поиск')` - откуда все это возмется? По божьей воле? Или это вручную предлагается писать "умные люди" разработчику?

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

Я знаю что все это делается элементарно на ЖС. Но весь смысл этого топика именно в том - что можно этого вообще не делать, и писать меньше и проще код.

Ну а по поводу что именно шлется на сервер - я не знаю что именно шлет Еликсир, подозреваю что сериализованное событие, так-же как в риакте, только по сети, там нет смысла что-то другое изобретать.