Йойойо! С вами на этой неделе Валентин Семирульник @7rulnik
Я работаю в kupibilet.ru и у нас тут упала прода :D pic.twitter.com/mU4iUFgVPl

Мы её поднимем, посидим на стендапе, я вставлю рабочую ссылку на КупиБилет и мы начнём
kupibilet.ru

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

На часть вопросов буду отвечать сразу, на часть когда дойду до подходящей темы. Ну, всё как обычно, ю ноу

Мне 21 год, 3 года назад я переехал учиться в Питер из Владивостока

С вебом я столкнулся впервые лет в 12. Я тогда играл в WoW и очень уж захотелось сделать сайт для гильдии.

Немного поисков и вот я уже на ucoz.ru делаю сайт своей мечты с падающими снежинками и прочими радостями жизни

Я совсем ничего не понимал, писал какое-то подобие CSS'а и вскоре сайтик забросили

Через 2 года всё в той же игре я увидел у другой гильдии «крутой» сайт с каким-то подобием дизайна

Спросил парня, который им занимался. Ну он мне и говорит: «Чувак, тебе нужна Joomla! Вот тебе мой хостинг, вот тебе документация. Дерзай!»

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

Мне 14, хочется иметь что-то на расходы и в голову приходит замечательная мысль: можно ведь продавать сайты!

В итоге я продаю около 5-6 сайтов на варезных шаблонах. За каждый от 6 до 15к. Лук, ма, айм бизнесмен!

И примерно с той же скоростью «дело» глохнет. Я переключаюсь на фотографию и до 18 лет не вспоминаю о вебе.

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

@jsunderhood делал свой бизнес на фрилансе, в том числе и на варезных шаблонах. Самая крутая продажа принесла 23к, вроде :)

Поступил на информатику и вычислительная технику в Технологии и Дизайна. По пути наименьшего сопротивления: куда взяли — туда и пошел

Мысли о вебе не покидали головы, но я ничего не предпринимал, просто ходил на пары, и, внезапно, снова начал играть в WoW

Меня бросила девушка, ну потому что как такое терпеть: приходим с пар и я за компуктер и так до ночи. Ну и правильно сделала.

Это привело меня в чувство, я подумал «ну и чего мы сидим?»
На тот момент я жил с дизайнером @uvarov_ и мне предложили поверстать

Ну и поверстал. 2.5 года уже как :D

Сейчас попробую поднять пару старых страничек. Если, конечно, вспомню как там Grunt запускается

Так, оно сбилдилось. Оказывется, у меня там даже JSHint был на лэндингах. Поехали

Один из варезных монстров:
bs-checkpoint.ru
Мой первый лэндинг:
designgames.7rulnik.ru

Ну и до кучи:
callpy.7rulnik.ru
vprave.7rulnik.ru
dg-new.7rulnik.ru

@jsunderhood А — адаптивность pic.twitter.com/pdtyNIaWeU

После фриланса и компаний с лэндингами на коленке я попал в ru.4game.com
Первый положительный опыт и первый опыт с реактом

Каждый компонент маунтился в свой див, на клиенте сортировался и фильтровался массив из 50 тысяч объектов по 9 ключей. Лучшие практики!

После я попал на нормальный проект на реакте, но продержался всего месяц. А вот дальше было весело: я попал к рубистам

Верстать просто вьюхи на слиме, js.erb и коффескрипт! Джейквери с матчингом по дата-атрибутам в наследство от рубистов!

Я подвыгорел, было прям ужасно. Скука. Но нужно же было как-то развлекаться.

Местные фронтендеры @Akurganow и @oldster_ole сказали, что никому еще не удавалось завести ноду на сервере.

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

@jsunderhood @Akurganow @oldster_ole в смысле не удавалось? Это что сложно?

@lapanoid @jsunderhood @Akurganow на нашем сервере был какой-то старый центос на котором не заводилось ничего позднее 0.12

Пишу npm i и жду. Жду. Жду. Жду. Ну вы знаете. В итоге просто не хватает оперативки. Не помню как зарезолвили, но точно не апом машины

Ставлю @PostCSS во имя @andrey_sitnik и следующие 4 дня я трачу на выпиливание Sprockets

И вот что думает по этому поводу мой босс:
youtu.be/BVDxZ48poKo?t=…
и до 19:20

@jsunderhood а так вот кто работал 23 февраля

@jsunderhood @PostCSS @andrey_sitnik ты не можешь выпилить спрокеты из своего приложения, ты можешь выпилить своё приложение из спрокетов

