LINUX.ORG.RU
ФорумTalks

Реактивное программирование

 , , ,


0

1

Проходил в пятницу собеседование на пых-пых-погроммиста и по совместительству жава-скрипт-кидди, в общем на дефолтную должность офисного нерда в клетке с бдсм-наклонностями. Эйчарка была не в теме всего этого гогна, потому ее не трудно было поразить знаниями до ночных поллюций, тем не менее, ей удалось таки ввести меня в ступор вопросом о знании реактивного программирования — что за ...ня? Чем это принципиально отличается от аякс-запросов в местах, где нужны изменения, зачем вообще понадобилась новая парадигма?


Логика работы с данными не прямо, а через прокладки, чем больше прокладок тем сильнее реактивность.

Int0l ★★ ()

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

ya-betmen ★★★★★ ()

Чем это принципиально отличается от аякс-запросов в местах, где нужны изменения

Тем, что запросов к серверу может не быть. Вся суть в автоматическом пересчёте одних полей при изменении других и декларативном описании зависимостей. Ну как в электронных таблицах.

static_lab ★★★★★ ()

Чем это принципиально отличается от аякс-запросов в местах, где нужны изменения, зачем вообще понадобилась новая парадигма?

Попрошаек в какой-то момент появилось слишком много, и оказалось проще один раз кидать инфу, а попрошайки уже сами там поймают че им надо.

Nirdosh ()
Ответ на: комментарий от Vit

Реактивное - оно обычно сверхзвуковое

Обычно оно как раз дозвуковое.

tailgunner ★★★★★ ()

реактивного программирования — что за ...ня

В контексте веба скорее всего имелся в виду reactor pattern.

no-such-file ★★★★★ ()

Дилетант пришел рассказать о реактивности

Реактивное программирование
Чем это принципиально отличается от аякс-запросов в местах, где нужны изменения, зачем вообще понадобилась новая парадигма?

А причем здесь AJAX запросы? реактивность подразумевает распространение изменений по средством observable pattern. Простой пример это инпут куда пользователь вводит значение, а это значение реалтаймово обновляется в 10 местах на странице (это очень упрощенный пример, в реальных приложениях все сложнее но суть такова). Собственно для того что бы это не делать в ручную используют Vue, что бы это делать в полу ручном режиме React и компанию. Остальные о реактивности только слышали но не понимали что это.

Пример по сложнее.

У нас есть список каких либо свойств. Каждый из них может быть вкл/выкл.

var options = {
  prop1: false,
  prop2: true,
  ...
}

От каждого из свойист зависит то или иное состояние страницы (формат отображение даты (или другого значения), наличие панели и или тому подобное). Реактивное программирование подразумевает что простое:

option.prop1 = true;
вызовет все необходимые перерасчеты относящиеся к тому свойству.

PS: все выше сказанное может не распространяться на Real World и быть лишь моей больной фантазией.

Noob_Linux ★★★ ()
Последнее исправление: Noob_Linux (всего исправлений: 2)
Ответ на: комментарий от buddhist

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

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

makoven ★★★★★ ()
Ответ на: комментарий от makoven

<?php trolle_mod(true) ?>

В хорошем интернет магазине на Vue ты накидаешь товыры в список покупок и удобно их посмотришь в режиме сравнения. И все это в пределах одной вкладки. Без единой перезагрузки. Жаль что таких магазинов не делают в 2008ом.

<?php trolle_mod(false) ?>

Noob_Linux ★★★ ()
Последнее исправление: Noob_Linux (всего исправлений: 2)

Повторяю вопрос, чем это отличается от аякс запроса для изменений всего необходимого барахла при изменении другого? Что в этом принципиально нового, что аж потребовалось новое название?

shiva ()

Собственно для того что бы это не делать в ручную используют Vue, что бы это делать в полу ручном режиме React и компанию

У меня пригорело от Vue. Запилил небольшой проектик - всё круто, всё работает. Компоненты только по 3 файла на компонент: js, html, css. Дай, думаю, приведу в божеский вид, запихну всё в *.vue.

