Всем привет! Я @xnimorz. Работаю в @hh_ru. Прошел в hh.ru путь от фронтендера до тимлида и сейчас… twitter.com/i/web/status/1…

В какой-то момент я осознал, что люблю больше чистый язык, чем фреймворки, но удобство, которое дают при разработке… twitter.com/i/web/status/1…

Я для себя получил ответ в pet-projects и open-source проектах. Так, мой последний эксперимент был со Svelte:… twitter.com/i/web/status/1…

На этой неделе постараемся чередовать технические темы и soft skills. Пока план такой

Предлагаю начать с паранойи. И несколько вопросов: Сколько браузерных расширений у вас установлено?

Вы их проверяли, что они "белые и пушистые"?

Я свое знакомство с разработкой браузерных расширений начал еще в 2015 году с написания плагина, который заменял ne… twitter.com/i/web/status/1…

Уже затем я создавал плагин для нашей системы для HR менеджеров: chrome.google.com/webstore/detai… и после этого занимался пе… twitter.com/i/web/status/1…

Главная проблема с браузерными расширениями — их редко воспринимают как реальную угрозу.
Однако, у них есть все ин… twitter.com/i/web/status/1…

Расскажу несколько тру-стори, а потом уже перейдем к техническому разбору.

История 1 про безопасность: Cоздаю себе аккаунт в некоторой условной социальной сети, ввожу телефон и email. В наст… twitter.com/i/web/status/1…

Через пару дней на email \ телефон начинает приходить спам. Что происходит? Соц. сеть продает мои данные? Она взломана?

На самом деле все куда как проще. У пользователя стоит плагин, который делает какую-то полезную штуку для него. Но… twitter.com/i/web/status/1…

Затем передает это в BackgroundScript, который уже отправляет наши контакты в спам-базы, причем с именем, фамилией… twitter.com/i/web/status/1…

Самое грустное в этой истории, что отследить, что твой сайт кто-то "парсит" таким способом — практически нереально.… twitter.com/i/web/status/1…

Учет финансов, синхронизация между всеми членами семьи, разделение прав и многое-многое другое.
Я периодически дел… twitter.com/i/web/status/1…

В какой-то момент, я проникся svelte и появилось желание разобраться, насколько он удобен, можно ли им пользоваться… twitter.com/i/web/status/1…

А потом при том же переходе на реакт появлялись боли: тут нужно PureComponent, там отписку правильную сделать, здес… twitter.com/i/web/status/1…

Немного по-другому у меня сложилась история со svelte.
Про плюсы svelte тут уже писали и мне лично svelte очень по… twitter.com/i/web/status/1…