@jsunderhood ты пиздец. Серьезно.

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

Но мораль в этой истории простая: если вам сразу очевидно, что вы не сможете работать в компании не перепилив половину, а то и все процессы…

… то уходите сразу, не творите, простите, хуйни :)

@jsunderhood Лет в 15 верстал людям сайт для их типографии. Сначала сверстал на чистом бутстрапе без стилизации, они сказали, что слишком

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

@jsunderhood (типа, сайт делал я), они это заметили, сильно обиделись и отказались работать дальше, но долларов 30 всё-таки заплатили :D

@jsunderhood не верная мораль. Ты пришел и такой умный и стильный в предрелиз меняешь технологию. Внедрять новое можно в начале проекта..

@jsunderhood или в процессе разработки, а не в самом конце.

Ты прав, конечно. Но я под процессами подразумеваю не только технологии. @gladkih_m

Моё маленькое преписывание было единственным лучиком света на тот момент. @gladkih_m

И уволился сам. Хотя, я так понимаю, были меня хотели уволить, но надеялись, что я исправлюсь.

@freiksenet_ru @jsunderhood мне кажется, человек уже достаточно страдает, чтобы его ещё и увольнять.

@twenty @freiksenet_ru @jsunderhood иногда уволить — спасти от страданий

Ушёл я работать в купибилет. На данный момент уже 5 месяцев.

На сегодня, думаю, хватит.
Завтра расскажу о том, как устроен наш проект и чем я вообще занимаюсь в нём.

О планах:

Как итог: за 2.5 года сменил 4 места работы. ЗП выросла в 5 раз.

Меня спрашивали на каждом собеседовании об этом. Я объяснял. Офферы были.

@roman_says_hi @jsunderhood на мой взгляд это норма, не всем же везёт найти классную команду/работу с первого раза

Привет! Сегодня расскажу про КупиБилет и наш фронт.
О том, с какими проблемами я столкнулся, когда пришёл, как их решал и т.д.

Если коротко:
L for Legacy!

У нас есть 2 основных проекта:
kupibilet.ru — сам фронт и внутренняя админка на полимере.

Админку я стараюсь обходить стороной. Мы собираемся её переделывать на реакт и схожую архитектуру с фронтом.

Изначально, на собеседовании, я интересовался что используется на фронте. Мне честно говорили о существующих проблемах.

Сказали, что есть реакт, ол инклюзив.

Так сложилось, что те проекты, в которых я участвовал выглядели довольно таки образцово. Актуальные версии, Бабель, вебпак.

Ну, оказалось всё не так.
В первый день я увидел симпатичную строчку в package.json:
"react": "0.10.0"
Смотрел я на неё примерно так
Т__т

Если вы ничего не знаете о реакте, то эта версия была актуальной 2.5 года назад

В такой ситуации стоит найти «хранителя легаси» — человека, который всё это писал и почему-то не обновлял. Спросите его: а почему?

Получил такой ответ:
«Ну, мы кое-где используем недокументированное API реакта и не можем обновиться…

…но я за 2 года проблем не встретил из-за старой версии»

@jsunderhood Да ладно, реакт не то чтобы сильно поменялся с тех пор.

@freiksenet_ru та не, ну 0.10 - это уж слишком давно. .createClass (пробрало дрожью) @jsunderhood

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

… ой, у меня же устаревшая версия моего любимого фрэймворка/библиотеки

Я пишу об этом в контексте реакта, но это верно для любой технологии. Рано или поздно вы сами себя ограничите, …

… если не будете поддерживать актуальность.

Следующей находкой была странная папочка web_modules. Я открыл её и пожалел.

Там меня ждали закомиченные нод-модули. Но самое смешное, что часть из них была указана и в package.json.

Оставался вопрос: а одинаковые ли версии в папке и в джэйсоне?
Ответ, думаю, предсказуем.

На первый взгляд задача была простая: пройтись по модулям в папке, достать их версии, установить через npm — проверить работоспособность.

На деле меня ждали какие-то закомиченные форки, сделанные до меня. Их еще предстояло найти, т.к. «хранитель легаси» не мог их назвать

В данном случае есть 2 варианта:
1) сравнивать репо в package.json форка с репо оригинального пакета. Если форк делали по уму, то он будет…

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

2) если вам не повезло и первый способ не сработал, то стоит проверять дифф пакетов целиком. Могут различаться бинарники и сам package.json…

… но вас интересуют все остальный файлы.

В моём случае помогу второй вариант. Вот что я нашел:
github.com/kupibiletdev/j…
github.com/kupibiletdev/r…

