These are chat archives for dev-ua/reactjs

28th
Jan 2016
Ivan Kurnosov
@zerkms
Jan 28 2016 01:21
Господа, а в реальной жизни кто-то использует controlled inputs?
А то на формах с более чем десятком полей нажатие клавиши сопровождается некомфортной задержкой
Профайлер показывает, что реакт проводит в себе 100-150ms
И из них около 30ms как минимум в immutablejs
такая вот у нас производительная иммутабельность, мде
Sergey Rubanov
@chicoxyzzy
Jan 28 2016 01:27
иммутаблжс не нужен
Ivan Kurnosov
@zerkms
Jan 28 2016 01:29
продакшн-билд чуток получше, потому как там проптайпсов нет, но девелопмент пипец тормозной стал
@chicoxyzzy а что нужно, rxjs?
Ivan Kurnosov
@zerkms
Jan 28 2016 01:34
ну и да, на один keystroke - 16.3ms работы GC
и после этого они ещё над джавой смеются
Ingvar Stepanyan
@RReverser
Jan 28 2016 01:43
ну а чо ти хотів
за імутабельність треба платити
коли не реюзаєш уже виділений кусок пам'яті
Ivan Kurnosov
@zerkms
Jan 28 2016 02:00
@RReverser ну так на каждом заборе пишут - что иммутабельность почти бесплатна и вообще делает всё blazing fast
Ingvar Stepanyan
@RReverser
Jan 28 2016 02:01
@zerkms на заборах багато чого нехорошого пишуть, ти б ще в під'їздах на стінах читав :)
Ivan Kurnosov
@zerkms
Jan 28 2016 02:02
ну я доверчивый, да
Roman Liutikov
@roman01la
Jan 28 2016 02:02
@zerkms Как-то это подозрительно, неизменяемые структуры конечно медленнее, но не так что бы десять полей уже все тормозило. Бесплатное там только сравнение по ссылке.
Sergey Rubanov
@chicoxyzzy
Jan 28 2016 02:02
иммутабельность не настоящая, надо хеш считать и вообще
Ivan Kurnosov
@zerkms
Jan 28 2016 02:02
@roman01la я нашёл, что очень дофига времени тратится в proptypes
Roman Liutikov
@roman01la
Jan 28 2016 02:03
@zerkms Я точно могу сказать, что у меня например есть форма с десятком контролируемых полей и все норм. Может где-то еще что-то вылазит?
Ivan Kurnosov
@zerkms
Jan 28 2016 02:03
плюс форма это часть иммутабельного объекта, и там значительная часть дерева клонируется
понятно, что это лишь часть от графа, но часть там видно
Roman Liutikov
@roman01la
Jan 28 2016 02:04
а ты делаешь SCU в компонентах?
Ivan Kurnosov
@zerkms
Jan 28 2016 02:05
нед
я надеюсь на иммутабельную магию и ссылочную эквивалентность
Roman Liutikov
@roman01la
Jan 28 2016 02:06
Ну так у тебя SCU есть на компонентах значит. Или нет?
Ivan Kurnosov
@zerkms
Jan 28 2016 02:06
у меня нет, но у меня редакс
Roman Liutikov
@roman01la
Jan 28 2016 02:06
а
Ivan Kurnosov
@zerkms
Jan 28 2016 02:06
редакс делает сравнение по ссылке
Roman Liutikov
@roman01la
Jan 28 2016 02:06
да, там это есть
может редакс просто тупит?))
Roman Liutikov
@roman01la
Jan 28 2016 02:07
не уверен, но в нем, вроде бы, на каждое событие выполняются все редьюсеры, может в этом проблема
Ivan Kurnosov
@zerkms
Jan 28 2016 02:07
вот так выглядит оно же но продакшн билд
(т.е. сильно приемлемее)
Sergey Rubanov
@chicoxyzzy
Jan 28 2016 02:08
точно выполняются все, но мало кто делает тяжелые редюсеры
там половина возвращает дефолт
даже больше половины
Ivan Kurnosov
@zerkms
Jan 28 2016 02:08
так точно
Sergey Rubanov
@chicoxyzzy
Jan 28 2016 02:08
и вообще не надо их тяжелыми делать
Roman Liutikov
@roman01la
Jan 28 2016 02:09
@chicoxyzzy и он при этом не меняет состояние? когда дефолт возвращается
Ivan Kurnosov
@zerkms
Jan 28 2016 02:09
он просто возвращает переданный state
(ну как минимум это ожидается)
Roman Liutikov
@roman01la
Jan 28 2016 02:10
а, понял
блин, ну это конечно интересно
код бы глянуть :)
Ivan Kurnosov
@zerkms
Jan 28 2016 02:11
а чо его глядеть - это единственный обработчик в редюсере
    case actions.EDIT_CHANGED: {
        const { path, value } = action.payload;

        return state.setIn(['edit', 'raw', ...path], value);
    }
