These are chat archives for dev-ua/reactjs

20th
Aug 2015
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 07:13

это просто в react 0.13 контекст тупой (owner-based), в 14 сделают parent-based и таких проблем не будет

у меня две точки рендера (React.render(...)) не думаю что это изменение меня спасет. КОНТЕКСТ НЕ НУЖЕН!

Я может немного выпал из контекста разговора про умные и глупые компоненты (конченая терминология, если честно), но мне все же кажется, что отдавать все данные каждый раз из корня вниз не всегда удобно.

  1. Рефакторинг. Если поменяется структура данных или нужно добавить еще один кусочек — нужно пробрасывать его в куче мест. ФБ сделал Relay как костыль для этого метода.
  2. Рендер будет вызываться от корня на каждое изменение, хотя на практике может оказаться, что нужно изменить один (или несколько) маленьких виджетов. Это будет эффективнее.

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

Illia Seheda
@ALF-er
Aug 20 2015 07:32

контейнеры не только уровня страниц, но и разных списков или отдельно изолированных виджетов на странице

я это имел ввиду под

зачастую на какой-либо странице умный компонент или один или их пара-тройка

Ivan Kurnosov
@zerkms
Aug 20 2015 07:32

В своем проекте у меня есть отдельные контейнеры не только уровня страниц, но и разных списков или отдельно изолированных виджетов на странице.

А расскажи, как ты их иницализируешь данными

Alexey Raspopov
@alexeyraspopov
Aug 20 2015 07:33
стейт этих компонентов полностью синхронизирован со сторами
использую вот такие вещи https://gist.github.com/alexeyraspopov/d03744d4b8d756a99d10
Получаю чистое и явное разделение компонентов и контейнеров
Ivan Kurnosov
@zerkms
Aug 20 2015 07:34
Ну а стор как заполняется
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 07:34
Ivan Kurnosov
@zerkms
Aug 20 2015 07:34
Получается, что ты их изолировал, но всё равно где-то нужно знать конечный список "виджетов" на конкретной странице
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 07:34
у всех сторов прописан initial state
Ivan Kurnosov
@zerkms
Aug 20 2015 07:35
Эм, а если стейт нельзя определить статически
например, он берётся с сервера
или из локал стораджа
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 07:35
при загрузке приложения я запускаю AC которые все это загружают
Ivan Kurnosov
@zerkms
Aug 20 2015 07:35
как ты узнаёшь какие AC запускать
на произвольно взятой странице
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 07:35
localStorage -> web api -> stores
загружаю все данные
их не много)
но подумать стоит, согласен
Ivan Kurnosov
@zerkms
Aug 20 2015 07:36
Просто у меня вот в текущем приложении, которое упрощённо: дропдаун и соответствующая таблица данных
в урле идентификатор из дропдауна
получается при инициализации мне нужно подсосать данные с сервера
и единственное место, где это можно делать - это где-то около роутера
ибо нам нужно знать кусок урла, чтобы знать, что запросить
и мне это не нравится
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 07:40
у react-router есть какие-то async props, это не оно?
Ivan Kurnosov
@zerkms
Aug 20 2015 07:46
Хз, мне не нравится именно физическая связь между ними
(но это уже не так критично)
Ivan Kurnosov
@zerkms
Aug 20 2015 08:02
@ALF-er я тут думал про твою максималистическую идею с "прервались, сериализовали стейт и восстановили на другой машине"
и запнулся на вот какой задаче:
допустим, ты нажал кнопку, которая отправляет запрос на удалённый сервер
вот это состояние сериализуемо?
после нажатия и отправки, но до получения ответа
если да, то как оно (состояние) будет выглядеть
Illia Seheda
@ALF-er
Aug 20 2015 08:20
Тут сложно конечно. Можно хранить ещё пул всех активных запросов с их параметрами. Серриализовать ещё и его и перезапускать на новом устройстве. Но тут много минусов: что если количество этих запросов важно, что если это был запрос на добавление чего-то, что если это был запрос с отсылкой файлов, думаю ещё можно придумать... Думаю тут сокеты могут во многом помочь, но тоже не во всём. И тут твоё "идеала не существует" в полной мере оправдывается (хотя это не повод не стремиться к этому идеалу)
Ivan Kurnosov
@zerkms
Aug 20 2015 08:23
угу (в качестве послесловия: я не пытался доебаться, я просто для себя и всего чатика пытаюсь навыдумывать кучу всяких кейсов чтобы потом в офисе уже выключить моск и фигачить паттернами)
Андрей Листочкин (Andrey Listochkin)
@listochkin
Aug 20 2015 08:26