1) Нестабильность API. Я разрабатывал на 3.12.1, а демку делал на другой версии (ниже). У меня в итоге сломался `bi… twitter.com/i/web/status/1…

2) Вам часто нужно будет разбираться в коде, который сгенерировал svelte. Особенно если вы делаете большое приложен… twitter.com/i/web/status/1…

3) Если вам нужно прокинуть класс, вам придется объявить его как :global(класс) codesandbox.io/s/svelte-input… (вот здесь в App.svelte пример).

4) Если вы делаете утилитарный компонент и вы хотите прокинуть все props в обычный элемент (например aria атрибуты… twitter.com/i/web/status/1…

5) Еще неудобство вот github.com/sveltejs/svelt…

6) Иногда вы зависите от порядка переменных: github.com/sveltejs/svelt…

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

История 2 про "случайно сломать статику сайта": блокировщики рекламы очень эффективно блокируют запросы к ресурсам.… twitter.com/i/web/status/1…

А все дело в том, что плагин просто решил, что STATic — это сбор статистики пользователя, поэтому радостно заблочил… twitter.com/i/web/status/1…

pic.twitter.com/k0za66EsfO

@jsunderhood @sbaha88 И это - постоянная головная боль для авторов расширений.

А ещё куча дельцов, которые встраи… twitter.com/i/web/status/1…

@jsunderhood @foodenko Всё так. Стараюсь минимизировать вектор атаки, снижая количество установленных разрешений.

Последняя история: расширения прокси могут также зарабатывать на пользователях. Это это не только то, что они получ… twitter.com/i/web/status/1…

После публикации они правда сменили способ монетизации :)

Итак, набор проблем ясен, скрипт может выполняться в фоне, может внедряться на страницу. Остается открытым вопрос,… twitter.com/i/web/status/1…

Всегда лучше знать, кого берешь себе. Можно проводить кучу действий над площадками, чтобы выдрать код, а можно (во… twitter.com/i/web/status/1…

Этот плагин будет крайне полезен при установке дополнений. Открыли стор, запустили плагин, посмотрели — насколько… twitter.com/i/web/status/1…

В первых же строках его кода должно закрасться сомнение, что его стоит устанавливать себе на машину.
Он откуда-то… twitter.com/i/web/status/1…

Если попытаться выработать алгоритм для паранойи, то что мне делать как пользователю?

1) Проверять каждое расширен… twitter.com/i/web/status/1…

2) Отключить обновление расширений, в которых не уверены или вообще всех: stackoverflow.com/questions/2765…

Что делать с проблемой мне как разработчику сайта? Я постараюсь дать ответ с разбором на HolyJs… twitter.com/i/web/status/1…

Ключевая проблема здесь — правило пишут для домена, и все поддомены автоматом наследуют эти правила

@PaulMaly @DonnaInsolita @jsunderhood @xnimorz @hh_ru youtube.com/watch?v=AEhO2q…

httpOnly прямо обязательно для любых авторизационных кук. Такие куки недоступны со стороны js.
Также можно использо… twitter.com/i/web/status/1…

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

Скорее всего большинство из нас пользуется react или vue devtools. Им нужны пермишены для общения с вкладками, обра… twitter.com/i/web/status/1…

Если вы получаете обращение в саппорт "сайт тормозит", часто саппорту приходится объяснять пользователю, как сделат… twitter.com/i/web/status/1…

В тему плагинов и блокировщиков рекламы (особенно, если у вас хром) — пробовали ли вы Brave вместо Chrome + блокиро… twitter.com/i/web/status/1…

Но с brave были некоторые сложности. Например, он блокировал сайт mvideo. Получилось зайти, только отключив guard

Integrity или Subresource Integrity идет вместе c Content-Security-Policy: require-sri-for script; что требует пров… twitter.com/i/web/status/1…

Плюс с поддержкой у require-sri-for все пока еще не радужно: developer.mozilla.org/en-US/docs/Web…

Куда эффективнее будет запретить все скрипты, включая inline, кроме своего домена, но и тут плагины будут исполняться.

Маленькое дополнение к svelte: пару дней назад выложили "The Return of 'Write Less, Do More'" от Rich Harris… twitter.com/i/web/status/1…

Не "Скрипты же действуют по-другому:", а "Расширения же действуют по-другому"

Как пример: приложение вставляет свои данные к нам на сайт, для добавления комментариев: chrome.google.com/webstore/detai…
Са… twitter.com/i/web/status/1…

Мое выступление на HolyJs holyjs-moscow.ru/2019/msk/talks…
Как раз будет про различные векторы атак и защиту от них.

@boriscoder @jsunderhood В кейсе описана регрешн бага насколько я понял, а они у всех бывают. Хотя в целом, чем мол… twitter.com/i/web/status/1…

Как и обещал, сегодня поговорим про тех.деп хх и процессы. Я сейчас работаю в команде архитектуры, где 100% времени… twitter.com/i/web/status/1…

Что есть типичная задача в моей команде?
На самом деле они очень сильно разнятся. Начиная от внедрения SSR для реа… twitter.com/i/web/status/1…

Кстати, организовать удобную работу с иконками на большом сайте — это может быть (внезапно) не самой тривиальной за… twitter.com/i/web/status/1…

Команда архитектуры занимается всем, что позволит повысить скорость разработки или качество кода. Из того, что перв… twitter.com/i/web/status/1…

Все изменения делаются для всей фронтенд группы, а не локально. Иногда во время таких задач появляются разные open-… twitter.com/i/web/status/1…

Здесь будет тред, о том, как организован технический департамент HeadHunter (большими мазками) >>>

У нас нас есть страница на tech.hh.ru/about.html, где описано достаточно подробно все, какие технологии мы исполь… twitter.com/i/web/status/1…

1) Технический департамент на текущий момент — это более 130 человек и 25 команд. Каждая команда — отдельный unit,… twitter.com/i/web/status/1…

Поэтому стандартная конфигурация команды это 1 фронтенд-разработчик, 1 бекенд, 1 тестировщик и 1 тимлид. В зависимо… twitter.com/i/web/status/1…

2) Владение кодом общее. Поэтому если команде, которая занимается работодательскими фичами, нужно добавить что-то в… twitter.com/i/web/status/1…

3) Команды разбиваются по своим ролям: работодательские фичи, соискательские сервисы, поиск, реклама, команды сайд-… twitter.com/i/web/status/1…

4) Бывает так, что какая-то команда больше занимается определенной частью возможностей, например, созданием ваканси… twitter.com/i/web/status/1…

5) У каждой команды есть product owner, с которым команда прорабатывает задачи. Команда участвует в проработке зада… twitter.com/i/web/status/1…

6) Большинство задач выпускаем под AБ-тестами. Обычно на проде одновременно включено десятки (а то и сотни) тестов.… twitter.com/i/web/status/1…

7) Полезная-интересная штука: кроме бизнес-задач у нас есть понятие "технического налога" — это термин похож на тех… twitter.com/i/web/status/1…

8) Более того, есть соглашение, что 30% времени работы команды могут тратить на налог.

К предыдущему пункту — еще более хорошая новость, что договоренность про 30% соблюдается.

9) Код храним на Github, ревьювим код через pull request. Коротко про ревью — любой может участвовать, должен быть… twitter.com/i/web/status/1…

10) Релизы ежедневные. Сегодня сделал \ протестировал задачу — можно сегодня собрать релиз или завтра она автоматически попадет в релиз дня.

11) Самих релизов в день может быть много. Очень много. Они могут быть большими. Пару недель назад было 4 релиза фр… twitter.com/i/web/status/1…

Это не считая остальных сервисов, которых у нас много (так как идем в стороу микро-сервисной архитектуры).

Тредик с фактами о фронтенд части (компиляция tech.hh.ru/about.html и интересных фактов): >>

1) Фронтенд делится на 2 стека: старый и новый. Старый это ванильный js + jQuery, на сервере html рендерится через… twitter.com/i/web/status/1…

Стили пишем в less, используем АНБ подход для разграничения стилей АНБ — верстка независимыми блоками, одно из перв… twitter.com/i/web/status/1…

2) На новом стеке включен SSR везде. Миграция отдельная большая тема, о ней поговорим на следующий день

3) Есть UIToolkit — блоко. Работает на двух стеках и состоит более чем из 120 компонентов. Начиная от кнопок и зака… twitter.com/i/web/status/1…

4) Кстати, на styleguidist документированы и легаси компоненты. Для написания примеров у нас используется кастомный… twitter.com/i/web/status/1…

5) Код транспайлится бабелем (тайпскрипта у нас пока нет). Используем в том числе такие штуки как optional chainig:… twitter.com/i/web/status/1…

6) Есть самописные бабель плагины. Некоторые могут быть полезны всем, некоторые специфичны: github.com/hhru?utf8=%E2%…

7) Код автоматически проверяем eslint github.com/hhru/eslint-co… — наш конфиг. Для стилей используем stylelint. Pretti… twitter.com/i/web/status/1…

8) Все фронтендеры пишут прослойку на питоне — это сервис, который выполняет роль API Gateway. Получить запрос поль… twitter.com/i/web/status/1…

Код в прослойке очень простой, веб-сервер c открытым кодом: github.com/hhru/frontik

9) Юнит-тесты. Их пишем на новом стеке обязательно. Кроме юнит-тестов есть более 8000 сьютов автотестов. Автотесты… twitter.com/i/web/status/1…

10) В каждом PR мы сделали индикацию code-coverage в зависимости от base branch. Основное правило — желательно, что… twitter.com/i/web/status/1…

Если стало меньше и если увеличилось: pic.twitter.com/sboHyTQO8a

11) Fun Fact: такой простой прием позволил заметно повысить code coverage

12) У каждого разработчика, тестировщика в компании есть отдельная виртуалка, со всеми сервисами. Вся разработка св… twitter.com/i/web/status/1…

Накатка веток, запуск тестов, обновление стенда — все автоматизированно. Например, у меня в 8 утра всегда происходи… twitter.com/i/web/status/1…

Во второй половине дня поговорим про Kanban, визуализацию процессов и как удобная и хорошая визуализация помогает разработке.

В хх я работаю больше 5 лет. И за это время я сменил 5 команд. В разных командах процессы могут отличаться очень за… twitter.com/i/web/status/1…

Сейчас в ХХ используется Kanban методология. Обычно для новых разработчиков это: стендапы, отсутствие спринтов и пр… twitter.com/i/web/status/1…

Кроме разработки (product delivery) все разработчики участвуют в проработке проекта (product discovery). Как должен… twitter.com/i/web/status/1…

В книгах можно встретить понятие бутылочного горлышка (bottleneck). Идея такая: во время проработки отказатсья от и… twitter.com/i/web/status/1…

Каждая команда определяет свой состав участников на такие проработки. Где-то 2 человека от команды, где-то вся кома… twitter.com/i/web/status/1…

Команда вместе с продактом разбирает проблему, набрасывает идеи решения и описывает user story. Обычно применяются… twitter.com/i/web/status/1…

Остальной процесс проработки задачи типовой — построили видение задачи, отдали на отрисовку, декомпозировали, задача упала в беклог.

В хх мы построили систему, которая рисует графики, помечает долгие фичи и позволяет даже "гадать", что происходило… twitter.com/i/web/status/1…

Мы используем базовые инструменты — кумулятивная диаграмма, box plot, гистограмму по статусам и сводные таблицы.

Нашел хорошую иллюстрацию, которая описывает что позволяет визуализировать кумулятивная диаграмма: pic.twitter.com/O3mjwmD1my

@seminioni @MrL1n @_bravit @PodlodkaPodcast @mobileunderhood @jsunderhood На фронтенд он уже нацелился holyjs-moscow.ru/people/2eqmuhq…

Часто может возникнуть вопрос: а чем отличается канбан от скрама?
Про это есть хорошая статья от Алексея Пименова:… twitter.com/i/web/status/1…

1) Отсутствие спринтов. Никто никогда не пытается "выпустить все задачи в пятницу, потому что спринт заканчивается"… twitter.com/i/web/status/1…

Если у меня задача сегодня протестировалась, то завтра она уже будет на проде. Кроме того, если очень хочется, можн… twitter.com/i/web/status/1…

2) Более явная вытягивающая система — "запросы" на задачи поступают от команд по мере образования вакуума на этапах… twitter.com/i/web/status/1…

Как только команда берет user story, в колонке "беклог" образуется вакуум. Это сигнал для продакта, что его нужно ч… twitter.com/i/web/status/1…

3) Визуализация — чем лучше визуализирован процесс, тем лучше команда понимает, в каком состоянии она находится, на… twitter.com/i/web/status/1…

Насколько важна визуализация процесса? Я для себя вывел, что хорошая визуализация решает 2 задачи:
1) Быстрее ориен… twitter.com/i/web/status/1…

Этот тред можно смело будет назвать — "о чем я бы хотел знать про визуализацию перед тем, как стал тимлидом"

Классический подход, который я встречал в куче мест: это когда заводят для задач разработчиков 5 колонок: туду, в р… twitter.com/i/web/status/1…

Тут мы сталкиваемся с первой проблемой. Если мы перевели задачку в тестирование, она тестируется или нет? Что с ней происходит?

Чтобы решить эту проблему, иногда возникает желание добавить метку или комментарий в задачку "ожидает тестирования"… twitter.com/i/web/status/1…

Это плохо тем, что любому члену команды, чтобы понять "а что там с задачей" придется открывать каждую задачу, искат… twitter.com/i/web/status/1…

Решением может быть разделение колонки Ревью на 2: "ревью: в процессе" и "ревью: готово". В этой системе тестировщи… twitter.com/i/web/status/1…

Решение легко масштабируется и на другие подобные проблемы. Мы получаем доску, на которой мы понимаем, что происход… twitter.com/i/web/status/1…

Вторая проблема: тестировщик находит критические баги в задаче. Выпускать нельзя. Здесь есть разные пути решения. М… twitter.com/i/web/status/1…

Зачем в этом случае такие навороты?

Задачка уже сделана, на нее уже потрачены силы\нервы\деньги\обсуждения. Приоритет такой задачи, скорее всего, выше,… twitter.com/i/web/status/1…

И тут мы подходим к такой штуке как определение приоритетов на доске.

Самый простой и "нативный" способ — это чтение справа налево по строкам. Т.е. мы сортируем наши swimlines по приори… twitter.com/i/web/status/1…

Члены команды при выборе очередной задачи проходят по этим swimlines и выбирают первую задачу, над которой они рабо… twitter.com/i/web/status/1…

В результате, если тестировщик перевесил задачку на разработчика, то разработчик, закончив текущую работу, открывае… twitter.com/i/web/status/1…

Преимуществом такого подхода является отсутствие излишних коммуникаций.

Этот подход можно использовать и для проведения стендапов. Идти по задачкам, справа налево. В теории, это позволяет… twitter.com/i/web/status/1…

Мы в двух командах пробовали сделать так для стендапа и каждый раз мы терпели фиаско. Потому что, во-первых, этот п… twitter.com/i/web/status/1…

У меня для вас подборка статей, как сделать качественный dropdown:

— a11y-guidelines.orange.com/web_EN/exemple…;
—… twitter.com/i/web/status/1…

HeadHunter не идеален, как и везде есть свои недостатки. Каждая команда может сама донастраивать процессы. Вот прям… twitter.com/i/web/status/1…

Поэтому главный инструмент, как и везде — общение и улучшение команды в которой работаешь, чтобы всем было комфортн… twitter.com/i/web/status/1…

Потому что тестировщик должен писать в чат или делать какой-то другой call, что эту задачу нужно доделать. Все из-з… twitter.com/i/web/status/1…

А сакральным знанием «она уже готова, нужно ещё чуть-чуть» обладает только разработчик и тестировщик. И про эту зад… twitter.com/i/web/status/1…

Куда как проще тестировщику навесить задачку прямо на доске на разработчика, не меняя этапа. И как только начнётся… twitter.com/i/web/status/1…

Есть ещё одна причина тестировщика не идти / писать сразу в чат. Это асинхронность коммуникации. Разработчик может… twitter.com/i/web/status/1…

Правильно настроенная доска работает как single source of truth — сама может разрулить коммуникацию.

Главное помнить, что это все еще css и если вы создадите просто :global(.child-class) то эти стили также применятся… twitter.com/i/web/status/1…

@jsunderhood @oburejin Соглашусь pic.twitter.com/FmBudIeeHQ

@jsunderhood @PaulMaly @boriscoder Критичные проблемы в Svelte 3 встречаются в сложных ситуациях, которые выходят з… twitter.com/i/web/status/1…

Вчера я спрашивал про иконки — было бы интересно послушать, что там нетривиального и как с ними работать. Иконки, д… twitter.com/i/web/status/1…

Тред про иконки. >>>

Ограничения в задаче: есть базовые иконки, которые используются везде. Есть специфические иконки, которые выполняют… twitter.com/i/web/status/1…

Сверху добавляем браузерную поддержку и желание, чтобы иконки кешировались, реиспользовались и работали на двух сте… twitter.com/i/web/status/1…

Накидываем, прототипируем варианты:

Код прототипа для inline варианта (вместе с кастомным webpack loader): gist.github.com/xnimorz/8dfe0c…
Лоадер направляем на .svg иконки.

Выглядит просто и легко, но каждая иконка — это куча тегов в DOM, а значит куча данных, которые используются при SS… twitter.com/i/web/status/1…

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

2. Можем улучшить этот вариант и использовать inline svg + use директиву.

Идея такая: на этапе сборки превращаем все иконки в одну большую мега-иконку, где весь контент описан, например в `… twitter.com/i/web/status/1…

