boriscoder

19 октября 2015, Saint Petersburg, Russia

# Понедельник 37 твитов

Привет, эту неделю проведу с вами я, @boriscoder. Я работаю в отделе тестирования Яндекса и мы будем говорить о тестировании.

12:20

Для начала расскажите о том, какими тестовыми фреймворками и библиотеками пользуетесь. Mocha, Jasmine, что-нибудь еще?

12:21
@jsunderhood H&E. Он же Hands&Eyes.

Я обычно называю его manual testing twitter.com/webholt/status…

12:29
@jsunderhood помимо указанного чай, стамбул и gemini
12:29
@jsunderhood Tape github.com/substack/tape кто-нибудь использует?

Мне тоже интересно. Для чего нужны подобные yet another test frameworks? twitter.com/MRinat/status/…

12:55
@jsunderhood есть вот такое мнение: medium.com/javascript-sce…

Я бы поспорил с автором этой статьи, но мнение интересное twitter.com/mr_mig_by/stat…

12:58

Я занимаюсь в компании разработкой инструментов для тестирования. Наша команда поддерживает инфраструктуру для запуска автотестов

13:01

.@jsunderhood можно спрашивать меня о разных тонкостях тестирования. Как правильно писать тестовый код? Как ускорить медленные тесты?

13:03
@jsunderhood как грамотно проектировать тесты?

Это слишком общий вопрос, надо детализировать. Как решить где что тестируем? twitter.com/mr_mig_by/stat…

13:11
@jsunderhood Как писать unit-tests для визуальщины?

Для начала нужно писать UI-код с модулями, например на ES6. Потом подключаем библиотеку, например, rewire и готово twitter.com/mr_mig_by/stat…

13:13
@jsunderhood как решить, где проходит грань между “стОит тестировать” и “не стОит тестировать”.
Как сделать тесты loosely coupled к коду?

Обычно начинают тестирование с тех модулей, которые используются в нескольких местах. В них опаснее делать ошибки twitter.com/mr_mig_by/stat…

13:15
@jsunderhood @mr_mig_by что вы последнее такое тестировали? Над чем сейчас работаете?

Недавно мы публиковали статью на Хабр: habrahabr.ru/company/yandex…
я писал набор тестов для проверки на javascript twitter.com/poebist/status…

13:23
@jsunderhood почему все говорят что unit тесты предпочтительныей e2e тестов для front-end'a? Посоветуй стек технологий для того и того)

Потому что e2e тесты дольше исполняются и падают по случайным причинам. Unit-тесты быстрее и надежнее twitter.com/hellbeast92/st…

13:41
@jsunderhood все вместе. Блоки переезжают с места на место, меняется поведение, структура и тп. Вобщем e2e довольно дорого обходится.

Завтра поговорим о том, что делать frontend-разработчику с selenium и как сделать e2e дешевле twitter.com/VovanR/status/…

14:04
@jsunderhood о, а расскажи про e2e тестирование? протрактор пробовали? а nightwatch?

Все понемногу пробовал в исследовательских целях. У таких full-stack тестовых фреймворков беда с расширяемостью twitter.com/maxmaximov/sta…

14:33

.@jsunderhood проще взять Jasmine и написать хелперов под свой проект. Легче будет интегрироваться с Teamcity в один отчет с unit-тестами

14:36
@jsunderhood но фронтенд по большей части это визуализация и в основном это работа с домом, это юнит тестами не покрыть, разве нет?
14:38

.@hellbeast92 можно создать себе тестовый dom-фрагмент, и тестировать в нем. CSS так не проверить, а логику и html можно.

14:39
@jsunderhood Можешь порекомендовать доклады/статьи? Не обязательно про инструменты, можно про саму идею автоматизации визуального сравнения.

Есть отличный курс лекций от моих коллег: youtube.com/playlist?list=… Это про тестирование и devops в целом twitter.com/toivonens/stat…

14:46
@jsunderhood Ты знаешь инструменты автоматического визуального тестирования? Как Gemini только альтернативы?

Ключевое слово "CSS regression testing". Я слышал еще о PhantomCSS и WebdriverCSS, но в основном у нас Gemini twitter.com/toivonens/stat…

14:49

.@yuritkachenko @toivonens @mourner там слишком строгий diff, будет много шума. Это как верстку с макетом попиксельно сравнивать.

15:27

.@toivonens @yuritkachenko @mourner конечно. Тени, границы могут немного отличаться. В Gemini этот кактус долго кушали. //cc @SevInf

15:46

Ну и давайте под вечер померяемся coverage. Сколько должно быть для уверенности в своих тестах? 20? 50?

16:16
@jsunderhood для уверенности 100

Это не поможет на самом деле. Кроме покрытия строчек кода есть еще покрытие всех возможных входных параметров. twitter.com/ikroosh/status…

16:48

.@jsunderhood кто-нибудь знает хорошие инструменты, которые скажут "ты проверил только положительные числа, иди проверяй отрицательные"?

16:49
@jsunderhood Другой разработчик, делающий ревью разве что :-/
17:10

Есть такое понятие QuickCheck, о котором упомянул @mr_mig_by. Вы можете описать правила, по которым сгенерируются тестовые данные

17:13

.@jsunderhood но в javascript пока до этого далеко

17:13