Я уже сам перенес их в организацию. В принципе, в этих двух пакетах ничего страшного нет, а вот в следующих…

github.com/kupibiletdev/r…
github.com/kupibiletdev/u…
передаю привет @andreypopp

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

Ребята захотели опциональные дублирующиеся параметры, которые преобразовывались в массив. pic.twitter.com/FsQO3Ej8CP

Ещё стоит заглянуть в конфиги вебпака/галпа/etc. Возможно, что-то сразу бросится в глаза.

Или sass компиляция по неправильному глобу: styles/**/*.sass вместо styles/main.sass

Составляем список вещей, которые предстоит фиксить.

У меня получился примерно такой:

После формирования списка стоит сгруппировать задачи по группам. Мне подошла такая группировка pic.twitter.com/W24Tc962n9

$ и SSR соотвественно стали не срочными, реакт и бабель важными и срочными, чанки и кэш где-то по середине

Но тут важно время, которое нужно на задачу. В моем случае кэш и тюнинг конфига вебпака стали более приоритетными, т.к.…

… позволили приложению жить лучше за маленький промежуток времени.

@jsunderhood а чем замените ajax от jQuery? тоже думаю над этим вопросом

@jsunderhood уверен что rr лучше чем rrc? У них уже скоро 4ая версия API, тогда как rrc—rock solid все 3 года :) (тем более уже работает)

Об этом расскажу завтра.
С роутером было много боли.
@finick_net @andreypopp

Вчера я рассказывал о том, с какими элементами легаси я столкнулся и совсем чуть-чуть про то, как их фиксить.

Сегодня подробней про обновление реакта, с какими проблема столкнулись, сколько времени заняло и всё такое.

К обновлению реакта я подступался раза 4.

Блокирующими проблемами стали как раз наш роутер и локализация, которая основывалась на внутреннем апи. В добавок ко всему она не работала.

Я, почему-то, очень боялся роутера, и пытался накостылить. Пробовал обновить роутер сам, ручками. Особым успехом это не увенчалось.

Правильным решением на тот момент было бы разобраться с тем, как работает измененная часть и попытаться переделать её на…

… стандартное апи роутера. Но правильные решения — это слишком просто.

Мне удалось обновиться до react@0.11, но половина роутов откололась. Вернулись на 0.10.
Я потихоньку начал впадать в отчаяние…

… и решил отвлечься на более простые задачи. Ими стали кэширование, оптимизация сборки.

С кэшированием история простая — берешь и делаешь, а вот с оптимизацией всё немного интересней.

КупиБилет небольшое приложение. У нас есть главная, страница выдачи, 2 страницы букинга, страница спасибо и еще 4-5 в личном кабинете.

Есть часть на handlebars, которая отдается экспрессом. Там совсем чуть-чуть, но выглядит это мерзко. Хедер, футер, часть формы, пара блоков

Много модулей взаимосвязаны и реиспользуются. В этой каше мне помог разобраться webpack analyze

webpack --profile --json > analyze.json, получаем файлик, заливаем на webpack.github.io/analyse/ и любуемся

У меня не осталось графа с тех времён, но вы увидите что-то вроде этого. Обратите внимание на «цветочки» pic.twitter.com/GL65uywtLq

Это могут быть проблемные места, в которых библиотека импоритрует своим зависимости, которые на самом деле вам не нужны.

Классический пример: moment.js. Вебпак импортирует все существующие локали. Это легко решается с помощью webpack.ContextReplacementPlugin

Что-то вроде new webpack.ContextReplacementPlugin(/node_modules\/moment\/locale/, /(ru|en-gb)/)

Так же вебпак можно запустить с флагом --display-modules
Список модулей будет в консоли. Не так наглядно, но часто эффективней.

Вернёмся к апдейту реакта:
самое главное правило — don't rush

Самая глупая идея, которая может придти в голову — обновиться с 0.10 до 15.3 за раз.

Но после еще нескольких попыток обновиться маленькими шажками было решено обновляться сразу до 15 версии

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

Локализация, кстати, яркий пример того, что лучше не усложнять. KISS.
gist.github.com/7rulnik/94cc5f…

Прыжок через несколько мажорных версий это сложно.
Очень легко выгореть во время таких процессов.

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

И ничего не работает, конечно же.

В такое не стоит ввязываться одному. Делайте это как минимум с напарником. Лучше с двумя. Мы делали это втроём.

Нас было трое. Слева от нас была лава, справа драконы, перед нами новый реакт, но его загораживал бизнес.

