These are chat archives for dev-ua/reactjs

24th
Aug 2015
Ivan Kurnosov
@zerkms
Aug 24 2015 00:06
Господа, кто юзал какие-нибудь гриды с реактом?
Много не нужно: лениво рендерить только показываемое и предоставлять хоть какие-то ручки для кастомизации рядов/ячеек
Вкрутили и начали было юзать https://github.com/zippyui/react-datagrid но он что-то совсем говна кусок оказался
Ivan Kurnosov
@zerkms
Aug 24 2015 00:19
Ну и relevant: стейт внутри "тупых" компонентов это таки зло
Ivan Kurnosov
@zerkms
Aug 24 2015 03:55
Официально: приличных гридов для реакта нет
Alexey Raspopov
@alexeyraspopov
Aug 24 2015 06:06

стейт внутри "тупых" компонентов это таки зло

так если они со стейтом, значит не тупые, нэ?

Eldar Djafarov
@edjafarov
Aug 24 2015 06:56
@zerkms мне кажется что гридов нет и не будет
бо на реакте запилить грид очень просто
с кастомайзными ячейками
function CommonList(ItemComp){
  return React.createClass({
    render: {this.props.items && this.props.items.map(ItemComp)}
  });
}
Eldar Djafarov
@edjafarov
Aug 24 2015 07:03
а для ленивости там будет немного математики ну и будет внутренний стейт для определения области видимости
запилить такой компонент не больше дня у тебя займет и он будет очень чистым и понятным
Ivan Kurnosov
@zerkms
Aug 24 2015 07:22

так если они со стейтом, значит не тупые, нэ?

для моего приложения они тупые - я только пропсы им передаю. снаружи они выглядят как тупые

запилить такой компонент не больше дня у тебя займет и он будет очень чистым и понятным

Вот я за час уже напилил что-то с чем я хотя бы смогу продолжить разработку

а то блять 2 дня воевал сначала с одним, потом с другим
Illia Seheda
@ALF-er
Aug 24 2015 07:23
так снаружи все комопненты выглядят тупыми
"принимают пропсы, рендерять чего-то"
Ivan Kurnosov
@zerkms
Aug 24 2015 07:26
ладно, это вопрос терминологии. я ожидал, что он будет тупым, потому что он таковым должен быть
Eldar Djafarov
@edjafarov
Aug 24 2015 07:26
Тупой компонент не взаимодействует ни с чем кроме пропсов
Ivan Kurnosov
@zerkms
Aug 24 2015 07:28
в одном гриде внутри ваще лапша была, а в другом почище
НО
второй, что забавно, своё внутреннее состояние строил из первоначально переданных стейтов
Eldar Djafarov
@edjafarov
Aug 24 2015 07:29
@zerkms А что в этом такого ужасного?
Ivan Kurnosov
@zerkms
Aug 24 2015 07:29
и удивляло, что одни и те же данные, переданные в разном порядке рендерятся по-разному
Ну потому что если ты грид - то ты просто берёшь данные которые тебе передали и отображаешь их )
Всё просто же
Eldar Djafarov
@edjafarov
Aug 24 2015 07:30
:) а вот тема с сортировкой?
Ivan Kurnosov
@zerkms
Aug 24 2015 07:30
до сортировки даже не дошёл
Eldar Djafarov
@edjafarov
Aug 24 2015 07:30
Когда в гридах начинают накручивать функционал
Ivan Kurnosov
@zerkms
Aug 24 2015 07:30
и вот сегодня тот самый день
когда я понял
Eldar Djafarov
@edjafarov
Aug 24 2015 07:30
Всегда становится треш
Ivan Kurnosov
@zerkms
Aug 24 2015 07:30
что в extjs гриды ещё очень даже ничего
Eldar Djafarov
@edjafarov
Aug 24 2015 07:31
Мне кажется что просто не надо делать цельный компонент
Illia Seheda
@ALF-er
Aug 24 2015 07:31
У меня уточнённое определение: тупой комопнент не имеет сайд эффектов и не пользуется стейтом
Eldar Djafarov
@edjafarov
Aug 24 2015 07:31
Он всегда черезчур сложен
Нужен набор хелперов, типа сортеров пейжинаторов хедеров из которых можно собрать любой грид
Тоесть чтоб он был не конфигурируем, а композируем
Illia Seheda
@ALF-er
Aug 24 2015 07:33

Тоесть чтоб он был не конфигурируем, а композируем

Аминь!