А вы пишете параметризованные тесты? Как вы это делаете: parameters.forEach()? А пробовали хранить параметры не в коде, а загружать снаружи?

17:15

ProTip: у beforeEach, afterEach и it блоков общий this. Можно не объявлять много разных var, а писать this.component = new TestComponent()

18:44

И еще есть вот такая интересная библиотека github.com/rluba/hamjest Смотрите какую сложную проверку можно написать: pic.twitter.com/7b0GmElG9E

20:08

.@jsunderhood и в результате вы получите компактное, но понятное сообщение об ошибке. pic.twitter.com/VWCIQpsUVE

20:10

@jsunderhood все это вдохновлено java-библиотекой Hamcrest: github.com/hamcrest/JavaH…

20:11
@jsunderhood супер инструмент это таск из которого делается BDD и код. Все надуманные случаи ты добавляешь за свой счет. Без фанатизма ;-)

Звучит как описание Cucumber: github.com/cucumber/cucum… twitter.com/azproduction/s…

20:58
@jsunderhood а что плохого в кукумбер?
21:03

.@svdmitrij Он хороший, я им пользовался: github.com/just-boris/che… Но чаще приходится тестировать новые вещи, а не 10 раз тестить то же самое

21:03

# Вторник 38 твитов

@jsunderhood видели/пробовали мой wallabyjs.com? Что думаете о самой идее выполнения только тестов затронутых изменениями кода?
7:41

.@ArtemGovorov пробовал. У меня 500 unit-тестов выполняются не больше 3 секунд, так что нет смысла. Кажется лучше оптимизировать именно это.

7:42

Доброе утро! Сегодня поговорим о Selenium. Для начала вам слово: должен ли frontend-разработчик писать e2e тесты?

7:44

.@jsunderhood я пишу. Я знаю как устроен мой код и смогу оптимальнее его протестировать, чем кто-то другой

7:45
@jsunderhood какие основополагающие вещи по написанию тестов стоить прочесть?

xUnit patterns: xunitpatterns.com Настольная книга в нашем отделе twitter.com/Sigiller/statu…

7:53
@jsunderhood как тестировать работу с файловой системой? Чтобы при этом физически ничего не писать. Например mock-fs — есть ли что-то лучше?

Еще есть memory-fs. github.com/webpack/memory… Надо выбирать ту, которая больше подходит по API. twitter.com/VovanR/status/…

7:55

Самое страшное в Selenium – это начать. У Protractor (тестовый фреймворк для Angular.js) есть хороший гайд: angular.github.io/protractor/#/s…

8:43

.@jsunderhood еще можно почитать статью @mista_k noteskeeper.ru/1209/

8:44

.@jsunderhood в любом случае все сводится к тому, что у вас есть веб сервер, локальный или удаленный. Запросами к нему управляется браузер

8:45
@jsunderhood Но Selenium очень уныл, не проще ли покрыть все unit тестами, а для e2e оставить только основной функционал?

Конечно же, сначала покрываем как можно больше unit, за затем проверяем что все модули собрались вместе в e2e twitter.com/DevArtem/statu…

8:53

.@jsunderhood хватит десятка Selenium тестов, которые пройдут прокликают страницы и убедятся, что у вас вообще js подключился и завелся

8:54

Как и полагается в Javascript, существует несколько почти одинаковых библиотек для работы в webdriver. Выбирайте любую, кроме стандартной.

9:02

@jsunderhood стандартная – это вот: code.google.com/p/selenium/wik… не обновляется и с неудобным API

9:04

.@jsunderhood альтернативы webdriver.io github.com/admc/wd. Я пользусь github.com/groupon/webdri…, у него синхронное API

9:06
@jsunderhood Я вообще не верю в отдельных QA как профессию. Тестирование это часть работы разработчика.
9:07
@DevArtem @jsunderhood смысл в селениум, если есть отличный капибара-вебкит который умеет жаваскрипт? Через виртуальный вебкит браузер

А можно поподробнее? Capybara классная, но я видел только на ruby twitter.com/achempion/stat…

9:15

.@achempion это проблема. Ruby похож на Coffeescript, а его здесь не любят. Вот бы кто-нибудь сделал порт на js, как с Cucumber

9:21

Когда selenium включен, можно писать тесты. Вытащил из кода небольшой пример: gist.github.com/just-boris/6dd…

9:46

.@jsunderhood В этом примере куча проблем, дальше я покажу как их исправить. Во первых, нужно убрать от повторение строки '.search__input'

9:48

.@jsunderhood можно по-разному избавиться от таких магических констант. Чтобы каждый раз не писать css-селекторы их оборачивают в PageObject

11:33

@jsunderhood Вы создаете объект, свойства которого ведут на важные элементы вашей страницы: gist.github.com/just-boris/c4c…

11:44

@jsunderhood а потом в тестах используете эти константы. И все селекторы окажутся собраны в одном месте и их легко править

11:46

@jsunderhood почитать об этом больше можно на сайте самого selenium: code.google.com/p/selenium/wik… или погуглить "PageObject pattern"

11:47

Грубо говоря, PageObject – это просто JSON c маппингом имен на css-селекторы. Поэтому специальный framework не нужен twitter.com/DevArtem/statu…

12:59