Эту тему поднимал @shuvalov_anton
Если вам дают время на апдейт или рефакторинг и не трогают, то вам повезло.

Нам повезло не очень. Бизнес хотел фич, смотрел на нас и разводил руками.

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

Мы пошлим по следующему пути:
1) начинаем с самых простых страниц
2) меняем commonJS на ES модули
3) остальное стараемся не трогать

Поправил ссылку на старую локализацию:
gist.github.com/7rulnik/30fad3…

C обновлением до ES6 вам поможет lebab.io
Но настоятельно не рекомендую конвертировать код сразу.

Делайте это по компонентам и уже после апгрейда

Очень большой риск что-то сломать.

В целом на миграцию мы потратили около месяца. Постоянно вылезали какие-то баги…

… где-то не хватало текстов, т.к. тексты из словаря мы тащили обратно в компоненты.

Немного поехала вёрстка, т.к. с 15 реакта не рендерятся лишние спаны.

@jsunderhood от проекта тоже зависит да. Например они не предназначены для случаев когда кто-то юзает кишки реакта =D

Но в целом, всё оказалось не так страшно.

@jsunderhood мы в rublevka.ru ищем 2 фронтэндеров: делаем сайт и внутреннюю CRM. Москва, до 150к каждому
docs.google.com/document/d/1CR…

@ilnurkhalilov @andreypopp @jsunderhood во.

Вышла четвёртая версия Реакт-Роутера с обновлённым АПИ и новым сайтом с документацией — react-router-website-uxmsaeusnn.now.sh pic.twitter.com/uIACb4ZbG4

15:07

@freiksenet_ru @jsunderhood почему?

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

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

@smashercosmo Раньше все и так работало. Главное что сломали базовую идею что роуты это верхий уровень. @jsunderhood

Немножrо про $.ajax — фолловеры вчера срачик устроили

Большинство за fetch, но есть несколько моментов.

@iamstarkov @evgenyrodionov @finick_net @jsunderhood когда fetch научится абортить реквесты - то да, а пока - старый добрый superagent.

АПИ не такое большое и только начали переделывать клиент под него

@freiksenet_ru @smashercosmo @jsunderhood Ничего и не получится, если вместо того, чтобы разобраться в причине изменений, писать такие твиты

@freiksenet_ru @smashercosmo @jsunderhood Никто не утверждал что там что-то делалось «из-за чистоты API». Откуда это?

@dan_abramov @smashercosmo @jsunderhood

@freiksenet the focus was one "how does React's declarative, composable model apply to routing" and we nailed it. @dan_abramov

15:41

@freiksenet_ru @smashercosmo @jsunderhood Изменения продиктованы опытом использования роутера в реальных проектах авторами и комьюнити.

@freiksenet_ru @smashercosmo @jsunderhood @freiksenet Когда авторы так говорят, часть про «думал про 100 issues и use cases» подразумевается

Про чанки:
когда я пришёл, было свое решение и кучка энтрипоинтов
gist.github.com/7rulnik/dee76c…

В процессе апгрейда сделали тоже самое, что я уже делал для react-boilerplate
github.com/mxstbr/react-b…

Каждая страница — отдельный чанк, который создаётся через System.import если у вас webpack@2 или require.ensure если первый

Так избавились от костыля и ручного создания энтрипоинта.

По дороге решили озаботиться вендор чанком и наткнулись на это ишью github.com/webpack/webpac…

Так что если у вас CommonsChunkPlugin, то он может работать не так, как вы ожидаете. Проверьте.

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

@jsunderhood пипец, как всё в этом вебпеке заморочено. 100500 способов борьбы с этим багом, и все делают вид, что это нормально.

Йойойо, сегодня про организационные штучки

5 месяцев назад от старой команды остался 1 фронтендер и верстальщик, репо с 124 бранчами и никакой инфраструктуры

На данный момент у нас 6 фронтендеров и более-менее понятное флоу разработки

Когда приходишь в компанию, нужно понять на сколько у тебя связаны (или развязаны) руки.

Есть 2 фактора: руководство и команда.
С руководством проблем не было. «Делайте как считаете нужным».

А вот с командой вышло забавно: фронтендер был в отпуске и никто из новеньких не знал даже о его существовании.

И мы на радостях побежали вкручивать линтеры со своими любимыми код-стайлами. Это было первой ошибкой.

2 недели назад @thought_sync об это писал. Не стоит менять никакие процессы в первое время.

Влейтесь в команду, даже если команда — 1-2 человека

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

