Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
Топик располагается на нескольких страницах: [1] 2 3 4   вперед  Ctrl      все
 Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
private
Member

Откуда:
Сообщений: 1667
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 - да, они работают немного похоже, но у них нет виртуального ДОМ. Это половина того что надо, им всем не хватает виртуального дома чтобы стать тем о чем идет реч в этой теме.
16 дек 18, 17:14    [21765387]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
hVostt
Member

Откуда:
Сообщений: 15085
private,

галимый asp.net webforms в 2007-м году по сути работал так, только через постбеки, и как оказалось, это нафик никому не упёрлось.

и вот, история повторяется.

сначала метеор. то, что он тоже нафик никому не упёрся, никого не волнует, теперь с б и ш на риакте!

ахаха.. чото ржу.

МММАаааааААГИЯ!!
16 дек 18, 17:25    [21765398]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
hVostt
Member

Откуда:
Сообщений: 15085
private
Простой и краткий код, его меньше чуть ли не в 2 раза и он проще. Можно делать приложения быстрее и дешевле и получать больше бабок.


да, надо мужикам рассказать во всем мире.
а то они того.. тупенькие.. не знают.
16 дек 18, 17:27    [21765402]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15065
private
- Сервер стейтфул, он поддерживает в памяти структуру данных похожую на Риакт компонент - с состоянием и методом рендер. Сервер также хранит виртуальную копию ДОМ браузера. Когда приходит событие - сервер запускает обработчик события. Затем запускает метод рендер. И сравнивает новый ДОМ с тем что был у него в памяти до этого. Формирует ДИФФ, и отправляет разницу браузеру. Все работает очень похоже на риакт, только на сервере.
- Клиент получает ДИФФ от сервера, применяет его к своему ДОММ, и все магическим образом обновляется.
полная путаница.
на сервере не надо хранить дом, не надо иметь разницу, это лишняя работа.
то что ты ту описываешь - называется серверный рендеринг, но это работает совсем по другому.
private
- Когда шелкается кнопка на клиенте - событие перехватывается и пересылается на сервер
для этого надо написать код js, и не все так просто в перехвате событий их надо назначать, обрабатывать и пр...
есть куча элементов, которые реализуются приличным объёмом кода.
16 дек 18, 17:30    [21765404]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15065
hVostt
да, надо мужикам рассказать во всем мире.
а то они того.. тупенькие.. не знают.
солидарен на 146%
16 дек 18, 17:31    [21765406]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
private
Member

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

автор
для этого надо написать код js, и не все так просто в перехвате событий их надо назначать, обрабатывать и пр...
есть куча элементов, которые реализуются приличным объёмом кода.

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

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

Это не серверный рендеринг, хотя на первый взгляд и похоже. То о чем я говорю совершенно другое. Перечитай еще раз что я описал.
16 дек 18, 17:41    [21765413]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
казинак
Member

Откуда:
Сообщений: 1215
private,

такой автокомплит как на твоей картинке, у нас в одном проекте на IceFaces работает.
это обычный ажакс
код на сервере, по ажакс запросу, вернет html
который браузер вставит в нужный div
зачем на сервере виртуальный дом и дифф?
16 дек 18, 17:52    [21765423]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
вадя
Member

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

private
<button phx-click="dec" class="minus">-</button>
ну вообще-то для избавления от такого
phx-click и был придуман атрибут "data-*"
16 дек 18, 17:54    [21765425]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
Дмитрий Мух
Member

Откуда: Зеленоград
Сообщений: 986
private,

WebSharper? Попробуй онлайн: https://try.websharper.com/
16 дек 18, 17:59    [21765429]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
private
Member

Откуда:
Сообщений: 1667
автор
такой автокомплит как на твоей картинке, у нас в одном проекте на IceFaces работает.
это обычный ажакс
код на сервере, по ажакс запросу, вернет html
который браузер вставит в нужный div
зачем на сервере виртуальный дом и дифф?

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

class Autocomplete extends MagicServerSideComponent {
  state = { 
    query: '',
    found: []
  }

  render = () =>
    <div>
      <input on-change="lookup" value={this.state.query}/>
      {this.state.found.map((text) => <p>{text}<p>)}
    </div>

  lookup = (query) => 
    this.setState({ 
      query,

      // Вся магия ради одной этой строчки, прямой запрос в базу данных. 
      // Без всяких аджаксов, графкл и прочего обвеса.
      // И этот код выполняется не на клиенте, а на сервере. Поэтому запрос в базу безопасный.
      found: await db.findAll('where name like query')
    })
}
16 дек 18, 19:19    [21765478]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15065
private
// Без всяких аджаксов, графкл и прочего обвеса.
// И этот код выполняется не на клиенте, а на сервере. Поэтому запрос в базу безопасный.

ЭТО СУПЕР!
данные между клиентом и сервером передаются с помощью божьей воли
16 дек 18, 19:25    [21765480]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
private
Member

Откуда:
Сообщений: 1667
Посредством разогнанных протонов, передаются даже раньше чем нажата кнопка. Лучше бы подумал - если они таки передаются (примеры на эликсире работают) - а у тебя нет лучшего обьяснения чем божия воля - о чем это говорит?
16 дек 18, 19:35    [21765483]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
private
Member