@jsunderhood вопрос пропал :( Меня спросили примеры PageObject для асинхронного JS

13:00

Я выскажу непопулярное мнение, но асинхронные тесты это плохо. webdriver-http-sync лучше webdriver.io.

13:05

.@jsunderhood Синхронный код легче читать, в нем легче отловить ошибки. В тестах (именно здесь) асинхронность не дает ничего, одни минусы

13:06
@jsunderhood бывает, что общие функции для PageObject помещают в этот клас: заполнение формы типичными данными, сложные взаимодействия

Я тоже так сначала делал, потом перестал. Общие функции собираются в другую штуку под названием Actions twitter.com/igor_shubovych…

13:28

.@jsunderhood в нашей команде разработали библиотеку на эту тему: github.com/yandex-qatools… но она на java. Мы только начинаем вступать в js

13:30

Отдельный большой вопрос как отлаживать тесты. Unit тесты легко, как обычно в devtools, а что делать с e2e? Поделитесь решениями

15:55

.@jsunderhood проблема в том, что в e2e тестах код трогать нельзя, можно только смотреть результат. А какой результат работы браузера?

16:14

.@jsunderhood Это скриншот. Поэтому selenium тестах их снимается очень много. Только мало тестовых фреймворков дают удобный механизм

16:17

@jsunderhood Автор Protactor, например, считает, что это не его задача: angular.github.io/protractor/#/d…

16:18

@jsunderhood завтра я расскажу, как легко снимать пачками скриншоты с браузера, и потом не запутаться, что они означают.

16:21
Сделали анонс следующей встречи. Будет много интересного! vk.com/spb_frontend?w…

В четверг будет встреча с двумя ex-@jsunderhood. Надо бы пойти присоединиться twitter.com/spb_frontend/s…

16:54
Сделали анонс следующей встречи. Будет много интересного! vk.com/spb_frontend?w…

В прошлом твите я что-то напутал. Встреча 25 числа, в воскресенье. Будут разговоры о React
twitter.com/spb_frontend/s…

18:52

Дежурный вечерний ProTip: github.com/minimaxir/big-… Список строк, которые должен принимать ваш код. Длинные, короткие, спецсимволы - все есть

19:23
@jsunderhood а есть подобная вещь для тестирования алгоритмов сортировки? (Разной длинны массивы, почти отсортированные массивы и все такое)

Очень специфическая задача. Я не сталкивался twitter.com/alexeyraspopov…

19:36

# Среда 22 твита

Доброе утро! Сегодня я расскажу об одном необычном тест-репортере. Обычно результат тестов выглядит так pic.twitter.com/Y7mHL5oQ1f

7:18

.@jsunderhood а может выглядеть вот так. Это Allure-framework. Система репортов, котороу я разрабатываю для компании pic.twitter.com/PyuFAmIfup

7:21
@jsunderhood А зачем? По мне red/green как в гитхабе в пул реквестах вполне достаточно.
7:29
@jsunderhood Не очень вижу как такой интерфейс с этим поможет. Все равно в итоге стактрейсы читать.
7:33

.@freiksenet_ru во-первых,мы группируем похожие Exception в список Defects. Видимых ошибок получается меньше. Во-вторых, у нас есть Attaches

7:35

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

7:37

@jsunderhood вы вызываете где-то в коде allure.createAttachment("screenshot", data); и он прикрепляется к тек. тесту pic.twitter.com/bYNt8AYNwb

7:41

.@jsunderhood полный пример с mocha можно найти здесь: github.com/allure-example…

7:41

Вот так в Mocha можно сохранять скриншот для failed теста. Allure позаботится и подклеит его к нужному сьюту и кейсу pic.twitter.com/1aVQ5NwXEs

10:36

В Allure есть еще одна инженерная хитрость. После тестов вы получаете файлы с raw-xml. Чтобы получить отчет, надо его построить c allure-cli

11:51

.@jsunderhood это нужно, чтобы не тратить ресурсы на отчеты, которые никому не интересны (когда в них нет ошибок)

11:52

@jsunderhood Allure-cli доступен в через homebrew, ppa, архив для windows, плагины в teamcity, jenkins, bamboo: github.com/allure-framewo…

11:53

Иногда хочется детализировать свои тесты и разделить их на шаги. Заходим -> Логинимся -> Открываем страницу -> Жмем на кнопку

14:22

.@jsunderhood в Allure для этого есть понятие Steps. Определяем step-функцию через наше API pic.twitter.com/0CHPzrjr1k

14:39

@jsunderhood и получаем в репорте лог по шагам в терминах тестируемого приложения, как от ручного тестировщика pic.twitter.com/x23P1QKQqI

14:40

О чем рассказать завтра? Сейчас самое время предложить тему. Можем обсудить стек karma+phantomjs и альтернативы. Кто-нибудь его использует?

16:05

Кстати, сам Allure – это SPA-приложение на Angular + Bootstrap + Angular-UI. К коду написан пак тестов на Jasmine

16:17

ProTip: можно писать ассерты в beforeEach. Если там будет exception, то mocha не исполнит остальные тесты из этого describe. Экономит время

18:34

Также в правильном коде тестов есть разница в ошибках: Exception – это ошибка в коде тестов, а AssertionError – в коде приложения.

19:44

"undefined is not a function" это Exception. В хороших тестах так быть не должно. Для AssertionError есть npm-пакет: npmjs.com/assertion-error

19:47

@jsunderhood напрямую им пользоваться не стоит, его использует, например, chai. Можно писать и свои библиотеки

19:47

@jsunderhood Allure отличает эти два вида ошибок и по-разному их обрабатывает. Это позволяет сэкономить время на поиск проблемы.

19:48

# Четверг 40 твитов

@jsunderhood Мы используем. Это property-based testing называется.
8:28

.@arik0n а можно тогда пример?

8:28

Привет. А сегодня давайте поговорим о karma. Изначально tool назывался Testacular. Потом они переименовались из-за неприличных ассоциаций

8:30

.@jsunderhood это инструмент для запуска кода в браузере. Вы даете ему файлы с кодом, подключаете launcher-plugin, и смотрите результат

8:31

Типичное использование: phantomjs+karma в режиме watch следит за файлами и запускает тесты на их изменение. Потом тесты в travis на Firefox

8:43

.@jsunderhood у karma очень гибкая архитектура и много. Это адаптеры под фреймворки, препроцессоры кода и репортеры

8:45

.@jsunderhood в команде разработчиков есть наш @maksimrv, который активно продвигал ее в русскоязычном сообществе

8:46

Со связкой karma+phantomjs много проблем. Phantom периодически умирает, нельзя зайти в devtools, отладка только через console.log

9:29
@jsunderhood 1.X - древний Webkit. DevTools имеются :-) У нас большие надежды на 2 (и уже 3) версию.
9:31