2 недели назад @thought_sync об это писал. Не стоит менять никакие процессы в первое время.

9:12

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

Не удивляйтесь вопросам «Нафига?» в более грубой форме.

Но всё реально. Главное делать всё постепенно.

Для начала решили переехать в новое репо и попробовать гитфлоу. Тут мы выстрелили себе в ногу.

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

Вместе с порядком мы создали себе дополнительные сложности.

Следующим пунктом было обновление гитлаба и введение минимального код-ревью. Без него особо не получится обновлять легаси-код.

Убедить команду в том, что им это нужно оказалось довольно таки легко.

Первое волшебное слово — тесты. Все сразу начинают понимающе кивать и говорить «тесты это хорошо». Еще бы тесты кто писал. Об этом попозже

А второе — «ну, вы же должны мой код ревьювить!». Коллега получает власть и перестаёт чувствовать себя ущемлённым.

Немного отвлекусь:
говорят там Ангуляр 2 релизнули и… toddmotto.com/angular-3-alpha

Про линтеры:
линтеры — это хорошо

Но не все из команды с вами согласятся.

Если вы можете взять любимый конфиг airbnb или standard, и никто не подерётся — вам повезло.

Придерживаемся принципа: красивый дифф, минимум ненужных символов.

Решили внести eslint и все плагины прямо в зависимости конфига, чтобы разруливать всё в одном месте, а не бегать по проектам и обновлять всё

@boriscoder @jsunderhood у нас есть ещё такой кейс, когда залез в легаси код — переделай, чтобы линтер не орал. И это жопу рвёт в основном

Кстати, про IDE: часто ребята воют, что линтер говно и не нужен. Их проблема в воркфлоу.

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

lint-staged хорошая штука, но она не спасает. В модуле 150 ошибок. После автофикса 70. И их нужно пофиксить.
medium.com/@okonetchnikov…

А часто это хотфикс, который нужен через 15 минут на проде.

Всегда есть git commit --no-verify, но начинается злоупотребление.

Можно проверять дифф между бранчами на CI и находить хитрецов. Планируем вкрутить это в пн.

В целом флоу такое:
1) прикрутить линтер чтобы он просто подсказывал ошибки
2) Добавить lint-staged, но допускать git commit --no-verify
…

…
3) проверка только измененных файлов на CI
4) Линтим все файлы (это, кстати, опционально)

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

@jsunderhood потом по одному правилу включаю опять все фикшу повторяется и так далее..

Да, неплохой способ. Только я бы тогда сам стал ныть :D
@lapanoid

Кстати, моё личное мнение:
свои конфиги не нужны. Только экстенд. Если у вам нравится писать конфиг самим, то с вами что-то не так.

Уж лучше все на постцсс переписать или роутер обновить за это время :D

Вчера немного выпал из графика.

На прошлой неделе речь заходила про стайлгайды и набоор UI-компонентов.

Т.к. мы готовим редизайн, то для нас это более чем актуально.

К счастью, дизайнер толковый, понимает компонентый подход и взаимодействовать с ним довольно легко.

Выбирали из следующих стайлгайдов:
github.com/carteb/carte-b…
github.com/sapegin/react-…
github.com/kadirahq/react…

Он хорошо делит на компоненты. В принципе, достаточно просто взять его символы из скетча и сделать его компонентом.

И советуется «а можно сделать так?» и т.д.

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

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

Следующим был carte-blanche. Очень понравилась фича с генерацией пропсов, но уж очень сыро. Смутило то, что даже примеры не завелись.

В итоге взяли react-styleguidist.js.org и вроде бы было всё хорошо. Не очень нравилось описывать компоненты в markdown…

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

Но оказалось, что он не дружит с HoC'ами.
github.com/sapegin/react-…

Я стал снова читать про сторибук и увидел вот это:
github.com/mthuret/storyb…
Этот аддон «продал» мне сторибук.

Правда, сейчас он работает только с 14 версией Jest, так что PR welcome

И совсем недавно зарелизили github.com/kadirahq/story…

Мы терпим кое-какие неудобства сторибука связанные с iframe'ами, но для нас, кажется, это лучшее решение.

@roman01la, у нас на проекте был верстальщик который делал компоненты. Я тоже делал функционал и верстку одновременно @jsunderhood

@roman01la, и круто когда программист верстает, а не верстальщик делает компоненты, потому как всего сразу нельзя предвидеть @jsunderhood

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

Карета готова превратиться в тыкву. Удачных апдейтов и рефакторинга вам.

С вами был @7rulnik