вообще проблему можно так решать: ты посылаешь запрос на сервер и у тебя остается id операции. Либо его тебе сервер возвращает, либо ты его сам нагенерил - это не существенно.

И ты мейнтейнешь список незавершенных операций в своем сотоянии. Когда открывается вкладка и туда передается JSON состояния, то приложение по этому списку может запросить сервер переслать соответствующие респонсы и применить их.

@ALF-er @zerkms ^
Ivan Kurnosov
@zerkms
Aug 20 2015 08:27
А вот это хорошо
Андрей Листочкин (Andrey Listochkin)
@listochkin
Aug 20 2015 08:28
на бекендах это довольно распространенная практика при организации воркеров и работы с очередями, я ничего не придумал
Illia Seheda
@ALF-er
Aug 20 2015 08:28
скилово. Вангую, что у этого подхода есть название в виде какой-нибудь хитрой абревиатуры (TCVU, ZIAO, GUIP...)
Андрей Листочкин (Andrey Listochkin)
@listochkin
Aug 20 2015 08:29
наверняка, я в серьезных энтерпрайзах только 4 года работал - много хороших вещей не видел
но кстати, есть подозрение, что @mr-mig может что-то сказать по этому поводу: :point_up: August 20, 2015 11:26 AM
а такое уже обсуждали?
Illia Seheda
@ALF-er
Aug 20 2015 10:20
Я сравнивал подходы css in js, у этого было наибольшее количество фич. Возможно ситуация поменялась
Ivan Kurnosov
@zerkms
Aug 20 2015 10:33
Но вы пока все по старинке делаете всё? Или кто-то уже пересел на что-то подобное?
Illia Seheda
@ALF-er
Aug 20 2015 10:37
я хочу... но это надо чтоб на проекте или был только я или те кто разделяют моё рвение
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 11:03

Но вы пока все по старинке делаете всё?

делаю по старинке, но все складывается так, что можно начинать использовать css-modules

Sergey Rubanov
@chicoxyzzy
Aug 20 2015 11:45
я тоже хочу css-modules, но верстальщики против. но кое-где все же заюзал
они у нас вообще на своей волне. пришлось им написать https://github.com/chicoxyzzy/sass-bulk-import-loader чтобы с гульпа их переманить
Oleg Kislitsyn
@olegafx
Aug 20 2015 13:24
давно использую css-modules. обратно возвращаться не собираюсь :smile:
Nikita Gusakov
@nkt
Aug 20 2015 14:00
Народ, а подскажите по тестам. Вот у меня есть компонент Input и компонент LocaleInput, который рендрит выбор языков. Я взял jest для тестов, как проверить, какие options передал LocaleInput в Input? По идее jest мокает Input и как теперь что-то проверить?
вот примерно вынес как это выглядит, на 9 строчку в тесте вылетает ошибка, очевидно select в DOM не рендрится
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:07
1) не мокать
2) проверять какие пропсы передалить в мок
Nikita Gusakov
@nkt
Aug 20 2015 14:08
то есть компоненты вообще все запретить мокать джесту?
а вот 2 как?
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:09
хм
require('../Input').mock.*
я, конечно, не уверен, что это сработает
хз как jest мокает компоненты
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 14:10

я тоже хочу css-modules, но верстальщики против

ребята, как вы вообще так живете...

Illia Seheda
@ALF-er
Aug 20 2015 14:10
как "так"?
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 14:11
реакт с верстальщиками которые еще и правила диктуют
Nikita Gusakov
@nkt
Aug 20 2015 14:11
А тут вообще кто-то тестирует реакт джестом?)
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 14:12
спроси кто вообще реакт тестирует))
Nikita Gusakov
@nkt
Aug 20 2015 14:13
ееей!
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 14:13
:)
у меня Karma+Jasmine, один компонент — один файл с тестами
Nikita Gusakov
@nkt
Aug 20 2015 14:14
и моков нет?
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 14:14
я пока не постиг эту весчь :(
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:14
не вижу смысла в моках компонент
особенно с подходом 1умный=1глупый
Nikita Gusakov
@nkt
Aug 20 2015 14:15
а нафига FB jest тогда запилил?)
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:15
для тестов умных тестировать рендер не нужно
для тестов глупых нет проблем с дочерними