Откуда:
Сообщений: 1667
Потому и нужна копия виртуального дом и ДИФФ на сервере что весь процессинг происходит именно там, а браузер работает лишь как зеркало получая итоговый ДИФФ и синхронизируя свой ДОМ с серверным. Незнаю как более доходчиво написать.
16 дек 18, 19:41    [21765484]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15065
private
Лучше бы подумал - если они таки передаются (примеры на эликсире работают) - а у тебя нет лучшего обьяснения чем божия воля - о чем это говорит?
я могу перечислить все способы передачи.
но нет ни одного который работает без "обвеса"
Вообще "запрос в базу безопасный" это даже не обсуждается, т.к. делать запрос на клиенте - это супер дурость.
"Без всяких аджаксов" можно , к примеру это websocket, но это тоже требует "обвес".
16 дек 18, 19:46    [21765486]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
private
Member

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

Все это происходит автоматически без моего участия, я не знаю, и не пишу никакой обвес, мне вообще без разницы как это случается по божьей воле, вебсоктам или еще как-то. Для меня все это магия которая работает автоматом и в итоге я пишу меньше кода и завершаю проект быстрее.
16 дек 18, 19:49    [21765487]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15065
private
Потому и нужна копия виртуального дом и ДИФФ на сервере что весь процессинг происходит именно там, а браузер работает лишь как зеркало получая итоговый ДИФФ и синхронизируя свой ДОМ с серверным. Незнаю как более доходчиво написать.
НАХ...?
передать весь html страницы чтоб там найти что-то введённое в input? это ж надо до этого додуматься!!!
16 дек 18, 19:49    [21765488]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
private
Member

Откуда:
Сообщений: 1667
Вся страница там не передается. Я уже несколько раз обьяснял как именно - если нужно больше деталей - по ссылке есть целая статья и детальные примеры как именно это все работает.
16 дек 18, 19:54    [21765489]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15065
private
на каждое нажатие клавишы будет слаться событие на сервер,
на сервер никакого события не может слаться! На сервер может отправится только строка.
private
шлет по вебсокету
ну это уже прогресс - нашёл ws.
Ещё раз - это называется "серверный рендеринг" и для этого не надо никакой копии DOM на сервере.
если тебе нужна эта "магия" - возьми любой fw - и получишь твою фантазию.
16 дек 18, 19:56    [21765490]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15065
private
Вся страница там не передается. Я уже несколько раз обьяснял как именно - если нужно больше деталей - по ссылке есть целая статья и детальные примеры как именно это все работает.
умные люди передают только введённое значение, и ничего не надо сравнивать в с "копией DOM" на сервере.
надо просто сделать запрос(если мы рассматриваем твой вариант с поиском) получить данные - и сформировать html-строку, которую по ws отправить клиенту. И НИ КАКОГО DIFF!!!
эту строку можно вставить простым innerHTML.
я знаю как это всё работает без всяких статей.
16 дек 18, 20:02    [21765494]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
Дмитрий Мух
Member

Откуда: Зеленоград
Сообщений: 986
private,

так что насчёт WebSharper скажете?
16 дек 18, 20:07    [21765497]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
MaratIsk
Member

Откуда: Astana, Kazakhstan
Сообщений: 2444
что можно обсуждать с дилетантом?!
16 дек 18, 20:21    [21765501]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
Дмитрий Мух
Member

Откуда: Зеленоград
Сообщений: 986
private
Пример такого фреймворка, это из него скриншоты с демками, но он к сожалению на Erlang / Elixir

Начал читать... И где там фреймворк? Библиотека, призванная заполнить определённые пробелы...
16 дек 18, 20:29    [21765504]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
private
Member

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


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

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

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


Спасибо за ссылку. Я посмотрел но он только для С# и F# - а я их не знаю.
16 дек 18, 20:36    [21765507]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
private
Member

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


Основной фреймворк называется Phoenix, клон Рельсов, ничего особенного. Для него выпускается аддон LiveView - который позволяет вместо обычных контроллеров и темплейтов использовать Phoenix в стиле как-бы серверного реакта.
16 дек 18, 20:38    [21765509]     Ответить | Цитировать Сообщить модератору
 Re: Огромная продуктивность, в разы меньше и проще кода чем с SPA и React.JS  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15065
private
В обработчике события вручную описывать какие именно мутации ДОМ нужно произвести. Тыщу лет так делали, и если тебя устраивает это ручное писание - не проблема, продолжай. Но многих это не устраивает, и именно для этого и создали Riakt.JS - чтобы просто менять состояние - а мутация дом случалась автоматически. Ну так вот тут происходит то-же самое, только на сервере.
какие слова! только для того чтоб прикрыть глупость.
private
Вся страница там не передается.
а что передаётся? весь тэг input?
private
но также и для мутаций ДОМ.
кажется мутация произошла...
16 дек 18, 20:41    [21765511]     Ответить | Цитировать Сообщить модератору
Топик располагается на нескольких страницах: [1] 2 3 4   вперед  Ctrl      все
Все форумы / HTML, JavaScript, VBScript, CSS Ответить