Ivan Kurnosov
@zerkms
Aug 24 2015 07:33
напишите мне такой, мы конторой даже лицензию купим
лишь бы не писать с нуля
Illia Seheda
@ALF-er
Aug 24 2015 07:36
Как там тот сайт где можно закинуть такую просьбу, а какой-то программер из мира и со свободным временем её выполняет и получает за это денюжку
Ivan Kurnosov
@zerkms
Aug 24 2015 07:36
какие-то уже понаписали вон
Illia Seheda
@ALF-er
Aug 24 2015 07:37
Вроде там ты выплачиваешь именно тому кто сделал это на таком уровне качества который нужен тебе. А остальные просто "потренировались"
Olexiy
@leshikhacker
Aug 24 2015 07:38
topcoder-а типа
Eugene Krevenets
@hyzhak
Aug 24 2015 07:56
После видео https://www.youtube.com/watch?v=Sla-DkvmIHY решил подключить i18n к React приложению использую https://github.com/yahoo/react-intl/, но с удивлением заметил, что они обходят стороной, подгрузку словарей и realtime переключение языка. Кто-нибудь может объяснить, почему так и почему i18next не побрезговал реализовать такой функционал? Может вам попадался пример как правильно это делать на React-Intl?
Illia Seheda
@ALF-er
Aug 24 2015 08:08
было мелкое обсуждение когда только вышло это видео. Мы тогда ещё не смотрели на весь функционал либы но была мысль, что в топку этот Реакт-Интл и надо юзать просто полифил Интл
Illia Seheda
@ALF-er
Aug 24 2015 08:17
да, вроде он
Eugene Krevenets
@hyzhak
Aug 24 2015 08:19
я так понимаю, что там тоже ничего не реализовано в плане загрузки словарей и переключения языка, верно?
Illia Seheda
@ALF-er
Aug 24 2015 08:20
хз =)
Если посмотреть сбоку, то загрузка словарей - это просто загрузка новых модулей
В чём сложность?
вроде вот это о нём https://github.com/andyearnshaw/Intl.js/#locale-data
Eugene Krevenets
@hyzhak
Aug 24 2015 08:23
сложности нет - не хочется велосипедить. Как бы задача которая должна повторяться из приложения в приложения, и как уже писал в i18n она реализована
Illia Seheda
@ALF-er
Aug 24 2015 08:26
ну... как обычно, разные уровни реализации. Кто-то ставит целью сделать только самое необходимое не привязывающее к каким-то особенностям реализации но требующее больше понимания процессов. А кто-то задаётся целью сделать комбайн который просто включить но настроить тонко сложно
Eugene Krevenets
@hyzhak
Aug 24 2015 08:40
https://github.com/andyearnshaw/Intl.js/blob/master/src/core.js#L2730 судя по исходникам все же __addLocaleData подгружает данные для времени и чисел и обходит стороной общие словари
Illya Klymov
@xanf
Aug 24 2015 09:07
тупой вопрос, flow и декораторы так и не подружить? :(
issue у flow нашел, но хочется верить в чудо
Illia Seheda
@ALF-er
Aug 24 2015 09:11
вроде как не подружить
вроде даже const не подружить пока с flow =(
Illya Klymov
@xanf
Aug 24 2015 09:12
эх
а счастье было так рядом :)
Ilya Silchenkov
@gitrus
Aug 24 2015 09:12
А griddle react? В тему к гридам.
Illya Klymov
@xanf
Aug 24 2015 09:13
прийдется юзать дальше неполный babel-plugin-typecheck
Illia Seheda
@ALF-er
Aug 24 2015 09:14

А griddle react? В тему к гридам.

очень не советую. Тот самый комбайн с кучей зависимостей...

- Мальчик, у тебя есть андерскор?
- Неа, у меня лодаш!
- На тебе мальчик андерскор к твоему лодашу
Illya Klymov
@xanf
Aug 24 2015 09:14
:)
Illia Seheda
@ALF-er
Aug 24 2015 09:15
хотя, если вам сделать прототип, то он работает норм
Ivan Kurnosov
@zerkms
Aug 24 2015 09:25
@GiTRuS гридл плохо кастомизируется и дофига в стейте хранит: нельзя перерендерить другие данные в тот же компонент
он из первого ряда инициализирует своё состояние всякой метаинформацией
итого если ты отрендеришь пустой массив, то при попытке перерендерить он сходит с ума
вон у фейсбука в презентациях были клёвые гриды, но они их не опенсорсят (?)
Illia Seheda
@ALF-er
Aug 24 2015 09:28
опенсорсят... но, что-то в последнее время народ жалуется, что там есть баги
Ivan Kurnosov
@zerkms
Aug 24 2015 09:29
счас дэн с себастьяном навалятся и не будет багов
Illia Seheda
@ALF-er
Aug 24 2015 09:29
ню, ню
Ivan Kurnosov
@zerkms
Aug 24 2015 09:29
а, ну это тот самый который даже на своих демках глючит
гридл хотя бы смогли демки свои отрендерить без проблем
надо запилить убергрид и продавать его за ярд
Vyacheslav Slinko
@vslinko
Aug 24 2015 10:02
вопрос к кложаскриптерам — насколько возможно жить в смешанной среде js/cljs?
а именно оставить глупые компоненты в js, для верстака
Sergey Rubanov
@chicoxyzzy
Aug 24 2015 10:28
что было за эти выходные?
Ivan Kurnosov
@zerkms
Aug 24 2015 10:29
играли в гольф, кушали барбекю
Sergey Rubanov
@chicoxyzzy
Aug 24 2015 10:29