Запихнул..Vscode предложил поставить vetur. Vetur ставился минут 5. После перезагрузки редактора ничего не поменялось. В дебаг-консоли выяснилось, что ветур рухнул. Пошел в ~/.vscode смотреть чему там рушится и при**ел. Аддон весит 140 метров, в него запихнули languageserver и typescript. Я **ал такие аддоны, размером, большие чем редактор. У меня от папки node_modules размером 35 метров бомбит, а тут 140 метров для нового синтаксиса

Ладно, думаю, зайдем с другой стороны. Ставлю синтаксис для Vue - Vue 2 Snippets. Ура! Файл разукрасился. Но, постойте. Автоформат в .vue не работает. Интелисенс тоже: причем ни для чего из трех (html, css, js)

Плюясь переписываю всё на react. Благо jsx сегодня поддерживают все

makoven ★★★★★ ()
Последнее исправление: makoven (всего исправлений: 2)
Ответ на: комментарий от makoven

У нового нет жабафх скрипта, там такой же жабокод как и везде.

ya-betmen ★★★★★ ()
Ответ на: комментарий от shiva

Тем что «изменений всего необходимого барахла» происходит автоматически. Но учитывая что ты опять говоришь про ajax запрос ты не понял то что я говорил.

Noob_Linux ★★★ ()
Ответ на: комментарий от makoven

Меня тока вебпак раздражает своими сборками по 6-8 секунд на ссд, а node_modules так у меня в среднем по 400-800 Мбайт. Туда часто пихают всякие недобраузеры для тестов.

menangen ★★★★★ ()
Ответ на: комментарий от menangen

Может это бабель или тайпскрипт медлит, а не сам вебпак? Тайпскрипт у меня на хдд (просто из командной строки, без запущенного вебпак вотчера) компилится секунд 10

makoven ★★★★★ ()
Последнее исправление: makoven (всего исправлений: 2)
Ответ на: комментарий от makoven

Ну, там же винегрет из всяких vue-template-compiler, sass, pug и прочего в .vue, даже инкрементные сборки работают 1 сек, что после rollup дико раздражает, там инкрементные сборки были около 60-100 мс, при том, что в вебпаке настроена сборка vendor в отдельный файл. Надо попробовать последнюю версию вебпака с вью компиляторами последних версий, но обычно они все работают неспешно в силу HMR в вебпаке.

menangen ★★★★★ ()
Ответ на: комментарий от makoven

Странно, у меня все быстро подхватило.
Тем не менее плеваться от жаваскрипта я не перестал. Хотел было по старой памяти вкорячить typescript, но не понятно что там с поддержкой в vue, вроде МС слала им патчи.
В общем пока пишу jsdoc, чтобы не запутаться во всем этом дерьме. А еще vuex с его строками везде где-только можно — тоже какая-то из БДСМ практик.

ritsufag ★★★★★ ()

Реактивное программирование

Это когда юзер взлетает с кресла на реактивной тяге включив жаваскрип в браузере.

bread ()
Ответ на: комментарий от ritsufag

vuex с его строками везде где-только можно

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

makoven ★★★★★ ()
Ответ на: комментарий от ritsufag

Я не очень понял зачем оно вообще. Все-равно ссылка на стор присутствует в том месте, где вызывается экшон. Почему просто не вызывать метод этого стора

makoven ★★★★★ ()
Ответ на: комментарий от ritsufag

Хотел было по старой памяти вкорячить typescript

Ну вот в реакт его проще вкорячить. JSX прям в TS есть)

makoven ★★★★★ ()
Ответ на: комментарий от makoven

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

ritsufag ★★★★★ ()
Ответ на: комментарий от ritsufag

Например когда одна мутация вызывается в куче экшонов

Все-равно не понятно. В экшн, стор передается аргументом. Ничто не мешает вызвать store.mutations.some_mutation(). Ну да ладно

Да и сами мутации вполне допускается использовать и в компонентах

Так опять-же через this.$store.commit(). Ссылка на стор присутствует в каждом компоненте. Какой тогда профит от этих строковых недоэвентов..

makoven ★★★★★ ()
Последнее исправление: makoven (всего исправлений: 1)
Ответ на: комментарий от makoven

Там не сам стор а контекст. Доступа к мутациям же нет.