Код становится проще, нам уже не обязательно делать кастомный лоадер. Достаточно обычного react-компонента: gist.github.com/xnimorz/543dc8…

Вместо одной большой мега-иконки можно использовать другой подход: в компоненте icon храним singleton-Map, в ней от… twitter.com/i/web/status/1…

Если добавляется новая иконка, то вставляем эту иконку через `symbol`, помечаем в singleton и добавляем реальное ис… twitter.com/i/web/status/1…

Главная проблема подхода: у `<symbol>` должен быть id. А значит мы получаем опасность пересечений, если иконки не с… twitter.com/i/web/status/1…

Можно для иконок сделать решение аналогичное подходу css-modules и добавлять хеши например. Но мы начинаем строить… twitter.com/i/web/status/1…

Сама идея inline svg + use хороша и для многих проектов может зайти. Этот подход экономит и размер данных, и имеет… twitter.com/i/web/status/1…

Теряем удобные анимации по сравнению с предыдущими случаями, получаем возможность работать с многоцветными иконками… twitter.com/i/web/status/1…

Здесь есть даже готовый калькулятор таких стилей codepen.io/sosuke/pen/Pjo…

Главные минусы: вас будут не очень сильно любить за стили вида: filter: invert(17%) sepia(32%) saturate(5440%) hue-… twitter.com/i/web/status/1…

Здесь этот способ описан подробнее: css-tricks.com/solved-with-cs…
Плюсы — удобно, все средствами css.

Какое бы вы решение выбрали?

3) Мы проводили ряд АБ тестов направленных на улучшение и деградации производительности клиентского приложения, с ц… twitter.com/i/web/status/1…

И опять же данные сжимаем brotli, в итоге оверхед на страницу — меньше

6 ноября в Москве мы с HolyJS проведем Node.js Code+Learn.
Это отличная возможность сделать вклад в разработку Node… twitter.com/i/web/status/1…

В опросе про иконки с большим отрывом лидирует вариант использовать inline иконки (с use тегом или без).
Расскажу… twitter.com/i/web/status/1…

Если сейчас попытаться оценить решение, то
по экономии размера, самыми эффективными будут решения через filter или… twitter.com/i/web/status/1…

Правильный выбор между этими решениями сделать сложно. Субъективно меня очень тянет к решениям с inline + use, filt… twitter.com/i/web/status/1…

Если вы не поддерживаете эти браузеры — рекомендую посмотреть в сторону filter или mask для иконок. Делается очень… twitter.com/i/web/status/1…

Выбираем из оставшегося.

Если рассматривать вариант просто inline без use. На моменте, когда вспоминается, что кроме React у тебя есть еще m… twitter.com/i/web/status/1…

В любой задаче приходится искать баланс. Решение должно позволять очень просто вставить иконку, но не должно быть к… twitter.com/i/web/status/1…

Пробуем вариант с inline svg + use. Само решение простое: мы инлайним + используем use при первой вставке иконки на… twitter.com/i/web/status/1…

Окей, это решается именем иконки — нам же все равно компонент вызывать с уникальным именем. А чтобы названия не пер… twitter.com/i/web/status/1…

Такое решение очень хорошо зайдет, особенно, если у вас single source of icons 😀.

Поэтому, если задаетесь подобны… twitter.com/i/web/status/1…

Но на большом сайте можно столкнуться с тем, что самих иконок большое количество. Есть иконки UIToolkit, иконки отн… twitter.com/i/web/status/1…

В итоге, получаем, что у нас есть потенциальное место для коллизий и если не сводить все иконки в одно место при эт… twitter.com/i/web/status/1…

Остается вариант со спрайтами. Он дает чуть больший размер бандла по сравнению с inline + use и добавляет сложносте… twitter.com/i/web/status/1…