вопрос к кложаскриптерам — насколько возможно жить в смешанной среде js/cljs?
а именно оставить глупые компоненты в js, для верстака

можно жить. вопрос сборки

играли в гольф, кушали барбекю

флюксов новых не написали?

Ivan Kurnosov
@zerkms
Aug 24 2015 10:30
One cannot simply not release another flux in the weekend
Nikita Gusakov
@nkt
Aug 24 2015 10:45
Если кто-то задумывается брать alt.js в качестве флакса, на мой взгляд - плохая идея. Сейчас проектик есть, хочется на что-то другое перейти. Во первых есть неявная магия в стейте/экшенах, во вторых, что гораздо важнее - alt зачем-то мьютит все ошибки, дебаг превращается в ад
Andrei Sierkov
@viattik
Aug 24 2015 10:46
а что вообще лучше всего брать в качестве флакса? после одессажс загорелся реактом, но пока стек полностью не выбрал. и что по билд тулзам хорошо на реакт ложится?
Nikita Gusakov
@nkt
Aug 24 2015 10:47
с девтулами все очень хорошо у redux
вокруг него куча шумихи, есть стабильный релиз, появилась кучка подробных туториалов. Сам на него сейчас смотрю
Ivan Kurnosov
@zerkms
Aug 24 2015 10:48
Что ни выбери - всё равно будешь ругаться
(но очень часто потому что сам балбес)
Nikita Gusakov
@nkt
Aug 24 2015 10:49
FB оригинальный flux потихоньку, впрочем, тоже пилит. Вышел redux, у fb вышли flux tools. ReduceStore в частности
Ivan Kurnosov
@zerkms
Aug 24 2015 10:49
Я после reflux обжился вот с redux - норм
По сути самое главное что пишешь, любые flux'ы это шелуха вокруг твоего кода
Illya Klymov
@xanf
Aug 24 2015 10:50
я сейчас вообще использую baobab (который вобщем-то не флюкс вообще)
Ivan Kurnosov
@zerkms
Aug 24 2015 10:50
которой после некоторого времени разработки не касаешься практически никак
Nikita Gusakov
@nkt
Aug 24 2015 10:52
на мой взгляд главное скорость старта и дальнейшей поддержки. Так, чтобы в дальнейшем не пришлось локти кусать. Для этого в частности надо стараться делать как можно меньше умных компонентов. Если что-то такое нужно - контейнеры пилишь.
Но вот с тем же alt, просто идиотский идиотизм
Illya Klymov
@xanf
Aug 24 2015 10:52
а для тех кто не настоящий сварщик а только маску нашел
умные компоненты = компоненты которые слишком много знают / хранят в своем стейте?
Nikita Gusakov
@nkt
Aug 24 2015 10:53
если в конструкторе this.foo = null; не объявишь в сторе, то потом невозможно стейт через стандартный интерфейс менять. Ошибок нет, нихрена нет, сидишь и репу чешешь.

Тупой компонент - это такой компонент, который не содержит состояние приложения, прямо на него не влияет и не зависит. Обычно рендринг меняется только в зависимости от пропсов, хотя может иметь состояние, но связанное только с ним. На пример checkbox может иметь состояние checked.
Умный компонент - это такой компонент, который может содержать часть или все состояние приложения, может прямо на него влиять и напрямую от него зависит. Тупой компонент рендрит только 1 дочерний компонент, в который передает все нужные данные и обработчики событий.