а нафига FB jest тогда запилил?)

думаешь только ради моков?

и только ради реакта?
Nikita Gusakov
@nkt
Aug 20 2015 14:17
ну по сути мне понятно, зачем нужны моки. Просто как ими пользоваться. Если у меня дерево глупых компонентов я хочу посмотреть что он передал дочерний, и не хочу смотреть дальше.
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:17
тогда изучай их API
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 14:17
есть ли смысл тестировать "что компонент передал в дочерний компонент"?
Nikita Gusakov
@nkt
Aug 20 2015 14:17
Я ничего не думаю. Я просто вижу, что там автомок, и для реакта они не предлагают его вырубать. Я хочу понять почему и как с этим жить)
@alexeyraspopov а что еще есть смысл тестировать?
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:18

есть ли смысл тестировать "что компонент передал в дочерний компонент"?

а что тогда тестировать?

Nikita Gusakov
@nkt
Aug 20 2015 14:18
:D
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:18
работа глупого распихивать все по другим глупым
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 14:18
что окажется на выходе, на основе пропсов
не у всех же глупых
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:19
при таком подходе мы тестирует не один юнит
а все дерево
=> при изменении компонента придется менять тесты всех компонент, которые его используют
что есть гавно
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 14:20
так а если компонент совсем маленький
внутри один два ребенка
Nikita Gusakov
@nkt
Aug 20 2015 14:20
ну если совсем маленький - тогда да. Ты имеешь ввиду что он рендрит только сам дом
точнее сам html, без компонентов
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:21
да хоть какой, если ты не мокаешь зависимости — это уже не юнит тест
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 14:21
окей, у меня есть мелкий компонент
я в него вбрасываю пропсы и проверяю, что вот в нем есть элемент с таким-то содержимым
с меня херовый тестер?
Nikita Gusakov
@nkt
Aug 20 2015 14:22
смотря что ты проверяешь
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:22
нет, не хреновый
1) смотря что ты проверяешь
2) если ты согласен что у тебя тесты зависимые
3) если ты не называешь это юнит тестами
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 14:23

если ты согласен что у тебя тесты зависимые

в смысле?

Vyacheslav Slinko
@vslinko
Aug 20 2015 14:23
=> при изменении компонента придется менять тесты всех компонент, которые его используют
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 14:23
окей
есть компонент
получает сложную структуру данных (какой-то объект в объекте в массиве)
выводит на экран одну надпись
тупо надпись
как мне протестировать корректность надписи?
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:24
как обычно
ассерт вывода
мы тут говорим о моках
если ты это будешь тестировать в родительском компоненте - это не верно
Nikita Gusakov
@nkt
Aug 20 2015 14:26
function add(a, b) {
  return a + b;
}

function addToPi(a) {
  return add(a, Math.PI);
}


it('should add two nums', () => {
  assert.equal(5, add(2, 3));
})