всё остальное - реакт
Roman Liutikov
@roman01la
Jan 28 2016 02:12
у тебя глубокое дерево состояния?
Ivan Kurnosov
@zerkms
Jan 28 2016 02:13
ну вон - 2 уровня плюс path модели (1-3 уровня)
Roman Liutikov
@roman01la
Jan 28 2016 02:13
хз в общем. я бы выкинул все редьюсеры, кроме этого и проверил производительность.
ну и можно попробовать так глубоко не писать в состояние, хотя я ничего по этому поводу сказать не могу
Ivan Kurnosov
@zerkms
Jan 28 2016 02:16
хотя погодите
подебажил тут
редакс не предоставляет никаких SCU
(это было бы неправильно)
потому у меня вообще всё вообще на каждый чих перерендеривается
Sergey Rubanov
@chicoxyzzy
Jan 28 2016 02:17
конечно не предоставляет
Roman Liutikov
@roman01la
Jan 28 2016 02:17
😂
😂😂😂
Ivan Kurnosov
@zerkms
Jan 28 2016 02:17
есть для immutablejs + redux + react что-то готовое?
раньше был миксин, а сейчас?
Sergey Rubanov
@chicoxyzzy
Jan 28 2016 02:18
ну есть reselect
Ivan Kurnosov
@zerkms
Jan 28 2016 02:18
блять ещё и гитхаб лежит
Sergey Rubanov
@chicoxyzzy
Jan 28 2016 02:18
если у тебя что-то считается в селекторах
он мемоайз по аргументам делает
Ivan Kurnosov
@zerkms
Jan 28 2016 02:19
не хочется его
есть чонить типа того самого миксина
этого вот
import React from 'react';
import { immutableRenderDecorator } from 'react-immutable-render-mixin';

class Test extends React.Component {
  render() {
    return <div></div>;
  }
}

export default immutableRenderDecorator(Test);
во, збс
Roman Liutikov
@roman01la
Jan 28 2016 02:20
та ну, можно без либ это сделать
Ivan Kurnosov
@zerkms
Jan 28 2016 02:20
можно
но npm install проще
Sergey Rubanov
@chicoxyzzy
Jan 28 2016 02:21
есть shallowEqual
Roman Liutikov
@roman01la
Jan 28 2016 02:21
ну если ты уверен, что в той либе нету мусора
я посмотрел в react-redux, там есть SCU. но это же только для умных компонентов. так что да, остальным нужен SCU
вон ещё дэн пилил чота
import shouldPureComponentUpdate from 'react-pure-render/function';

export default class Button {
  shouldComponentUpdate = shouldPureComponentUpdate;