Так опять-же через this.$store.commit(). Ссылка на стор присутствует..

На стор есть, а в коммит у тебя опять же пойдет строка с именем мутации и payload.
Константы с именами именно для того чтобы сгладить весь этот треш со строками.

ritsufag ★★★★★ ()
Ответ на: комментарий от makoven

Эмм. А нельзя объявить discriminated union со всеми названиями экшнов и сказать «dispatch принимает строки только из него, ключи в actions — тоже обязаны быть из него»?

x3al ★★★★★ ()

Короче, выполняешь псевдокод:

b = 2; c = 3;
a = b + c;

c = 4;

printf("a = %i, b = %i, c = %i\n", a, b, c);
При императивном программировании вывод будет таким:
a = 5, b = 2, c = 4
Но при реактивном b и c продолжают влиять на a:
a = 6, b = 2, c = 4

Deleted ()
Ответ на: комментарий от abraziv_whiskey

Это когда хороший выхлоп.

Под выхлопом подразумевается степень воспламенения пердака от суммы оплаты за работу?

Siado ★★★★★ ()
Ответ на: комментарий от makoven

Мне тоже не нравится реализация vuex/redux. Самое интересное, что большинство приложений легко можно реализовать с нативными вью событиями или с вью реактивностью через аналог шины (как у них в доках показано), главное, делать не одно хранилище, а несколько, ну и мутации с экшенами можно разнести по es6 модулям, подключить к нужному стору и всё отлично, не понимаю че хорошего в vuex, кроме «стандартизации» ну и пару фич типа иерархии и, возможно, истории слепков состояний стейта - и то, не уверен, есть ли это в vuex...

menangen ★★★★★ ()
Ответ на: комментарий от menangen

Буду пробовать parcel сборщик заместо webpack и rollup, по причине наличия hmr (чего нет в роллапе) и ускорения сборки (webpack реально срет че-то в конечный код и время сборки жирнеет основательно).

menangen ★★★★★ ()
Ответ на: комментарий от menangen

Расскажи потом как) Но терзают меня смутные сомнения, что плагины для него такие же заброшенные, как в rollup (ts плагин качает в себя ts 1.7, лол), т.к. вся движуха пока что вокруг вебпака

makoven ★★★★★ ()

Чем это принципиально отличается от аякс-запросов в местах, где нужны изменения, зачем вообще понадобилась новая парадигма?

У тебя на странице десять раз отображается значение переменной helloWorld.

Ты живёшь и не тужишь, пока не отправишь AJAX-запрос на сервер.
В ответ ты получаешь новое значение для helloWorld.

Если ты НЕ используешь реактивность, то тебе нужно будет в десяти местах на твоей странице изменить значение. Руками.

Если ты используешь реактивность, то ты изменяешь значение только один раз. В остальных местах супермегареактивный фреймворк всё сделает за тебя.

blackst0ne ★★★★★ ()
Ответ на: комментарий от Noob_Linux

Она всего одна - Web/PhpStorm

Нашел на варезниках с кряком и кейгеном, скинул в папку с Denwer'ом, все отлично запускается через wine. Спасибо :)

makoven ★★★★★ ()
Последнее исправление: makoven (всего исправлений: 3)
Ответ на: комментарий от makoven

Люк, используй нативную версию. Благо на просторах интернета есть добрые люди любезно раздающие лицензии бесплатно)

Noob_Linux ★★★ ()
Ответ на: комментарий от blackst0ne

Если ты используешь реактивность, то ты изменяешь значение только один раз. В остальных местах супермегареактивный фреймворк всё сделает за тебя.

Ага, в течение трех минут неистово завывая кулером. (А еще он немножечко майнит)

bread ()
Ответ на: комментарий от makoven

1) У них есть нативная версия под Linux

2) Если хорошо погуглить, то можно найти пиратские ключи, сервера лицензий (как готовые URL, так и бинарник, чтобы поднять пиратский сервер на localhost для личного пользования. А если студент, то можно официально получить халяву на год с возможностью продлевать, пока остаешься студентом.

В общем, торренты и wine не нужны в данном случае, брось каку.

KivApple ★★★★★ ()
Последнее исправление: KivApple (всего исправлений: 4)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.