.@Vitalliumm про 2 версию эпичный баг: github.com/ariya/phantomj… JS-разработчики не в состоянии собрать себе Phantom из исходников

9:33

.@Vitalliumm а какие планы на будущее? Все вокруг уже хотят ES6, который уже есть в Chrome, Firefoх и Node

9:37
@jsunderhood да, но мы нашли в чем проблема. И уже есть фикс.
9:37
@jsunderhood пилим версию с Chromium под капотом (и full интеграцией с Node.js). FF даже не рассматривали, так как нет опыта.
9:39
@jsunderhood плюс для FF есть @slimerjs

Я пробовал работать со Slimmer. Он использует Firefox из системы и настроить регулярные тесты так и не получилось twitter.com/Vitalliumm/sta…

9:41

.@Vitalliumm то есть архитектура похожая на Electron. А в чем отличия?

9:44
@jsunderhood да, плюс у него нет полной поддержки headless режима.

Именно это и была основная проблема. В режиме watch фокус постоянно бросался в окно с тестом. twitter.com/Vitalliumm/sta…

9:45
@jsunderhood да, похожая. Самым главным отличием будет headless режим и много новых API, которые мы не смогли реализовать с текущей arch.
9:46
@jsunderhood но мы открыты для всех предложений :)

Приходите в PhantomJS, несмотря на неучастие @AriyaHidayat, проект в хороших руках twitter.com/Vitalliumm/sta…

9:47

В качестве альтернативы можно посмотреть на github.com/segmentio/nigh… это обертка вокруг Electron

9:48
@jsunderhood вот кстати да. Из-за его неучастия (он участвует, но не особо), мы не делаем кардинальных изменений, а очень хочется.
9:54

Electron оказался намного популярнее node-webkit. На нем можно делать не только desktop-приложения, но и небольшие инструменты

10:26

Например, github.com/Jam3/hihat – это devtools без браузера. Удобно для запуска мелких тестов

10:27

Кроме поиска headless браузеров, есть и другое решение – а что, если попытаться сэмулировать браузер в node.js?

11:44

.@jsunderhood на эту тему куча решений github.com/tmpvar/jsdom github.com/krasimir/atomus github.com/cheeriojs/chee… у всех свои отличия

11:46

Я пользуюсь JSDOM. Настройку подсмотрел здесь: github.com/thejameskyle/m…

11:48

.@jsunderhood с Webpack и Browserify стало популярно писать браузерный код в node.js стиле. Удобно, что его стало можно тестировать в node

12:38

У меня был проект с небольшим паком из 50 тестов. В Karma они прогонялись за ~5 cек, с учетом запуска. В node+jsdom все проходит за 200ms

12:41

.@jsunderhood экономия на препроцессинге и trade-off на общение с браузером дает значительный выигрыш в скорости

12:42

@jsunderhood это все справедливо для только функциональных тестов. Для проверки стилей лучше скриншоты и Selenium.

12:43

Сheerio тоже хорошее решение, но это эмуляция jQuery для node, а не полного DOM API. Для React и Backbone этого недостаточно

13:32

.@jsunderhood возможно сейчас на волне развития изоморфного (универсального) javascript появятся еще решения. Может вы их уже знаете?

13:33

Еще когда мигрировал с karma на jsdom наступил на интересные грабли. Модули в node.js кэшируются, поэтому запуск на watch получал старый код

14:26

.@jsunderhood можно делать всякие хаки с require.cache, а можно просто каждый раз запускать тесты в новом процессе pic.twitter.com/aafCV4eeUG

14:28

.@jsunderhood таким образом мы получаем на каждый старт чистое окружение. Karma делает аналогично она запускает новые тесты в iframe

14:29
@jsunderhood есть опыт использования nightmare 2.x? Месяц назад не смог завести, использую 1.8.x, она на phantomjs. Работает стабильно
16:09

ProTip: в lodash можно подменить Date, чтобы заставить _.debounce сработать раньше. Это ускорит тесты с его участием pic.twitter.com/RNxGYP2lyE