  render() { }
}
выглядит ничо, но с лежачим гитхабом и не поглядишь
Sergey Rubanov
@chicoxyzzy
Jan 28 2016 02:23
выглядит плохо, потому что такого нет в спеке (и оно не на стейдж 3)
Roman Liutikov
@roman01la
Jan 28 2016 02:24
const purify = (Component) => {
  return React.createClass({
    shouldComponentUpdate(nextProps) {
      return shallowEqual(this.props, nextProps);
    },
    render() {
      return <Component {...this.props} />;
    }
  });
};
Ivan Kurnosov
@zerkms
Jan 28 2016 02:24
immutableRenderDecorator(Component) короче же
Sergey Rubanov
@chicoxyzzy
Jan 28 2016 02:28
там гитхаб поднялся
а я спать
Roman Liutikov
@roman01la
Jan 28 2016 02:29
@zerkms расскажи потом, стало ли быстрее
Ivan Kurnosov
@zerkms
Jan 28 2016 02:31
я уже нашёл ключик, который и immutableRenderDecorator не позволяет работать нормально
у меня там массив передаётся
грррр
чож делать
Illia Seheda
@ALF-er
Jan 28 2016 08:22
@zerkms так у тебя там иммьютабл или массив? (люблю задавать вопросы 6 часов спустя)
everdimension
@everdimension
Jan 28 2016 08:40
@zerkms а никаких ошибок отсюда не допускаешь? https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.a8krnfh3w
Nikita Gusakov
@nkt
Jan 28 2016 19:43
Народ, а кто-то пробовал прокидывать экшены сразу на сервер через веб-сокеты?
кидаем экшн {type: 'SEND_MESSAGE', payload: {...}, meta: {remote: true}}, в миддлваре отлавливаем по meta.remote, ну и в обратную сторону аналогично
Illia Seheda
@ALF-er
Jan 28 2016 19:45
профит?
Nikita Gusakov
@nkt
Jan 28 2016 19:46
расшареный код, не надо дважды писать логику поддержки состояния
у меня специфика приложения такая, что все постоянно обновляется.
Illia Seheda
@ALF-er
Jan 28 2016 19:47
Ну это самодельный релей-графкл. Уж лучше их внедрить, имхо
Nikita Gusakov
@nkt
Jan 28 2016 19:47
сразу с сервера выкидывать экшены выглядит заманчиво
не совсем. У меня у юзера есть очки/карма, как хочешь называй. Я подписываюсь на обновления и шлю ему, что обновилось
и таких вещей штук 10 и с ростом приложения они будут увеличиваться
Illia Seheda
@ALF-er
Jan 28 2016 19:48
У графкла транспорт может быть любой (и сокеты в том числе)
Nikita Gusakov
@nkt
Jan 28 2016 19:48
у графкл нет подписок, на сколько я помню
мне нужно подписаться на обновление юзера, его чатов и прочей фигни
Illia Seheda
@ALF-er
Jan 28 2016 19:48
Тут есть эджкейсы - что если обрыв соединения?
Нужен механизм очередей
Nikita Gusakov
@nkt
Jan 28 2016 19:49
это уровень транспорта
за меня его решит socket.io или аналог
Illia Seheda
@ALF-er
Jan 28 2016 19:50
Вобщем, имхо, изобретать свой велосипед смысла не вижу. Но работать должно
Nikita Gusakov
@nkt
Jan 28 2016 19:50
а что не велосипед?
Illia Seheda
@ALF-er
Jan 28 2016 19:50
графкл
Nikita Gusakov
@nkt
Jan 28 2016 19:50
говорю там нет фида
Illia Seheda
@ALF-er
Jan 28 2016 19:50
фалькон
Nikita Gusakov
@nkt
Jan 28 2016 19:51
вот банально. у нас чатик
добавляются/убираются каналы, добавляются сообщеньки
в графкл подписаться на них можно?
Illia Seheda
@ALF-er
Jan 28 2016 19:52
HTTP is just one option - GraphQL is transport independent, so you can use it with websockets or even mqtt.
Nikita Gusakov
@nkt
Jan 28 2016 19:52
ты с rethinkdb работал?)
там можно написать запрос, приписать к нему .changes() и получишь не 1 ответ, а фид
то что транспорт любой - я понял. Меня интересует возможности протокола. На сколько я помню там нет ничего про подписки
Illia Seheda
@ALF-er
Jan 28 2016 19:55
Тут тебе в точности ответит кто-то кто его юзал. Но был месяца 3 назад какой-то пример где графкл гонялся по сокетам и там именно приходили пуши с сервера на клиент
Vyacheslav Slinko
@vslinko
Jan 28 2016 20:06
в graphql подписка есть
ее нет (пока) в relay
@nkt мне твои мысли напоминают promise pipe
everdimension
@everdimension
Jan 28 2016 20:29

@nkt

а кто-то пробовал прокидывать экшены сразу на сервер через веб-сокеты?

Вот здесь в общем-то описано именно это: http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html#dispatching-actions-from-react-components

Hi in react can you guys Tell me how to send analytics data when page loads
Ivan Kurnosov
@zerkms
Jan 28 2016 20:55
@ALF-er @roman01la @everdimension кароче нашёл проблему: она всё таки оказалась в immutablejs (или том, как я его использую)
а именно: у меня там рядом с live данными формы лежит "здоровый" OrderedMap на ~1100 элементов
если его убрать - всё становится сразу быстро
а виноват судя по всему ImmutablePropTypes, который я использую в качестве хелпера для проверки типов
дальше дебажить пока лениво
но факт - это вон тот вон тысячаэлементный словарь который всё тормозит