it('should call add with PI and first arg', () => {
  mock(add);
  addToPi(2);
  add.calledWith(a, Math.PI);
})
вот юнит тест
второй который
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:26
+1
Nikita Gusakov
@nkt
Aug 20 2015 14:26
давайте вернемся к моим попугаям
как тоже самое сделать в реакте?
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:27
require('../Input').mock.*
что там после рендера?
по идее должны сохранится агрументы вызовов конструктора
а в них props
Nikita Gusakov
@nkt
Aug 20 2015 14:29
const Icon = React.createClass({
  render() {
    return <span className={`fa fa-${this.props.glyph}} />;
  }
});

const StarIcon = React.createClass({
  render() {
    return <Icon glyph="star" />;
  }
});
вот простейший пример
мне нужно только проверить пропсы у Icon.
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:30
и?
Nikita Gusakov
@nkt
Aug 20 2015 14:33
ии как это сделать))
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:34
ты мои сообщения читал выше?
Nikita Gusakov
@nkt
Aug 20 2015 14:35
да, ща в общем попробую
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:36
relay очень сырой
:(
относительно других релизов
Sergey Rubanov
@chicoxyzzy
Aug 20 2015 14:37

реакт с верстальщиками которые еще и правила диктуют

они горячо любят sass, и вообще у них свой стек. ничего не можем с этим поделать. стили — это их компетенция. а jsx они правят вполне уверенно если потребуется

Vyacheslav Slinko
@vslinko
Aug 20 2015 14:40
интересно, простой компонент, но который использует state, он умный или глупый?
Artyom Trityak
@artyomtrityak
Aug 20 2015 14:42
любой компонент который использует state умный @vslinko
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:42
да, тоже склоняюсь к этому
Illia Seheda
@ALF-er
Aug 20 2015 14:47
в условиях отстутствия строгой документации я знаю только вот эти критерии
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
Alexey Migutsky
@mr-mig
Aug 20 2015 14:49
чуваки, почему вы не называете smart components контроллерами?
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:50
тогда уж контейнерами
как их зовут в фб
Sergey Rubanov
@chicoxyzzy
Aug 20 2015 14:50
ну они все же и V, и C
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:50
я называю их умными, так как это был первый термин, который я прочел
как обычно
Sergey Rubanov
@chicoxyzzy
Aug 20 2015 14:50
+
все понимают о чем речь сразу
Alexey Migutsky
@mr-mig
Aug 20 2015 14:52
@listochkin @ALF-er @zerkms я не знаю как называется подход с сохранением correlation ID для реквестов, но это стандартный паттерн для создания request-response поверх неблокирующей коммуникации (message queue, websockets, etc)

ну они все же и V, и C

тогда уж контейнерами

вот как дальше протестить?
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:53
я же писал
попробуй
гм, ну вот так сработало
но мне что-то не очень нравится этот тест. Если будет несколько иконок, как проверить какая где срендрилась, в каком порядке
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:59
а что у тебя отрендерелось?
выведи innerHTML
Nikita Gusakov
@nkt
Aug 20 2015 14:59
у icon?
Vyacheslav Slinko
@vslinko
Aug 20 2015 14:59
у document
интересно
Nikita Gusakov
@nkt
Aug 20 2015 15:00
а ничего))
оно и не должно рендрить по идее
Vyacheslav Slinko
@vslinko
Aug 20 2015 15:01
я бы не мокал компоненты
или не ренделил бы их в документ
а проверял возвращаемое значение render
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 15:08

чуваки, почему вы не называете smart components контроллерами?

хочешь еще больше всех запутать? есть нормальные термины container и component)

Alexey Migutsky
@mr-mig
Aug 20 2015 15:09
покажи мне их определение и я отстану
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 15:11
статья Абрамова, s/Smart/Container, s/Dumb/Component
ты ж джавист бывший, там есть подобные определения http://javadevwannabe.blogspot.com/2012/02/swing-components-and-containers.html
Nikita Gusakov
@nkt
Aug 20 2015 15:14
Тупой компонент - это такой компонент, который не содержит состояние приложения, прямо на него не влияет и не зависит. Обычно рендринг меняется только в зависимости от пропсов, хотя может иметь состояние, но связанное только с ним. На пример checkbox может иметь состояние checked.
Умный компонент - это такой компонент, который может содержать часть или все состояние приложения, может прямо на него влиять и напрямую от него зависит. Тупой компонент рендрит только 1 дочерний компонент, в который передает все нужные данные и обработчики событий.
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 15:16

может прямо на него влиять

ну такое

Nikita Gusakov
@nkt
Aug 20 2015 15:17
Вот я так понимаю, только под это определение не очень ложатся, на пример, блок комментариев, который сам по себе независим, то есть тупой компонент может срендрить умный)
Vyacheslav Slinko
@vslinko
Aug 20 2015 15:18

Вот я так понимаю, только под это определение не очень ложатся, на пример, блок комментариев, который сам по себе независим, то есть тупой компонент может срендрить умный)

лучше так не делать, иначе смысла в разделении нет

Nikita Gusakov
@nkt
Aug 20 2015 15:18
@vslinko тогда куда девать умные и независимые комментарии? Прокидывать через все дерево компонентов?
Vyacheslav Slinko
@vslinko
Aug 20 2015 15:18
глупые компоненты, которые содеражат умные - лайауты
я создаю контейнер для лайаутов
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 15:20

@vslinko тогда куда девать умные и независимые комментарии? Прокидывать через все дерево компонентов?

та ну нафиг

Nikita Gusakov
@nkt
Aug 20 2015 15:20
не-не. Вот прикинь шапку гитхаба. Там есть notifications иконка, которая загорается синим, если есть нотификации. Я бы это сделал умным компонентом, хотя сам хедер - тупой
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 15:20
доиграетесь вы со своим прокидыванием, говорю я вам :)
Vyacheslav Slinko
@vslinko
Aug 20 2015 15:21
Comments = props => <div>{props.children}</div>
CommentsContainer = loadCommentsState(props => <Comments><CommentContainer comment={props.comment} /></Comments>)
Comment = props => <div>{props.message}</div>
CommentContainer = loadCommentState(props => <Comment message={props.comment.message} />)
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 15:21
ведь можно сделать хедер умным
там не только эта херь мутирует
еще и поле поиска, выпадалки
Nikita Gusakov
@nkt
Aug 20 2015 15:21
@alexeyraspopov выпадалки - тупые
Alexey Raspopov
@alexeyraspopov
Aug 20 2015 15:21
тогда лампочка будет простым компонентом, принимающим булевый проп
Nikita Gusakov
@nkt
Aug 20 2015 15:21
поиск - аналогично независимый)
Alexey Migutsky
@mr-mig
Aug 20 2015 15:22

ты ж джавист бывший, там есть подобные определения

Ты мне пожалуйста общепринятый термин, а не специфичный для технологии

Nikita Gusakov
@nkt
Aug 20 2015 15:23
ох, ладно. Тролли опять пришли троллить, про тесты мне яснее не стало, приятного троллинга :trollface:
Nikita Gusakov
@nkt
Aug 20 2015 15:25
@mr-mig а на счет контроллеров, контроллер - это понятие из MVC, которое пытаются натянуть вообще на все, и в самом MVC не всегда понятно что он делает и где конкретно находится. Минимально по этому не стоит этот термин еще и сюда приплетать. лучше придумать новые)
Alexey Migutsky
@mr-mig
Aug 20 2015 15:27
не лучше ли разобраться в истории всей этой херни и начать учить людей вокруг правильной терминологии

https://en.wikipedia.org/wiki/Component

И где там найти определение для UI component?

Alexey Raspopov
@alexeyraspopov
Aug 20 2015 15:29
я и забыл каким ты можешь быть занудным :)
Illia Seheda
@ALF-er
Aug 20 2015 15:31
Он у меня по этому поводу соперничает с одним чуваком которого я собеседовал на должность QA (не спрашивайте) который на банальный вопрос "Какие виды тестирования вы знаете" молол минут 7 монотонным голосом какую-то чущь про "широкий текст в узких кнопках"... Я чуть не вздёрнулся прям на том же месте
Alexey Migutsky
@mr-mig
Aug 20 2015 15:33

я и забыл каким ты можешь быть занудным :)

Я только ради этого и напоминаю :)
А то я вот увидел, что у вас тут микротёрки на тему “умных и тупых компонентов” и решил масла подлить

Alexey Raspopov
@alexeyraspopov
Aug 20 2015 15:39
кто-нибудь уже пробовал, кстати?
Nikita Gusakov
@nkt
Aug 20 2015 15:44
    const starIcon = TestUtils.renderIntoDocument(<StarIcon />);
    const icon = TestUtils.findRenderedComponentWithType(starIcon, Icon);

    assert.deepEqual(icon.props, {
      glyph: 'star'
    });
о, вот так можно
Alexey Migutsky
@mr-mig
Aug 20 2015 15:59
в этих утилзах получается, что контейнер - это такой себе недообсервер для стора?
тупо врапает “компонент” и конвертирует стейт в пропсы?
привет модель-вью-презентер
тока в виде имплементации на реакте
Iurii Plugatariov
@strangeworks
Aug 20 2015 16:10
контейнер это скорей всего то, что они раньше называли view-controller
который собирает со всех сторов пропсы и засылает их всем юай компонентам
через пропсы
Alexey Migutsky
@mr-mig
Aug 20 2015 16:12
ага, я думаю так же. Они абстрагировали бойлерплейт внурь Container.create
Ivan Kurnosov
@zerkms
Aug 20 2015 19:41
@mr-mig то, о чём мы говорили я бы не стал называть correlation id, просто потому, что этот термин уже используется для совсем других задач
Alexey Migutsky
@mr-mig
Aug 20 2015 19:45
тогда давай поговорим о контейнерах :trollface:
Ivan Kurnosov
@zerkms
Aug 20 2015 19:46
:-S