17:17
@jsunderhood ваще, fyi, двигаем эту тему в реальные браузеры, хромиумвцы думают, эджевцы хотят делать, фаерфоксы уже делают.

Что они делают? Возможность запуска без видимого окна? twitter.com/arkel/status/6…

17:33

TestLikeAPro: у Jasmine есть свой fake-server: jasmine.github.io/edge/ajax.html когда у вас проект на Jasmine, вам Sinon не нужен совсем

18:10
@jsunderhood условно да, конечный вариант который я пушу, это пропись версии браузера в дев депах проекта
18:11

# Пятница 50 твитов

Доброе утро! Давайте сегодня поговорим про взаимодействие с backend. Так получилось, моя команда состоит из 5 джавистов и frontend

7:50

Allure изначально разрабатывался под java-тесты. Адаптация под остальные языки пришла позже. Поэтому core проекта собирается maven

7:51

.@jsunderhood собирать frontend maven-ом не такая боль, как может показаться. Есть все необходимые плагины.

7:52
@jsunderhood господи, вот я и услышал фразу "собирать фронтэнд maven'ом"
8:02
@safinalexey @jsunderhood И сейчас можно)) просто запускалка тасков github.com/eirslett/front…
8:13

Webjars – bower для java: webjars.org

8:17

@jsunderhood есть еще bitbucket.org/cofarrell/bowe… но он так и не смог установить все что мне нужно

8:18

SASS собирать легко, потому что он написан на Ruby. Подключаем jruby и все работает. Less работает через Rhino

9:43

А вот с упаковкой js все плохо: есть только wro4j без поддержки SourceMaps Из-за этого скрипты в Allure остаются неупакованными

9:56
@jsunderhood плагины - аналоги из npm или те же самые, но крутятся в rhino?
10:20

.@agudulin нет я говорю об имплементациях на java

10:21

.@agudulin особого смысла запускать что-то в Rhino нет. Сила js-инструментов не в языке, а в большом количестве модулей из NPM

10:22
@jsunderhood бовер же закопали???

Пока вроде развивается. Последний коммит в bower был вчера github.com/bower/bower twitter.com/skfd/status/65…

10:24
@jsunderhood @alexeyraspopov ну так ты можешь использовать ванилу, или любую модульную систему или сбилдить в UMD и стянуть это через npm.
10:55

В комментариях хоронят Bower. Для профессиональных js-разработчиков он действительно уже не нужен.

11:04

.@jsunderhood но иногда бэкенд-разработчики хотят сверстать что-то маленькое. Они не хотят настраивать сборку, они Bower как раз для них

11:06
@jsunderhood @m_arzubov @alexeyraspopov это в основном jquery-плагины. в этом кейсе действительно есть смысл делать билды

Да. Можно сказать, что Bower это каталог jQuery плагинов и других UI-штук для простых проектов twitter.com/iamstarkov/sta…

11:07
@jsunderhood @iamstarkov @m_arzubov если люди способны написать
bower install N
не будет сложно написать и
browserify index.js > bundle.js
11:09

.@alexeyraspopov @iamstarkov @m_arzubov написать один раз несложно. Проблемно настроить автоматическую сборку вместе с backend-кодом

11:10
@alexeyraspopov @jsunderhood а как же разделение библиотек нужных для сборки например и тех, которые уйдут на фронтенд?
11:10

.@SilentImp @alexeyraspopov я кладу библиотеки для frontend в dependencies, а те что для сборки – в devDependencies

11:11

Вот еще тема для обсуждения: Не кажется ли вам, что сахар из ES6 может превратить язык в Perl, которого все боятся из-за нечитаемости

12:15

@jsunderhood например, вот такой код из примеров Redux с первого раза сложно понять pic.twitter.com/ERFFozstoq

12:16
@jsunderhood Все что угодно может быть превращено в Perl, если вовремя не бить по рукам (себе в первую очередь).
12:18
@freiksenet_ru @jsunderhood Это просто currying, как в любом функциональном языке. Если знаешь паттерн, даже не думаешь про это.
13:05
@dan_abramov @jsunderhood Если разбить по строкам то читатся будет гораздо лучше ;) Проблема не в карринге, а в том как это написано.
13:05
@jsunderhood сложность этого кода — проблема Redux, не ES6.
13:05
@jsunderhood привыкнем) а самому писать можно и без сахара, если страшно
13:08
@alexeyraspopov @jsunderhood @dan_abramov @freiksenet_ru Но да, в мире JS это единственное каррирование, которое есть, пусть и ограниченное.
13:22
@RReverser @jsunderhood @dan_abramov @freiksenet_ru полно нормальных имплементаций. Свое решение пишется также легко pic.twitter.com/RHSJlJT0T4
13:25
@jsunderhood Тем более, такое API позволяет легко делать и сохранять в замыканиях общие инициализации на любом шаге.
13:30
@jsunderhood Это часто бывает нужно, и обычное каррирование такой возможности не дает.
13:30
@jsunderhood @RReverser ИМХО в #redux апи не большое, но понимание сложнее вот именно из-за этого функция->функция->… Сложнее цепочку разоб
13:36
@jsunderhood А что документировать? В твоем скрине инициализация не нужна, в другом будет нужна. Все дело в гибкости, чтобы покрыть оба.
13:38