Это мое представление, на правду в последней интсанции не претендую)

Illya Klymov
@xanf
Aug 24 2015 10:54
ок, где-то так я это себе и представлял
мне сейчас очень cerebral нравится
Andrei Sierkov
@viattik
Aug 24 2015 11:00
приблизительно понял, спасибо)
Sergey Rubanov
@chicoxyzzy
Aug 24 2015 11:02

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

я вот не согласен

альт очень хорош и отлаживать его весело и здорово
по сравнению со всем остальным что у меня есть в продакшне он на втором месте из всех
Illya Klymov
@xanf
Aug 24 2015 11:05
@chicoxyzzy а что же на первом?
Sergey Rubanov
@chicoxyzzy
Aug 24 2015 11:05
flummox (rip)
на самом деле главное не юзать reflux, delorean, fynx и прочую хуету, все остальное норм и с ними можно жить
Andrei Sierkov
@viattik
Aug 24 2015 11:07
а что плохого в reflux’e?
Sergey Rubanov
@chicoxyzzy
Aug 24 2015 11:08
начинается :)
Andrei Sierkov
@viattik
Aug 24 2015 11:08
это я не защищаю, а интересуюсь, если что)
т.к. у меня пока опыта совсем нет)
Sergey Rubanov
@chicoxyzzy
Aug 24 2015 11:09
reflux пошел не по тому пути. он не вывозит то что обещает. у него проблемы с апи и вообще
он вроде такой идейны, классный, а по факту там все вербозно и непродуманно
он уменьшает бойлерплейт, но как-то хреново это делает
он есть у меня в продакшне в большом проекте и я печалюсь по этому поводу
Illia Seheda
@ALF-er
Aug 24 2015 11:16
  1. неоправданно раздутое апи:
    this.trigger();
    this.trigger("event");
    this.trigger(data);
    this.trigger("event", data);
    (хорошо, что тут логичны лишь 2 параметра, ато было бы 9 вариантов сообщить об изменениях)
    this.listenTo()
    this.listenToMany()
    listenables
    Reflux.connect()
    Reflux.connectFilter()
    ... ОСТАНОВИТЕСЬ!
и 2. Исчезновение ActionCreators и провокация делать запросы к АПИ из сторов, а потом подписывать сторы на другие сторы =/
Sergey Rubanov
@chicoxyzzy
Aug 24 2015 11:18
вот да, @ALF-er хорошо со сцены еще его на ОдессаЖС хейтнул
Andrei Sierkov
@viattik
Aug 24 2015 11:31
по поводу исчезновения ActionCreators помню)
Aleksey Immuzov
@immuzov
Aug 24 2015 14:20
Ребят, а как правильно менять title у страницы? Используется redux, react-router. Нашел это: https://github.com/gaearon/react-document-title
Illia Seheda
@ALF-er
Aug 24 2015 14:21
Это будет работать.
Aleksey Immuzov
@immuzov
Aug 24 2015 14:22
В конце этой доки предлагают использовать https://github.com/nfl/react-helmet если нужны метатеги, например.
Illia Seheda
@ALF-er
Aug 24 2015 14:24
тоже будет работать =) Просто оно покрывает больше юзкейсов
Aleksey Immuzov
@immuzov
Aug 24 2015 14:24
Понял.
Vyacheslav Slinko
@vslinko
Aug 24 2015 14:27

По сути самое главное что пишешь, любые flux'ы это шелуха вокруг твоего кода
которой после некоторого времени разработки не касаешься практически никак

@zerkms расшифруй, как это?

Illya Klymov
@xanf
Aug 24 2015 17:03
@vslinko в том плане что после того как ты плюс минус насетапил костяк приложения, 90% кода не будет привязано к конкретной реализации флюкса
исключение конечно всякая фигня аля reflux :)
Yevhenii Kravchenko
@YevheniiKravchenko
Aug 24 2015 17:29

А подскажите, пожалуйста, по native вопрос. В контейнере я рендерю

<NavigatorIOS
    initialRoute={{
      component: History,
      passProps: {notes: this.props.notes}

Проблема в том что при изменении this.props.notes History компонент никак на это не реагирует. Видно NavigatorIOS решает что не надо ничего делать, у History не вызывается ни willReceiveProps ни shouldUpdate.
Как его заставить передумать перерендериться?