Возможные состояния у нас генерируются на less.
Выглядит это так: миксину приходит набор состояний, например `.abst… twitter.com/i/web/status/1…

Затем через рекурсию создаются модификаторы: `icon_action, icon_primary icon_secondary` и модификаторы для hover, f… twitter.com/i/web/status/1…

Специфические иконки для сайтов генерируются по аналогичному механизму. UIToolkit предоставляет миксин, который сге… twitter.com/i/web/status/1…

Мораль этой истории?
У нас есть N подходов и ни одного идеального. И это просто вставить иконку на страницу.

Справедливости ради сказать, если у вас нет поддержки ie11 и прочего, то inline + use, filters или mask вам хорошо подойдут

Давайте сегодня поговорим о миграциях.
В случае в хх мы мигрируем с xslt + vanilla js + jquery на react стек.
Я п… twitter.com/i/web/status/1…

Я, скорее всего, не открою ничего нового в самой миграции. Поэтому короткое резюме-спойлер:
Мы переводим код на ре… twitter.com/i/web/status/1…

Микрофронтенды мы не делаем. Вместо этого — четкая структура проекта. Выглядит вот так: pic.twitter.com/Kixsb8WSYC

Каждая страницы — это отдельный chunk. На каждой странице, прямо внутри pages/PageName/component хранятся компонент… twitter.com/i/web/status/1…

Если компонент используется больше, чем на 1 странице, то он переезжает в shared.
Chunk загружаем при запросе стра… twitter.com/i/web/status/1…

Так как при подобном переписывании кода получается много, он также выходит под фичей на часть пользователей. Если н… twitter.com/i/web/status/1…

Зачем вообще нужна миграция?

1) Скорость разработки — на новом стеке проще декомпозировать компоненты, люди находятся внутри одной технологии, ч… twitter.com/i/web/status/1…

2) Поддержка. Также вытекает из того, что поток данных четко направлен, все изменения проходят через единое место.… twitter.com/i/web/status/1…

3) Порог входа. У меня есть стойкое ощущение, что сейчас людей, которые больше хотят писать на условном реакте, про… twitter.com/i/web/status/1…

4) Хайп. Это момент, когда на рынке разработчики начинают крутить носом — у вас нет react, я к вам не пойду. Как бы… twitter.com/i/web/status/1…

Главная проблема миграции — бизнес хочет выпускать бизнес задачи, разработчики должны балансировать между техническ… twitter.com/i/web/status/1…

Какой алгоритм перевода страницы?

Вначале нужен фундамент. Это вся инфраструктра — роутинг, дата-слой, разделение… twitter.com/i/web/status/1…

На этом фундаменте можно строить страницу.
Обычно здесь все происходит по типовому сценарию: посмотрели какие комп… twitter.com/i/web/status/1…

Что при переходе важного?

Наиболее критическим моментом для нас является наличие SSR. Потому что это SEO, это хор… twitter.com/i/web/status/1…

Тут мы подходим к важной теме SSR (server side rendering).
Здесь мои коллеги уже писали о SSR в хх… twitter.com/i/web/status/1…

1) node.js не занимается походами на бекенды. Мы сделали SSR as a service. То есть есть питонячье приложение, котор… twitter.com/i/web/status/1…

Урл у нас всегда один `/render`. Информация о реальном урле и данных лежит в body запроса.
Схематично это выглядит… twitter.com/i/web/status/1…

На сервере крутится Koa (выбирали между express, koa и hapi). express не взяли — были проблемы в секьюрности, hapi… twitter.com/i/web/status/1…

Кроме того, api koa отдалено похож на api нашего питон-приложения, за счет чего разработчикам проще было бы освоиться в новом окружении.

Каждый инстанс ноды запускает внутри себя Clusters по количеству ядер выделенных контейнеру:… twitter.com/i/web/status/1…

Код вызова рендера очень простой умещается на десяток строк вместе с обработкой ошибок: gist.github.com/xnimorz/2a6283…
То… twitter.com/i/web/status/1…

Это позволило нам сделать SSR не переделывая специальным образом клиентскую часть (а вызовы window.something и подо… twitter.com/i/web/status/1…

Мониторим сервер через okmeter: okmeter.io

Контейнеров node.js много и тут появляется задача: как выпускать обратно несовместимые релизы? Когда в питоне с нов… twitter.com/i/web/status/1…

С одной стороны можно сохранить обратно-совместимые релизы и на такие изменения делать 2-3 релиза паровозиком (друг… twitter.com/i/web/status/1…

Тут на помощь приходит "хитрый" метод: у питонячьего приложения и node.js рендер сервера единая версия. То есть пос… twitter.com/i/web/status/1…

Делим группу Node.js серверов на 2 и вначале катим релиз на половину машин.
Когда релиз раскатился, катим релиз на… twitter.com/i/web/status/1…

Остается посыпать решение инфраструктурой:
питон приложение идет в node.js с указанием версии. Node.js перед рендер… twitter.com/i/web/status/1…

Если нет, отправляем 503. Питон получает 503 и пытается заретраить запрос на другой сервер. количество ретраев = ко… twitter.com/i/web/status/1…

Можно пойти дальше и завести единое место с конфигом, которое будет балансировать и знать, где-какая версия раскаче… twitter.com/i/web/status/1…

Если у вас есть еще вопросы про SSR или миграцию — пишите, с радостью отвечу на что смогу :)

В то же время, мы измеряем lead time всего процесса разработки и lead time только разработки. Если выбрать задачи,… twitter.com/i/web/status/1…

Это не на 100% идеальный способ, но чем больше задач делает команда на странице, тем более репрезентативна выборка.… twitter.com/i/web/status/1…

И тут я сам же поломаю свой довод :) во время переписывания происходит ещё рефакторинг кода, что упрощает дальнейшу… twitter.com/i/web/status/1…

Важный момент: мы измеряем lead time не для сравнений, а для рефлексии, чтобы понимать, какие вопросы и трудности у команды были.

@jsunderhood И где-то здесь ещё передают привет микросервисы ;)

2) Определяется приоритет задачи. Раньше мы пытались использовать для приоритетов RAF (Risk assessments framework)… twitter.com/i/web/status/1…

3) Команды, если планируют взять тех. задачу видят все задачи и выбирают исходя из приоритета + времени, которое он… twitter.com/i/web/status/1…

4) Если команда архитектуры понимает, что вряд ли кто-то возьмет эту задачу в ближайшем будущем, а профит от задачи… twitter.com/i/web/status/1…

Для синка у нас есть 2 типа встреч. Тимлидский статус-синк и синк фронтенд группы. (это помимо внутрикомандных стен… twitter.com/i/web/status/1…

Выглядит это вот так: gist.github.com/xnimorz/5a2783…
preload для компонентов вытаскивается через React-loadable

За chunk с данными ходим, чтобы данные в стор записались в тот момент, когда chunk будет предзагружен и страница ср… twitter.com/i/web/status/1…

Чтобы серверная нода не слала запросы, мы в коде конфигурации стора проверяем наш environment и в случае сборки для… twitter.com/i/web/status/1…

Ну, и в подобных историях наиболее правильный подход: это сделать замер через performance и посмотреть, на что дейс… twitter.com/i/web/status/1…

@jsunderhood @PaulMaly Да, про него. Ага, понял. Ну да, можно наверное попробовать какой-то такой вариант. Потому ч… twitter.com/i/web/status/1…

Мы тут немного поговорили про оптимизацию, в дополнение расскажу 3 маленьких и очень простых, но интересных момента… twitter.com/i/web/status/1…

1) При вызове setState, который мы получаем из хука useState реакт проводит сравнение prev и next результата (==).… twitter.com/i/web/status/1…

Это означает, что если вы сделаете что-то вроде const [a, setA] = useState(1); ... setA(1);, то компонент не будет перерендерен.

Но если ваш родитель ререндерится, то child также будет ререндериться, никаких сравнений props не будет, все полнос… twitter.com/i/web/status/1…

Вот тут небольшой пример codesandbox.io/s/fervent-shad…

Я пару раз сталкивался с непониманием коллег, почему в стейте поведение одно, а в пропс другое. Дело в том, что одн… twitter.com/i/web/status/1…

По этой причине, недостаточно просто обернуть все мемоизацией. Чтобы избежать вызова render функций, компонент долж… twitter.com/i/web/status/1…

Для функциональных компонентов memo также принимает второй аргумент. Он нужен для кастомного компаратора, аналогичн… twitter.com/i/web/status/1…

2) Важный момент, о котором многие забывают: контексту плевать, обернут ли у вас компонент в memo или он pure. Если… twitter.com/i/web/status/1…

Проверить и поэкспериментировать очень легко: codesandbox.io/s/agitated-wil…

Обратите внимание, что изменение контекста не просто обновляет компонент, но он получает еще и самый последний prop.

3) Все привыкли использовать useEffect для сайд-эффектов, каких-то DOM расчетов. Может появиться вопрос: а почему я… twitter.com/i/web/status/1…

Если хочется рассчитать ДО того, как компонент отрисуется (как раньше с componentDidUpdate), то стоит использовать… twitter.com/i/web/status/1…

Hint, если в codesandbox хочется снять performance можно открыть урл, который они предоставляют:… twitter.com/i/web/status/1…

useEffect: pic.twitter.com/R3xdOkEGAE

UseLayoutEffect: pic.twitter.com/gPeRXhvcZo

Обратите внимание на разницу в количествах и характере paint :)

В @biocad_ltd, ищем QA-инженера, вместе со мной работать над системой управления лабораторным оборудованием.

Сейча… twitter.com/i/web/status/1…

Для истории с контекстом правильная ссылка codesandbox.io/s/fancy-feathe…

Для меня есть несколько больших мазков в градациях. Джун => Мидл => а вот тут все сложнее.

Сюда традиционно добавляют senior, что это человек, который может взять задачу, проанализировать, выбрать подходящи… twitter.com/i/web/status/1…

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

Давайте с вопросом развития начнем с простого и дальше будем двигаться к сложному. Начнем об обучении джунов. В хх… twitter.com/i/web/status/1…

Школа устроена следующим образом. На входе будущие студенты решают несколько задач онлайн, затем офлайн интервью. Э… twitter.com/i/web/status/1…

Как подготовиться к подобным интервью как раз писал предыдущий автор этого твиттера :)

Сама школа разделена на 2 части: лекции и работа над проектом. Лекции проходят 2-3 раза в неделю.

В прошлом году лекции записывали: youtube.com/watch?v=7tULJl…
Обучение идет по 2-м направлениям фронтенд и бекенд. Бек… twitter.com/i/web/status/1…

У лекций есть ДЗ. Я обычно стараюсь после выдачи ДЗ отвечать на вопросы, проводить ревью решения студента как можно… twitter.com/i/web/status/1…

Список моих лекций есть здесь: xnim.ru/projects/schoo…

У меня была пара веселых моментов. Провожу лекцию по базовому js, в конце даю домашку. Добираюсь до дома (мне ехать… twitter.com/i/web/status/1…

Вторая история. Мои лекции часто расположены перед НГ. В таких случаях я даю дедлайн в новогодние каникулы плюс 2-3… twitter.com/i/web/status/1…

После блока лекций начинается практика. Студенты делятся на группы и занимаются школьными проектами. Я в свое время… twitter.com/i/web/status/1…

Эти проекты нужны, чтобы вчерашние студенты попробовали работу в команде, у них появились первые конфликты (возможн… twitter.com/i/web/status/1…

В последних двух школах студенты делали проекты, которые потом нашли свое использование. В школе 2017-2018 года я б… twitter.com/i/web/status/1…

Также знаю, что есть стажировки у avito start.avito.ru/tech, школа интерфейсов яндекса yandex.ru/promo/academy/… Возможно еще что-то?

Не могу не упомянуть очень крутой кейс от @idelpivnitskiy youtube.com/watch?v=Kw1gQT…
Идель, привет :) Кстати, Идель т… twitter.com/i/web/status/1…

С началом пути в разработке разобрались. Дальше от средних-крепких джунов в мидлы и развитие мидлов. Это тот момент… twitter.com/i/web/status/1…

В части компаний есть менторы, где-то этим занимаются тимлиды, где-то делают основательный подход с составлением ИК… twitter.com/i/web/status/1…

Мне сложно дать рецепт, у меня нет правильного ответа на вопрос. Только мои личные наблюдения. Мне кажется, что раз… twitter.com/i/web/status/1…

Хочешь прокачаться во фронтенд скиллах — возьми ответственность за часть проекта, стань мейнтейнером страниц или пр… twitter.com/i/web/status/1…

Другой способ прокачаться — брать сложные задачи. Но это тоже определенная ответственность.

Без ответственности это работает сильно хуже. Как то так:
— Привет. Я хочу развиваться давай обсудим?
— Хорошо, у н… twitter.com/i/web/status/1…

Тут также работает следующее: без желания людей насильно "развивать" их не будешь.

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

Кроме этого, в некоторых компаниях практикуется "добровольное менторство" — когда часть более опытных сотрудников,… twitter.com/i/web/status/1…

Если свести все в пункты, то:

Я хочу развиваться:
1) Брать ответственность, принимать решения
2) Участвовать в обсуждения фронтенд-группы

3) Если в компании не видно точек роста, то смотреть на опен-сорс, сообщества в своем городе
4) Если на 3-й пункт н… twitter.com/i/web/status/1…

Конечно же, эти советы будут работать, если у вас уже "набита рука" и вы без проблем делаете типовые задачи разной сложности.

Если "Я хочу помогать сотрудникам в развитии", то:
1) Ненавязчиво предлагать ответственность — ни в коем случае нел… twitter.com/i/web/status/1…

3) Давать сотрудникам задания сложнее их текущего уровня.

Как я пришел к таким пунктам? Вот мой личный опыт:

В хх я пришел в команду поиска. Нас было 2 фронтендера. За полгода текущие задачи поиска были закрыты и я заскучал.… twitter.com/i/web/status/1…

Настроили его подключение через npm, отделили от проекта, сделали сборку на gulp вместо make файла. Развили саму би… twitter.com/i/web/status/1…

Затем перешел в команду мобильного сайта, где взял ответственность на архитектуру резюмебилдера на клиенте. Очень б… twitter.com/i/web/status/1…

И затем перешел в проект talantix.ru, где был, по сути, создателем всей архитектуры проекта.
В конце пу… twitter.com/i/web/status/1…

С каждым разом в том числе изучал этот вопрос и приходил к мысли: "если бы не ответственность, то всегда можно было… twitter.com/i/web/status/1…

Так я и пришел к выводам из начала этого треда :)

Я не затронул тему развития софт-скиллов в своем рассказе, это отдельная и очень сложная тема. Ответственность в ко… twitter.com/i/web/status/1…

Помогите мне определиться с темой на завтра: я думал о том, чтобы рассказать о performance и клиентских метриках ил… twitter.com/i/web/status/1…

Если что другая тема вполне может быть в субботу :) мне интересен порядок

@m0rg0t @jsunderhood Мы в @mtdvio делаем материалы и коммьюнити про холистическое развитие (вне рамок одной компани… twitter.com/i/web/status/1…

@jsunderhood Плюсую. В целом правильный общий совет.

Стать сильным Senior можно, если рутинно берёшь на себя зада… twitter.com/i/web/status/1…

@jsunderhood Вообще всего это будет неявно и капать по капле. Пока в один прекрасный день ты не осознаешь, что ты и… twitter.com/i/web/status/1…

Сейчас направлений и специфики везде очень много. Всё знать никогда не будешь.

@jsunderhood @Oleg75113370 Пару готовых рецептов подкину.

Общего плана про планирование карьеры, основанные на на… twitter.com/i/web/status/1…

@vfurso @jsunderhood Повлиять на бизнес анализ, продукт, решения других отделов разработчик практически никогда не… twitter.com/i/web/status/1…

Сегодня травим байки о разработке!
Начнем прямо со вчерашнего фейла. У кого не бывает фейлов, тот явно что-то недоговаривает :)

Обновляю картинки-иконки в статике. Релиз выходит, и вроде бы все хорошо.
Прилетает бага. На… twitter.com/i/web/status/1…

У нас единое приложение для hh.ru, jobs.tyt.by и других доменов. На основном домене… twitter.com/i/web/status/1…

Оказывается проблема с политиками кеширования, с nginx.org/ru/docs/http/n… На всех региональных сайтах политика жестч… twitter.com/i/web/status/1…

Все картинки у нас запрашиваются с GET запросом, если uri не поменялся, nginx отдаст старую картинку. Сравните:… twitter.com/i/web/status/1…

Причина: в большой инфраструктуре сложно держать в голове все условия и переменные :) Не забывайте про кеш.

1) Кодовая база одна, отличия между сайтами описываются явно в коде (даже до уровня if (domain === DOMAINS.KAZAHSTAN))

2) Есть необходимость учитывать страновую политику: сервера, определенные законы. Например, была история, когда в о… twitter.com/i/web/status/1…

Лично для меня (я не девопс все же), это главная особенность: в странах отличаются законы, эти законы необходимо уч… twitter.com/i/web/status/1…

3) Обычно мониторим все законы в странах и заранее пишем код. В нужный момент просто переключаем рубильник

4) Страновые сайты отличаются не только логикой в определенных местах, но и, например, кешированием статики, так ка… twitter.com/i/web/status/1…

5) Домены разруливаются на nginx, почти любой бекенд при необходимости может узнать о том, на каком сайте был вызва… twitter.com/i/web/status/1…

6) Каждому домену соответствует константа, констаны в том числе есть в конфигах yml, чтобы при сборке использовать… twitter.com/i/web/status/1…

7) Переводы хранятся в базе, каждый сервис подгружает переводы себе на старте. Используем marisa-trie структуру дан… twitter.com/i/web/status/1…

8) Возможно для меня привычно, но это все особенности, на первый взгляд. Возможно есть какие-то определенные вопросы?)

Совсем забегался и упустил выход интереснейшего интервью с @iamakulov 😢

Всем любителям производительности и оптими… twitter.com/i/web/status/1…

Небольшая залипашка: matthewrayfield.com/goodies/inspec…
(нужна консоль разработчика)

Следующая занимательная история:
Теплое весеннее утро. Кто-то ползет к офису, кто-то, зевая, заваривает кофе. Приле… twitter.com/i/web/status/1…

Разработчики бегут к ноутам, начинают разбирать проблему... Все работает, все хорошо. Жалобы продолжают поступать.… twitter.com/i/web/status/1…

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

Потратив около 3 человеко-дня (3 разработчика на 1 день ушли в проблему), выяснилось, что им просто не повезло. Они не собачники 0_о

Все дело в том, что поставщик рекламы добавил новый баннер для пользователей, рекламирующий собачий корм. Этот банн… twitter.com/i/web/status/1…

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

We are interested in what you think about your next 3-5 years.

What do you personally want to focus on?

This is… twitter.com/i/web/status/1…

Пришлось отвлечься, сейчас делаем одну интересную штуку: на получение страницы создаем общий action, который инкапс… twitter.com/i/web/status/1…

Когда я говорил про layout, вспомнил одну штуку: вы пользуетесь performance вкладкой чтобы оценить время исполнения… twitter.com/i/web/status/1…

Кликаем на строку кода, получаем красоту: pic.twitter.com/CTmrJDtWAW

С сурсмапами у меня нормально не завелось :(

Детективная история. История вымышлена от начала до конца, любые совпадения абсолютно случаны. В главных ролях: ком… twitter.com/i/web/status/1…

А: Сайт не работает.
С: Стандартное выяснение проблем, статусов ответа
А: Уточняют, что открывают страницу, страниц… twitter.com/i/web/status/1…

С: Передает данные КР.
КР: В консоли ничего нет.
КР: (Замечают часы в углу скриншота, грепают логи)
КР: За это вр… twitter.com/i/web/status/1…

КР: Сделайте har файл с запросами
С: рассказывает как сделать har файл
А: вот
C: эй, КР, вот har файл

КР: так, что тут у нас... Так все ж хорошо?
С: сейчас узнаем
А: Да, мы чтобы записывать har файл файрвол отключали
КР: :facepalm:

В чем соль — файрвол резал запросы и они просто не доходили до нас.

Этот момент настал!
Я ищу работу - HTML-верстальщик, frontend-разработчик.
Естественно, я ещё джуниор.

Ссылки на р… twitter.com/i/web/status/1…

Сейчас будет сложная история с техническими подробностями. История о сложностях работы с переводами на сайте.
Исто… twitter.com/i/web/status/1…

1) Переводов больше десятка мегабайт
2) Не все переводы интерфейсные (интерфейсных только пара мегабайт), но тоже н… twitter.com/i/web/status/1…

Как решать такую проблему?

Мы пришли к такой модели:
1) В реакт-компонентах появляется поле static trls поле, которое является обычной Map<Str… twitter.com/i/web/status/1…

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

3) При сборке кода babel плагин выдирает поле trls, собирает большую мапу "страница: список переводов". Этот файл п… twitter.com/i/web/status/1…

4) На бекендах переводы подгружаются из базы при старте и затем время от времени получают обновления. В рантайме хр… twitter.com/i/web/status/1…

Кстати, плагин, который выдирает статические поля вот: github.com/hhru/babel-plu…

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

Добавляем логирование, начинаем трекать, в каких случаях происходит ошибка, что лежит в сторе, какие последние action происходили.

Делаем первый заход, понимаем, что страница например bla-bla, а данные в сторе от страницы foo-bar.

Разбираемся в проблеме, понимаем, что в некоторых редьюсерах данные применяются вот так: (state, action) => bla-bla… twitter.com/i/web/status/1…

В чем соль 2: мы используем batch actions и делаем батчевый редьюсер. Если падает применение данных в одно из полей… twitter.com/i/web/status/1…

Переводы хранятся в сторе. И по стечению обстоятельств — переводы первыми вызываются на странице. Вот они и падают.

Окей, почему мы не получали правильную ошибку? Оказалось, потому что случайно поставили на promise, который обрабат… twitter.com/i/web/status/1…

Вот так один неверный reject привел к долгой истории и правкам редьюсеров.

Но на этом все не закончилось! Ошибка всплывает опять. Начинаем разбираться, находим проблему в фетчере и асинхронн… twitter.com/i/web/status/1…

Пять подобных итераций и полгода спустя мы из-за этой ошибки отрефакторили кучу мест, каждый раз получалось ее восп… twitter.com/i/web/status/1…

Немного расскажу о концепции батчевых экшенов и батчевом редьюсере в Redux
В редьюсерах у нас много полей. Я не счи… twitter.com/i/web/status/1…

TL;DR Сразу решение: gist.github.com/xnimorz/352a6c…
В коде привел объяснение подхода. Дальше в треде будет история: какую… twitter.com/i/web/status/1…

Мы сделали систему, где при SPA переходе вызывается middleware, она делает GET запрос самостоятельно на нужный урл.… twitter.com/i/web/status/1…

У нас нет списка "вызови такие-то экшены при открытии такого-то урла", вместо этого, мы проходим по полям JSON и со… twitter.com/i/web/status/1…

Базовый экшен — у каждого редьюсера у нас есть экшен, который занимается тем, что передает данные as is в редьюсер… twitter.com/i/web/status/1…

Мы сейчас идем к тому, чтобы такие редьюсеры описывались еще проще: в конфиге стора была запись currency: typicalReducer();

Таких экшенов на большой JSON получается много. Они все записываются в массив actions и затем мы делаем dispatch(actions).

Мы диспатчим сразу массив экшенов, который на уровне рутового редьюсера итерируется и применяется вот так (ссылка с… twitter.com/i/web/status/1…

Какие преимущества подхода:
1) Мы не завязаны на порядок применения. Либо все редьюсеры разово применились, либо н… twitter.com/i/web/status/1…

У команды Поиск свой беклог, и когда она сможет взять задачу команды А — непонятно. Это бы сделало выход фичей непрогнозируемым.

Вместо этого у нас единый набор технологий на большей части проектов. Где-то есть специфика (например поисковой дви… twitter.com/i/web/status/1…

Тестирует задачу, пишет автотесты (иногда автотесты делаем после выхода задачи) Во время и после выхода релиза у на… twitter.com/i/web/status/1…

Большое количество фичей выходит под настройкой (переключателем). Если что-то идет не так, то команде достаточно пе… twitter.com/i/web/status/1…

Если все же баг случился через некоторое время после выхода задачи, то по blame видим, какая команда и назначаем на… twitter.com/i/web/status/1…

И если проблема произошла на странице поиск — баг летит в команду поиск. Они, в свою очередь, могут определить чей… twitter.com/i/web/status/1…

Доброе утро! Сегодня будем говорить о performance, клиентских метриках и все, что с этим связано.

Я выступал на РИТ++ youtube.com/watch?v=4joeMk…, рассказывал о сборе метрик и частично затрагивал эксперименты с производительностью.

Материалы по докладу: github.com/xnimorz/Fronte…
Сегодня подробнее поговорим про это.

Ссылка уже была, но она крайне хорошо коррелирует с историями, о которых поговорим сегодня.

Желание трекать метрики и реагировать на них зародилось у нас очень давно. Вначале это был обычный набор метрик, на… twitter.com/i/web/status/1…

Затем мы сделали более серьезный заход на эту задачу и организовали подсчет таких метрик как FMP (first meaningful… twitter.com/i/web/status/1…

Дальше будут треды с подсчетом метрик.

FMP — от него хотим следующего: понимание нашего critical path, количества времени которое уходит на него. Дальше… twitter.com/i/web/status/1…

TL;DR: мы пришли к такому решению: gist.github.com/xnimorz/8ec4fc…
Это позволяет нам трекать critical path, понимать, когда… twitter.com/i/web/status/1…

Дальше история того, как мы к этому шли и графики, графики!)

С одной стороны, FMP говорит о том, что нужно трекать, когда контент отобразился. И тогда код будет что-то вроде та… twitter.com/i/web/status/1…

Offtop, но если вы сделаете блокирующий вызов для того, чтобы кеш сработал, я вас удивлю: кеш может не сработать та… twitter.com/i/web/status/1…

Если затрекать такое время от gist.github.com/xnimorz/6b939a… и выводить на график, получим вот такую чушь: pic.twitter.com/j0mFLQiKek

Почему чушь?
1) 99 перцентиль составляет больше 100 секунд. Представьте людей, которые настолько терпеливы? :)
2)… twitter.com/i/web/status/1…

Вспоминаем вчерашнюю историю про "сайт грузится и не работает 30 секунд". Понимаем, что если пользователям приходил… twitter.com/i/web/status/1…

Почему так происходит? Если пользователь переключит вкладку, то raf не будет исполняться, пока вкладка не станет ак… twitter.com/i/web/status/1…

Какое может быть решение? Трекать активность страницы!
В коде это будет так: gist.github.com/xnimorz/917a57… здесь скрипт,… twitter.com/i/web/status/1…

Насколько отличается первый и второй вариант? Вот графики:
Первый вариант 95-я перцентиль (без трека visibility pag… twitter.com/i/web/status/1…

Вот вариант, когда убираем значения, если пользователь уходил со страницы, или открывал фоновую вкладку: pic.twitter.com/z63MCQDFd0

Здесь уже видим, что значения похожи на правду: 1 секунда загрузка резюме, самая тяжелая страница: 2.6 секунды.

У второго варианта есть проблема. Он не трекает многих пользователей, так как один из популярных паттернов у пользо… twitter.com/i/web/status/1…

Здесь может прийти идея трекать новые DOM метрики, которые уже есть в браузерах, но они также плохо учитывают неакт… twitter.com/i/web/status/1…

Как научиться трекать остальных пользователей? Исполнять скрипт, который не зависит от raf 🙂
Это можем сделать, пр… twitter.com/i/web/status/1…

Это позволяет нам делать аналитику, потому что у нас уже есть renderTree.
Делаем это вот так:… twitter.com/i/web/status/1…

Если сравнить со вторым вариантом, разница оказывается не такой большой, как можно было предположить 100-300мс. А о… twitter.com/i/web/status/1…

На график выводим 95-ю перцентиль. Т.е. у 95% пользователей страница отображается не дольше, чем за это время на гр… twitter.com/i/web/status/1…

95" график важного контента (+/- первый экран): pic.twitter.com/RTIy4vfenp

95" то же время, но с засечкой body: pic.twitter.com/ASnZ10M0A9

Для сравнения вот 50 перцентиль за тоже время у body: pic.twitter.com/S3XczudxEY

Эти графики не отображают мобилка \ десктоп. Но если это сделать, будет очень необычно.

Вот мобилки: pic.twitter.com/X5zLAW5rIE

Десктоп: pic.twitter.com/q55VrEYFoF

Почему это важно: перед задачей исследовательского характера, у тебя обычно есть гипотезы. Они могут быть подтвержд… twitter.com/i/web/status/1…

То есть, чтобы мы могли прийти к бизнесу и сказать: если мы потратим месяц разработки на улучшение загрузки вот это… twitter.com/i/web/status/1…

Это наша идеальная цель. Но на пути как обычно, появилась куча уточнений.

И проводить эксперименты без правильно настроенных метрик бесполезно, у нас не будет определенных зависимостей. Поэтому с метрик и начали.

Дальше TTI: TL;DR: gist.github.com/xnimorz/0b6080… Мы трекаем лонгтаски, ресурсы и не отправляем TTI, если пользователь ухо… twitter.com/i/web/status/1…

Изначально делали мы без visibility page API, но получили те же проблемы, что и с FMP. В коде нет raf, но есть setT… twitter.com/i/web/status/1…

Поэтому добавляем API и графики также стабилизируются: pic.twitter.com/c6kmRUGSS3

Чем крут этот график? у нас есть явный фаворит, оптимизацией которого нужно заниматься в первую очередь — страница вакансии.

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

Чтобы не писать свой код для TTI, можно использовать готовое решение от google: github.com/GoogleChromeLa…

Для FID мы используем также готовое решение: github.com/GoogleChromeLa…

Для framework render \ init \ hydrate time делаем просто:
ReactDOM.hydrate(root, reactRootNode, () => performance.… twitter.com/i/web/status/1…

Важное уточнение, мы считаем разницу, между началом рендера и этим колбеком.
Это нужно, чтобы каждый этап был отдел… twitter.com/i/web/status/1…

Мы используем SSR, поэтому пользователь видит страницу еще до того, как пройдет гидрейт.

Как мы собираем метрики? Для сохранения данных мы делаем запрос на наш служебный урл `/stat`, в котором описываем наши метрики.

Затем эти данные парсятся и отправляются в хадуп. Кроме хадупа отображаем данные в okmeter.io. Собственно, все графики оттуда.

Пример такого запроса: pic.twitter.com/KbDoKfs5jx

okmeter платный, но всегда можно поднять Prometheus с grafana: prometheus.io grafana.com

Зачем вообще метрики на клиенте? Зачем так заморачиваться, если есть lighthouse? web page test?

1) Страницы динамические, на них меняется контент, есть код подрядчиков

2) У клиентов разные устройства. Мы получаем не репорт в вакууме, а реальные данные

3) Данные собираются постоянно (все обезличено), это открывает много возможностей для аналитики

4) Мы можем реагировать максимально быстро на деградации, как во время релиза, так и после

Эксперименты с производительностью. В начале года мы запустили 4 эксперимента.
два на улучшение производительности… twitter.com/i/web/status/1…

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

1) Используем brotli вместо gzip. Это влияет на всю статику. Точные цифры экономии в Kб не вспомню, но это >100 Кб.

2) Используем кеширование через Service worker

На технических измерениях во время разработки, профит был заметен. Когда раскатили на клиенты большой производитель… twitter.com/i/web/status/1…

Мы сделали два вывода:
1) Нужно будет повторить эксперименты с более сильной оптимизацией
2) На небольшие оптимизац… twitter.com/i/web/status/1…

Затем мы запустили 2 эксперимента на деградацию. Эксперименты на деградацию нужно запускать очень осторожно, потому… twitter.com/i/web/status/1…

1) Мы замедляли инициализацию наших компонентов (TTI)
2) Увеличили размер загружаемого css (FMP)

Про инициализацию компонентов. Мы сделали небесконечный цикл, который тормозил инит каждого компонента на небольшое… twitter.com/i/web/status/1…

Какое же было удивление, что бизнес-метрики ничего не почувствовали. Мы запускали эксперимент несколько раз (на раз… twitter.com/i/web/status/1…

Этот эксперимент позволил нам сделать вывод: пользователям главная ценность _нашего_ сайта — это возможность читать… twitter.com/i/web/status/1…

Так как текстового контента много, они не замечают, что сами компоненты становятся интерактивными через некоторое время.

Подтвердил нашу гипотезу эксперимент с увеличением загружаемого css. Это напрямую влияло на FMP. В бизнес-метриках… twitter.com/i/web/status/1…

Результаты экспериментов получились такие:
1) Наиболее важный параметр, на котором нам нужно сосредотачиваться FMP.… twitter.com/i/web/status/1…

К прямой зависимости (некоторой формуле) денег от производительности мы, к сожалению, не пришли. Нашли только харак… twitter.com/i/web/status/1…

Что дают нам графики и подсчет метрик

1) Триггеры: если мы достигаем пика в 5/10 секунд (в зависимости от метрики), то к нам в чат прилетает сообщение о… twitter.com/i/web/status/1…

2) Динамика релиза: Как только выходит релиз мы видим на графике все деградации и оптимизации. Если деградация боль… twitter.com/i/web/status/1…

3) Также мы трекаем данные с клиента для аналитики: мы можем посчитать и сравнить метрики для части пользователей (… twitter.com/i/web/status/1…

Может появиться вопрос, а почему SSR за оптимизацию производительности не считаете?
Почему с ним не проводили экспериментов?
>>>

Я склоняюсь к тому, что SSR крайне важен, чтобы на сайте, который доступен неавторизованному пользователю его отклю… twitter.com/i/web/status/1…

Я писал, что можно не получить профитов от кеширования:
Вот статья первая статья, для меня оказалась крайне полезн… twitter.com/i/web/status/1…

TL;DR: Используйте Cache API для статики в Service Worker. Этим вы экономите время исполнения кода, улучшаете TTI.

Дело в том, что не все браузеры кешируют файлы меньше 1Кб. За счет этого мы можем не получить профита от того, что… twitter.com/i/web/status/1…

Как устроено кеширование в хроме? Здесь на эту тему хорошо написано: v8.dev/blog/code-cach…

Вся информация дальше — это компиляция из этих статей. Эдакий TL;DR. Справедливо для chromium браузеров

У нас есть 3 способа "запуска" кода. Cold run, warm run и hot run: pic.twitter.com/0ihk6hR6Af

Cold run — пользователь пришел впервые. Браузер скачал файл, скормил его компилятору (транспилятору)

Warm run — пользователь пришел повторно. Браузер взял код из кеша, скормил его компилятору.

Hot run — пользователь пришел в 3-й раз за последние 72 часа.
Браузер взял код и метаданные из кеша. Метаданные де… twitter.com/i/web/status/1…

Всем хочется исполняться на в hot run версии. Очевидно, что она экономит время.

Первый способ экономить время — не пишите код ¯\_(ツ)_/¯
Кроме того, не забывайте про etag и заголовки для кеширования кода.

Есть интересный хак, чтобы забустить hot run. Используйте Cache API от Service worker

"Магия" здесь в том, что файл, кешированный сервис воркером не будет парситься повторно, метаданные будут присутствовать.

Вот так сейчас выглядит загрузка hh.ru: pic.twitter.com/tbwFYUqV8U

Еще одна ссылка: youtube.com/watch?v=bZfULA…
Здесь рассказываю о способах увеличения производительности и затрагиваю тему кеширования.

Еще приведу доклад @iamakulov о performance: youtube.com/watch?v=iEv1rF…

Пара причин для этого:
1) SEO — поисковым ботам нужно что-то индексировать
2) отсутствие SSR заметно оттягивает вре… twitter.com/i/web/status/1…

Готовые решения имеют свои ограничения. Мы сделали свое простое решение без излишеств twitter.com/i/web/status/1…

gats… twitter.com/i/web/status/1…

react-static никогда не пробовал, говорят удобен для статических сайтов. Но
1) Статический сайт можно сделать на то… twitter.com/i/web/status/1…

И пара статей:
Для гугла: developers.google.com/search/docs/gu…

Для яндекса: yandex.ru/support/webmas…

Коротко: что-то работает, но что получится — на ваш страх и риск.

2) Иногда сайт нельзя полностью прекомпилировать. Например, будут небольшие кусочки типа "комментарий пользователя"… twitter.com/i/web/status/1…

3) Главная же проблема в реакте для такой задачи — что на клиент обычно поставляют весь бандл кода, который большую… twitter.com/i/web/status/1…

А полезного кода, который отправит и красиво добавит комментарий без перезагрузки страницы — это от силы останется… twitter.com/i/web/status/1…

Если делается такой сайт, а условный (п)реакт, вью хочется, я бы рассматривал такой вариант:
Сделайте 2 точки вход… twitter.com/i/web/status/1…

Это позволяет вам не делать лишние телодвижения на клиенте. Код, который ничего не делает, на клиент не попадет.
К… twitter.com/i/web/status/1…

Единственное, еще и сама библиотека имеет свой размер. Например, вот реакт-дом: bundlephobia.com/result?p=react…

Поэтому Я бы сказал, что это другая проблема. Проблема "эффективных" менеджеров. Такие "друзья" могут встречаться ч… twitter.com/i/web/status/1…

Если у вас скрам, то не будем закладывать баги и мелкие задачи, вместо мелкой задачи возьмите пару фич. А потом на… twitter.com/i/web/status/1…

Если у вас waterflow, то дедлайн будет идти только от такого менеджера.

Если канбан, то менеджер не будет делить задачи по классам поставки — "ха, зачем? вы вот эту задачку закончили за 3… twitter.com/i/web/status/1…

В канбане такой "эффективный" менеджер не хочет разбираться, что у команды есть, например 3 класса поставки (сроки… twitter.com/i/web/status/1…

Если вы хотите попробовать канбан, но боитесь такого подхода со стороны менеджеров: оставьте оценку задач и прогова… twitter.com/i/web/status/1…

Мы успели обсудить много тем за неделю.
Браузерные плагины, процессы, kanban, визуализация, иконки, миграция стеко… twitter.com/i/web/status/1…

Сегодня не будет много твитов. Предлагаю поговорить на ваши темы. Если вам интересно какое-то направление, какая-то… twitter.com/i/web/status/1…

@jsunderhood Если доступа до ngnix нет или не надо - React-prerendered-component делает ровно тоже самое через Stre… twitter.com/i/web/status/1…

За это время мы несколько раз переделывали наш подход к собеседованиям, потому что всегда "что-то не то". Был этап,… twitter.com/i/web/status/1…

Каждый раз, когда меняли собеседование мы в том числе пытались оценить: насколько подход удобный? Насколько собесед… twitter.com/i/web/status/1…

Сейчас наше собеседование состоит из 3 частей. Разговор о прошлом опыте и об удобных процессах в компании для канди… twitter.com/i/web/status/1…

В техническом интервью мы всегда хотели понять: умеет ли рассуждать и решать проблемы кандидат?

Нас очень вдохновила вот эта статья от @vas3k: vas3k.ru/inside/46/

В последней итерации мы сделали переходы между разговором о прошлом опыте и техническом интервью в виде небольшого… twitter.com/i/web/status/1…

Но не все так хорошо как на бумаге. Например, мы периодически скатываемся только в технические вопросы. Есть немало… twitter.com/i/web/status/1…

Есть кейсы успешных собеседований. И я прям рад во время таких интервью: мы разговариваем с кандидатом о его опыте.… twitter.com/i/web/status/1…

Например, кандидат делал обработку табличных данных, как в гугл доках.
Мы разговариваем об этой специфики. Затраги… twitter.com/i/web/status/1…

Когда наступает в нашем воркфлоу этап технического интервью мы просто говорим о паре вещей важных для нас (например… twitter.com/i/web/status/1…

Мне кажется, у большинства нас есть примеры задач, который нас драйвили. Рассказывайте об этом на собеседованиях. И… twitter.com/i/web/status/1…

Также у меня есть пара провальных опытов, но уже в качестве собеседуемого. Самая главная боль — когда собеседующему… twitter.com/i/web/status/1…

И второй: когда собеседующий считает, что ответ должен быть не просто однозначным, но еще и слова должны быть точь-… twitter.com/i/web/status/1…

@jsunderhood Полностью согласен. Я проходил такое собеседование: двое интервьюеров и ноутбук с заданиями. Было не п… twitter.com/i/web/status/1…

@jsunderhood Самым интересным и эффективным до сих пор считаю способ с пробным днём в компании (это не так легко ор… twitter.com/i/web/status/1…

@maRx_flowers @jsunderhood Тестовый день — супер. Можно понять не только круг задач, но и присмотреться к обстановк… twitter.com/i/web/status/1…

@sexymuhamedik @jsunderhood В реакт бандл SSR встроен из коробки, хоть экспрессом раздавай, ещё и производительней next будет.

@almost_bergman @jsunderhood У меня была два таких дня и оба были успешные(получал оффер). В одной из компаний этот… twitter.com/i/web/status/1…

@YouSysAdmin @maRx_flowers @jsunderhood Основной гайдлайн в Майкрософте нынче - задачи на интервью должны быть напр… twitter.com/i/web/status/1…

Расскажу одну историю: когда я учился в 11 классе, я брал уроки репетиторства у вузовского преподавателя высшей мат… twitter.com/i/web/status/1…

В самой олимпиаде занял первое место, но как подойти к задаче не осознал.
На уроке разговорились с преподавателем… twitter.com/i/web/status/1…

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

Математика — это не только про найти интеграл.
Это навык решать задачи, оценивать их и оптимизировать. А иксы ли у… twitter.com/i/web/status/1…

В той же высшей математике исходя из входных данных можно не знать \ забыть алгоритм нахождения интеграла — но его можно вывести.

Аналогично и в разработке.
И да — это нормально считать иначе :)

Пересечение и взаимное влияние я наблюдал во время своей работы.
Категоризовать: "ты однозначно софт скилл, ты — хард скилл" — мне сложно.

Например: обучаемость? она тоже бывает очень разная. Это может быть идеальная память на механические вещи. А может… twitter.com/i/web/status/1…

Но сказать — первый плохой, второй хороший — нельзя. У этих людей обучаемость прокачена по разным "веткам развития"… twitter.com/i/web/status/1…

Мне удалось поработать с разными HR менеджерами. Некоторым было "глубоко все равно", что происходит в процессах ком… twitter.com/i/web/status/1…

Такие _хорошие_ hr менеджеры, могут выступать не просто консультантом \ источником бюджета, но и драйвером в прокач… twitter.com/i/web/status/1…

Затем выработать рекомендации, помочь с поиском подходящих курсов.

В общем, да, роль HR отдела может сильно варьироваться в компании.

Мое выступление на тему "Есть ли жизнь после Senior?" в Харькове подъехало:
youtu.be/CiSLUYwdyac?li…

Смотрите, кри… twitter.com/i/web/status/1…

Спасибо, что были со мной эту неделю 🙂
С вами был @xnimorz . В своем твиттере я пишу редко и обычно связанное с раз… twitter.com/i/web/status/1…

И большое спасибо @DmitryMakhnev и @rage_monk вы очень прокачали мой доклад и сделали его круче :)