.@RReverser сейчас не понятно, какая из функций вызовется один раз, а какая на каждый action. Если это описать, то станет лучше @dan_abramov

13:40
@serhey_shmyg @jsunderhood Воспринимай это как упрощенный вид джавоподобной цепочки классов. К этому быстро привыкнуть и удобнее.
13:41
@jsunderhood @dan_abramov А по-моему, наоборот, понятнее - та что непосредственно с аргументом action, та и на каждый, те что без - 1 раз.
13:44
@jsunderhood @dan_abramov Но да, описать можно, чтобы люди не терялись.
13:44
@jsunderhood @RReverser я бы сказал карринг ради замыканий. Просто в этом примере они не используются. Но это не значит, что это не нужно.

Из-за отсутствия примера где используется, публике кажется, что не нужно twitter.com/blia/status/65…

13:45
@jsunderhood главная причина нечитаемости перла это неявные переменные (всякие $_, @_, $&). В js пока ничего подобного вроде не наблюдается.
14:09

Расскажите, что сегодня случилось с PhantomJS? Вижу много знакомых людей в тикете: github.com/Medium/phantom…

16:39
@jsunderhood битбакет лежал
16:44

Полная история такая. Есть karma-phantomjs-launcher c peerDependency npmjs.org/phantomjs. Этот модуль скачивает phantomjs при install

16:46

@jsunderhood этот модуль отличный пример как модули делать не надо. Он завязывается на чужую инфраструктуру, а значит ненадежный

16:47

.@jsunderhood для себя я давно сделал заглушку github.com/just-boris/pha… которая отдает phantomjs установленный в системе. Работает с 2.0 тоже

16:49

@jsunderhood еще вариант: github.com/eugeneware/pha… этот npm модуль хранит phantom внутри себя. Работает всегда, когда жив NPM (и весит 90Мб)

16:53

По пятницам приходит рассылка javascriptweekly.com. Всегда есть что-то интересное. В этом выпуске рассказали про rollupjs.org

17:32

@jsunderhood Rollup.js сборщик модулей, который умеет выкидывать части модулей, которые не используются. В Webpack2 будет так же.

17:33

ProTip: Пользуйтесь скриптами pretest и posttest вместо того, чтобы писать в одну строку через && pic.twitter.com/JEfbnmIhyB

19:07

Завтра суббота, выходной, поговорим на свободную тему, отвечу на ваши вопросы. Доброй ночи!

20:43

# Суббота 74 твита

@jsunderhood тоже советую эту рассылку, помогает быть в тренде и понимать что вообще творится в мире :)
10:54

Давайте сегодня поговорим про взаимодействие с бэкендом. Нужно ли вообще общаться словами или документации по API достаточно?

11:05
@jsunderhood поэтому общение важно, чтобы приходить к одному решению. Да, и еще не надо забывать что могут быть еще мобайлы
11:14

Нашей команде повезло, и front и server-side разработчики сидят в петербургском офисе. Это позволяет оперативно решать разногласия

11:15

Еще я стараюсь вникнуть в суть проблемы, когда джавист говорит, что не может добавить новое поле в ответ API.

11:16

.@jsunderhood часто это признак, что вас расхождения в структуре, а модели клиента не матчатся на модели сервера.Лучше узнать об этом раньше

11:18
@jsunderhood знать как работает бекенд очень важно, потому что ребятам с бекенда может быть просто впадло и они могут дурить фронтендщиков

Может быть, но сначала лучше проверить другие варианты twitter.com/m_arzubov/stat…

11:25
@jsunderhood тут еще надо сказать большое спасибо Node.js, его появление дало возможность Javascript`ерам понять как работает бекенд...

Не совсем. Можно написать свой сервер, но понять как работает IoC и зачем нужно много разных классов, это не поможет twitter.com/m_arzubov/stat…

11:27
@jsunderhood Мы даже сидим в одной комнате (команда небольшая).
11:29

.@Rukomoynikov а как устроен процесс? Back и Front пилят в своих ветках или все сразу в master?

11:29
@jsunderhood Мы только в свою, ребята из Back и в нашу тоже вливают новое API. Да, ветки отдельные. И у нас тоже Java.
11:35

Еще сервер очень часто возвращает огромную модель, даже если от нее нужно три поля. Это решается в GraphQL+Relay, но что делать остальным?

11:36
@jsunderhood jsonapi.org в помощь ))
вот тут jsonapi.org/examples/ во втором примере показано как брать только то что нужно
11:58
@jsunderhood Переходить на них :)

Не так-то просто, если есть уже написано много кода, который дорого переписать twitter.com/freiksenet_ru/…

11:59

В Twitter появилась возможность создавать опросы. Давайте узнаем ваше коллективное мнение

14:18
@jsunderhood Создай вопрос на табы vs пробелы, давно пора :)
14:20

.@RReverser пробелы, о чем тут еще говорить

14:21
@jsunderhood Потому и надо опрос, здесь периодически поднимается (напр. я за табы), но реплаи не так удобно :)
14:22

Давайте узнаем!

14:22
@jsunderhood Блин, TweetDeck их не показывает, только текст, если б не зашел в обычный, не догадался бы что здесь есть опрос.

Значит не обновился еще. Он вообще развивается? twitter.com/RReverser/stat…

14:29
@RReverser в чем плюсы веб-версии перед тем, что на twitter.com? @jsunderhood
14:39
@fuckingsun @jsunderhood Для меня основной плюс - табы под юзеров/сообщения/хештеги, удобно когда все на одном экране.
14:39
@RReverser спасибо за обзор, пойду затестирую. знаете какие-нибудь ещё веб-сервисы для чтения твиттора? @jsunderhood
15:00

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

15:02
@jsunderhood можно каждый написать и спрашивать: за или против
15:06
@jsunderhood Придётся делать много опросов с двумя вариантами, а потом опросы с победителями и т. д. ;-)
15:10

О Twitter! Место, где ты ограничен во всем: в числе символов, опций в опросе. Но я сейчас что-нибудь придумаю

15:11

Какие вообще есть кандидаты? Я знаю Angular, Backbone+Marionette, Ember, React

15:12

.@dcromster так-то можно и в контакте опрос сделать. Интересно как это оформить не покидая twitter

15:14

Будет проще, если я напишу твит о каждом фреймворке, а вы поддержите своего фаворита через favourites. Комбо с неск. опросами ненаглядное

15:22

Angular. Allure написан на версии 1.3. Плюсы – простота, к нам пришло много внешних контрибьюторов, которые легко делали нам фичи

15:23

@jsunderhood например, нам добавили поддержку i18n и переводы на русский и португальский с нашим минимальным участием

15:23

Backbone+Marionette. Хорошее комбо, его любят джависты, поскольку там тоже все на классах. Сейчас пишем на нем дополнение к Allure

15:25

Ember.js Написал на нем небольшой hello world, но активно нигде не использую. Опасаюсь, что для него меньше плагинов, чем у других

15:26

React. Изучаю его в рамках небольшого проекта на github: github.com/just-boris/rev… Регулярно спотыкаюсь о странные вещи, но в целом норм

15:28

@jsunderhood например, я не вызывались JSX-компоненты. Как об этом спросить в сети: "Парни у меня html-тег не вызывается?"

15:30
@jsunderhood ember addons - очень удобные. Легко подключать и испольозовать. Плюс есть рейтинг аддонов.
==> emberaddons.com
15:31
React. Изучаю его в рамках небольшого проекта на github: github.com/just-boris/rev… Регулярно спотыкаюсь о странные вещи, но в целом норм

Ставим стар к одному из 4 твитов
twitter.com/jsunderhood/st…
twitter.com/jsunderhood/st…
twitter.com/jsunderhood/st…
twitter.com/jsunderhood/st…

15:36

@jsunderhood вечером посчитаю и опубликую результат

15:36
@jsunderhood лично я использовал аддон от Semantic.
emberobserver.com/addons/semanti…
github.com/Semantic-Org/S…
15:43

Итак, мы узнали, что есть много UI-компонентов для Ember. А как обстоят дела с этим у React?

15:55
@jsunderhood react-components.com например. Но есть приколы типа jQuery плагинов, завернутых в реакт-компоненты.
15:58
@jsunderhood а вот для реакта. Кстати толкового меньше готового. говнецо в основном как для jquery
16:01

.@Bardty @iamstarkov а github.com/react-bootstra… пробовали? Плюс Bootstrap в том, что он дает сразу много компонентов в одном стиле

16:02
@jsunderhood @Bardty @iamstarkov я если честно, не сильно понимаю эти бс под компоненты. Что они дают? написать на 2 класса меньше? 1/2

Я в первую очередь пользуюсь им за то, что можно набросать форму вообще без единой строчки в css и будет красиво twitter.com/blia/status/65…

16:13
@jsunderhood Пользуюсь им, очень нравится. Они полность переписали JS Бутстрапа. Но все проблемы CSS остались. @Bardty @iamstarkov
17:18
@jsunderhood а как же meteor, knockout, riot, vue, derby, circle и миллионы других фраемворков. Этот опрос изначально не имеет смысла.
17:20

.@hellbeast92 они не такие популярные. Но если в них есть какие-то особые достоинства, можно о них рассказать

17:24

Еще есть aurelia.io Этот фреймворк разрабатывает человек из Angular, сбежавший от ада TypeScript в версии 2.0

17:26

@jsunderhood в организации на Gihtub у них настоящая секта с однотипными аватарками pic.twitter.com/YXOI8I3TOY

17:27
@jsunderhood а что не так с TypeScript?
17:45

.@dmitryshimkin c самим TypeScript все норм. А вот толстый слой абстракций, написанных на нем в Angular 2.0 это не ок

17:46
@jsunderhood @dmitryshimkin я бы сказал наоборот, Angular 2 это то, что я ждал очень давно.
17:53

.@Vitalliumm @dmitryshimkin а какие в нем преимущества?

17:55
@jsunderhood @dmitryshimkin если в общем, они учли ошибки и косяки 1 версии, и ликвидровали их во 2 (например, наследование скоупов)
17:57

.@Vitalliumm с этим соглашусь. Но в то же время наделали новых, усложнив архитектуру. Я уже видел этот подход в ExtJS и где он сейчас?

17:58

Результаты голосования
Angular - 4 stars
Backbone - 1 star
Ember - 4 stars
React - 19 stars.
С победителем все ясно

18:50

А что произойдет через год или два? Останется ли React так же в топе, или появится новый, кто "решит все наши проблемы лучше предыдущих"?

18:52

@jsunderhood тут могут быть два варианта развития событий: либо ФП становится необходимым минимум для js-dev, либо остается уделом немногих

18:53

В этом отношении мне нравится Backbone. Ему уже 5 лет, а он все еще актуален

18:55
@jsunderhood не. 2 года - это как раз итерация для фронтенда. Будет что-то новое популярно. Всегда так было.
19:01
@jsunderhood Backbone хорош тем что его можно юзать не только для SPA.
19:02
@blia Реакту уже больше двух лет. @jsunderhood
19:06

.@sapegin да, я пробовал 2 года назад и попробовал сейчас. Изменилось многое. Даже не сам react, а его окружение типа redux

19:08
@jsunderhood BB как jQuery. Он будет еще долго актуален за счет аддонов и сравнительно низкого порога входа.
19:11

ProTip: подпишитесь на рассылку вопросов со stackoverflow по тегу ES6 и вы будете получать ответы на вопросы, которые у вас будут в будущем

19:18
@jsunderhood а есть инфа, насколько фп сейчас распространено среди фронтендщиков?
19:39
@fuckingsun @jsunderhood ни на сколько. В лучшем случае 5% о нем слышали, а 2% его пробовали.

Цифра сильно зависит от того, что считать за ФП, а что – нет twitter.com/mr_mig_by/stat…

19:52
@jsunderhood отн.интерес в сентябре 2015:
react js - 96, flux js - 8, redux js - 6, prototypal inheritance - 2 pic.twitter.com/KI7x3plar6
20:11
@fuckingsun @jsunderhood с этой статьи надо начинать изучать react.
21:09

# Воскресенье 31 твит

Привет! Сегодня будет встреча SPB Frontend про React. Потранслирую, если будет что-то интересное

12:13

.@jsunderhood пока для погружения в контекст почитаю статью: teropa.info/blog/2015/09/1…

12:14
@jsunderhood &Co,посоветуйте i18n либу для Browser/Node, чтобы просто,удобно, .po умела и числительные (pluralization), и домены желательно.
12:45

.@KSDaemon подойдет? formatjs.io

12:45

Еще вчера мы затронули интересную тему готовых UI-kit. Есть два фаворита: Bootstrap и Material-UI. Есть еще варианты?

13:40

.@jsunderhood еще пробовал semantic-ui.com, но у них тоже имена классов не по БЭМ, это может привести к проблемам в будущем

13:42
@jsunderhood bem-components ?

Действительно выглядит интересно, тем более что там все классы по БЭМ twitter.com/greybax/status…

13:46

.@jsunderhood bem-components можно просто подключить как css и js с CDN Яндекса. Так я их интегрировал с Backbone: jsfiddle.net/z1cLLt4w/14/

13:50

Из других UI-kits с БЭМ-классами знаю еще topcoat.io

13:54

Использовать UI-kit без БЭМ-классов сложно. Свои стили хочется писать по БЭМ, и в проекте получается смесь французского с нижегородским

13:56
Сегодня и @jsunderhood, и @cssunderhood обещают быть на митапе @spb_frontend. Осталось 40 минут, кстати.
14:23
@jsunderhood пробелы победили

Ко вчерашнему опросу twitter.com/iamstarkov/sta…

14:30
@jsunderhood foundation живой еще?
15:03

.@Bardty живой, и кто-то даже пользуется (не я)

15:04
«Главная идея React — компонентный подход», по-моему компоненты вообще мейнстрим фронтенда так же и в БЭМ и в Web Components

Потому что так проще вести разработку twitter.com/spb_frontend/s…

15:22
Таблица сравнения всех flux-фреймворков, но используйте Redux docs.google.com/spreadsheets/d…
15:37

Говорят, тестировать в node лучше чем с Karma. Я в четверг говорил о том же pic.twitter.com/TMFZkqIsMB

15:41

У @andreypopp забавные слайды под углом. Удобно снимать с моего места pic.twitter.com/q4kVoIIGDR

16:00

CSS-модули обфусцируют имена классов. Не забудьте оставить метки по которым смогут кликать selenium-тесты, если они есть

16:25
Redux появился как маленький пример для доклада @dan_abramov про Hot Reload — к вопросу о том, зачем нужно выступать на конференциях
16:39

Знакомьтесь — это redux pic.twitter.com/qqrhQXiMlm

16:48

Стоит заметить, что у 2 из 3 докладчиков были слайды на английском. Вот такого уровня митапы устраивает @spb_frontend

17:17
@mr_mig_by @jsunderhood @spb_frontend и каждый в зале понимал, что там написано! в этом суть!

Да, это иллюстрация к вопросу, нужен ли разработчику английский twitter.com/fuckingsun/sta…

17:26

ProTip: поставьте себе f.lux: justgetflux.com это приложение подстраивает яркость монитора под время суток. Это полезно для глаз

18:19
@jsunderhood да, и это хорошо, тоже пользую 👍
18:30
@jsunderhood я себе поставила pace — остальные уродливые были( itunes.apple.com/ru/app/pace/id…
18:41

Ну вот и все. С вами был @boriscoder, на Github записан как github.com/just-boris. Я продолжу писать свои protips уже в своем профиле

18:59

Спасибо вам, что приняли участие. Вы хорошая и интересная публика! coub.com/view/8gdgx

19:00

github.com

other