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

Так что всем привет, давайте н… twitter.com/i/web/status/1…

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

Насчет "звучит странно" - кто помнит странную такую песенку из детства:

В любом случае на этой неделе вас ожидают:

Итак, будем знакомы - на этой неделе с вам @theKashey
Карьера моя как fulltime js dev началась, если не ошибаюсь в… twitter.com/i/web/status/1…

Вообще моя профессиональная деятельность началась еще в 1999 году - C++, VoIP, OpenGL и GameDev.
В 2008 году я в пе… twitter.com/i/web/status/1…

Я был тут, когда лучший редактор js был NotePad++
Я был тут, когда выпустили prototype.js
Я был тут, когда jQuery в… twitter.com/i/web/status/1…

Про бытность мою в Яндексе скажу только одно - никогда на свете, не работайте дети, не работайте дети, 5 или 6 лет… twitter.com/i/web/status/1…

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

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

Возьмем меня:

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

Потом узнали, что в Сиднее Яндексоидов уже просто толпа, и "профессиональная иммиграция дело простое"

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

Это так и написано в наших правилах - обращаем внимание на то что к работе относиться, а что не относиться - то не… twitter.com/i/web/status/1…

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

Так что не надо боятся.

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

На часах 9 вечера, а это значит что на сегодня все. Тут принято рано ложиться (в 8!), и рано вставать - не позже 7… twitter.com/i/web/status/1…

Наступает ночь, просыпается мафия.
И да, давайте в начале про опенсорс, так как это очень сильно изменило мое отношение и к коду, и к жизни.

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

В Яндексе было банально все свое - или что-то уже придуманное до нас (и для нас), или почему бы не сделать самим?… twitter.com/i/web/status/1…

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

Пришлось заодно написать пару статей про nodejs dependency mocking, разобраться в вопросе, и вообще в принципах пос… twitter.com/i/web/status/1…

Вторым делом я напоролся на проблему контрола фокуса, которая не была проблемой в jQuery, там с этим все окей, но в… twitter.com/i/web/status/1…

Потом, как и многие из нас, я споткнулся о React-Hot-Loader, и в итоге практически в одиночку тяну его уже более дв… twitter.com/i/web/status/1…

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

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

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

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

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

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

Итак, вы сделали то, что менеджер вас попросил и хотите это зарелизить. Святое дело, только как это сделать?

У нас… twitter.com/i/web/status/1…

1, самый популярный - просто мержим в мастер. Далее CI/DI и максимум через полчаса вы в продакшене.

"Правильно" ме… twitter.com/i/web/status/1…

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

3, золотая середина - это когда релиз происходит один раз в день.

Все десятки микросервисов и вроде как "отдельных… twitter.com/i/web/status/1…

С финансами по другому нельзя - некоторые "сервисы"(например по подсчету налогов) поставляются "другими компаниями"… twitter.com/i/web/status/1…

Но на этом дело не заканчивается - после выкладки запускается PDV, Post Deployment Verification, которое проверяет… twitter.com/i/web/status/1…

После этого за системой следит "Semantic Check" - простые браузерные тесты, которые запускаются каждые 5 минут

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

Нужно добавить немного "до"… twitter.com/i/web/status/1…

А как это сделать, если неизвестно что происходит в глубине проекта?

Так что начинается веселая история с аналитик… twitter.com/i/web/status/1…

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

Текущая философия очень проста: не надо делать плохо, надо делать хорошо.

Проще сказать, чем сделать

Что такое плохо: когда SLO просран, когда клиент не доволен, когда время требуемое на поддержку превалирует над вре… twitter.com/i/web/status/1…

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

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

Аналитика версия 1/2 - вы просто шлете некий event с неким value. Никаких стандартов. Шли что хочешь, твои проблемы… twitter.com/i/web/status/1…

Аналитика версия 3 - вы шлете UI/Track/Operation event, с четкой структурой. Каждое событие должно быть описано в "… twitter.com/i/web/status/1…

"Бизнес процессы" - некий React компонент дает им старт, некий другой компонент завершает с неким статусом. Если ко… twitter.com/i/web/status/1…

"Циклы" - которые слушают любые события от систем описанных выше и как-то на них реагируют.
Например если пришло sc… twitter.com/i/web/status/1…

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

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

Если вам хочется спать - у вас будут слипаться глаза. Если у вас слипаются глаза - значит вам хочется спать!
Логика… twitter.com/i/web/status/1…

Почему DuckTyping? Обратимся к CEP еще раз:

Среди входящих событий система наблюдения может получить

Вы когда-нибудь слышали выражение "Root cause"?
По-русски это будет типа "зри в корень", но тут это именно про проб… 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…

Я вот думаю - начать чтоли еще один топик про фотографию? Но так чтобы было связано с JS?

"Фотоаппарат" я себе купил лет 10 назад. Использовал его десятки тысяч раз, и обычно по назначению - фотографировал семью, лес, город.

Разок пофотографировал "ивент" - YaC 2014, и как-то на этом дело и завершилось pic.twitter.com/OAXlNqgA1T

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

А потом как-то заметил клевые фотки от @tenphi - он многие митапы "показывал" таким образом - и я подумал - ну поче… twitter.com/i/web/status/1…

С тех пор я фотографирую SydneyJS, ReactSydney, и вот на неделе был ReactConfAU.

Почему-то никто кроме меня это не… twitter.com/i/web/status/1…

Главный топик на сегодня - разделяй и властвуй:

Все развивается по спирали.

E2E тесты я тут упомянул потому становиться как-то "не модно" писать unit тесты, а именно они просто ТРЕБУЮТ раздел… twitter.com/i/web/status/1…

Разделение между Stateful/Stateless компонентами из той же оперы

В общем каждый раз когда у вас есть что-то большое - сделайте его меньше. И заодно "это" станет проще.

Как говорит… twitter.com/i/web/status/1…

Packages, Modules, Functions?

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

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

Второй принцип более относиться к dependency mocking и юнит тестированию.

Вот есть у вас функция А, которая вызыва… twitter.com/i/web/status/1…

Есть только один "правильный" вариант - вынести Б в отдельный файл и замокать весь тот файл.

Почему надо использов… twitter.com/i/web/status/1…

И на этом переходом к БЕМ. Столь нелюбимом мною в Яндексе, и столь же любимым сейчас.

БЕМ это не__этот-тупой--синт… twitter.com/i/web/status/1…

Покуда современный UI все думает чего делать с reusability и composability - БЕМ просто работает.

Про БЕМ можно найти ОЧЕНЬ много информации - главное ее переварить.

Но если душа к этому не лежит - можно пойти CS… twitter.com/i/web/status/1…

В итоге каждый раз, КАЖДЫЙ РАЗ, основная задача состоит в нахождении чего-то минимального, но жизнеспособного в сво… twitter.com/i/web/status/1…

Мельчить тоже не надо - сложно будет собрать все воедино. И проще будет создать то, чего вообще-то не надо.

Разбил… twitter.com/i/web/status/1…

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

Хорошим примером "борьбы" со "сложностью" является проблема мемоизации в state management.

Это прям ОЧЕНЬ фундамен… twitter.com/i/web/status/1…

Были и есть еще более over-engeneered варианты, в частности Proxy based, которые решила 99% селекторов, кроме одной… twitter.com/i/web/status/1…

"Одна проблема" - это именно хранение "одного"(последнего) значения "внутри" себя
React.hooks в этом плане сильно л… twitter.com/i/web/status/1…

Есть другие варианты решения. Просто ДРУГИЕ - например @ReatomJS или XState, где мемоизация вообще не нужна.

Ну и… twitter.com/i/web/status/1…

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

Работает он пр… twitter.com/i/web/status/1…

Давайте заинлайним все это в компонент!

const MyComponent = ({a}) => (
a.b.c
? <OtherComponet data={a.b} /… twitter.com/i/web/status/1…

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

Буду честен - я сам это немного не понимал все те годы что провел в Яндексе. А там не только БЕМ из всех щелей, но… twitter.com/i/web/status/1…

Сильно позже, когда жена пошла на курсы @htmlacademy_ru, другой Вадим - @pepelsbey_ - обьяснил что и как.
Шестерен… twitter.com/i/web/status/1…

Сами Блоки не имеют ни размеров, ни маржинов, и тем самым являются

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

Хотя, не, вру. На доске я стоял. И именно так я узнал что iPhone XR не являются water proof. pic.twitter.com/hworhVQPlq

Итак его величество #codesplitting, или "техасская резня бензопилой", потому что я разрежу тебя на части.

На самом… twitter.com/i/web/status/1…

Codesplitting вообще очень старая тема. В те времена когда мы отдельно подключали jQuery, отдельно Google Analytics… twitter.com/i/web/status/1…

Первым делом бандлер "обьяснил" что загружать один большой бандл - БЫСТРЕЕ, даже с http2 и компанией

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

Проблема в том, что у всего есть пределы и если бандл уже под 100 мегабайт (Jira), ну или хотя бы 10 - это СЛИШКОМ… twitter.com/i/web/status/1…

Первым делом - сохраняем спокойствие и пытаемся вспомнить зачем нам этот codesplitting нужен.

💡чтобы работало быст… twitter.com/i/web/status/1…

🚀 Почему быстрее? 🚀

На самом деле это просто - можно банально начать использовать require когда нужно.

Например был у меня код в redux… twitter.com/i/web/status/1…

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

В прошлом году меня зашеймили за react-focus-lock, что немного жирноват - 5kb min gz, и я придумал как это проблему… twitter.com/i/web/status/1…

Вроде как фигня, но react-focus-on, который focus+scroll lock - все те же 2kb на UI, и уже 5kb на sidecar

Плям иде… twitter.com/i/web/status/1…

🐢 Почему медленнее 🐢

Потому что "fetch-then-render". Если нарезать приложение на части, то для того чтобы только п… twitter.com/i/web/status/1…

React.lazy и другие Suspense проблему не решают от слова совсем. По определению.
Ну Suspense быть может(в concurren… twitter.com/i/web/status/1…

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

Варианта тут 2

На "работе" у нас чистый SPA без SSR, так что там сидит "плоское" CSR решение, а после работы я мейтейню loadable-c… twitter.com/i/web/status/1…

Основная проблема в SSR + Code Splitting хорошо показана в @stereobooster's react-snap

Разные библиотеки решают это по разному:

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

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

У @_developit тоже работает - github.com/GoogleChromeLa…, но не хорошо
И у меня работает, тоже не так чтобы, но уж как… twitter.com/i/web/status/1…

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

CODESPLITTING МОЖЕТ СДЕЛАТЬ ТОЛЬКО… twitter.com/i/web/status/1…

Codesplitting это не про imports, и не про Lazy - это про контроль зависимостей. Про то как ваше приложение живет и… twitter.com/i/web/status/1…

Я думаю следует сделать мини spin-off про "lazy require"

react-imported-component сам по себе к бандлеру не привяз… twitter.com/i/web/status/1…

Но что если вначале вызвать все импорты, а потом, буквально "через два промиса" сделать require entryPoint? pic.twitter.com/21Y1mUnIeV

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

Если кто прочитал основной тред про codesplitting, и захотел "умный Lazy на плоских routes" - вот его надо запускат… twitter.com/i/web/status/1…

Еще один момент, который про codesplitting, и про который мало кто знает (потому что его только только сделали) - "… twitter.com/i/web/status/1…

Изначально это так и называлось - webpack external import.
Не "нативный", нормально не работающий import, а именно… twitter.com/i/web/status/1…

В принципе это немного приравнивает js codesplitting к таким классическим вариантам как shared library(.so), или ви… twitter.com/i/web/status/1…

Ой! Сегодня же пятница!

По пятницам работа заканчивается в 4 дня, и начинается Пиво. Точнее не Пиво, а пиво, а есл… twitter.com/i/web/status/1…

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

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

Сосредоточеннос… twitter.com/i/web/status/1…

4+ раньше мне очень помогало в этом обычное курение, и после того как я бросил - сильно просел по эффективности.
Хо… 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…

C приходом в Яндекс (и javascript) стало как-то попроще - ничего стандартного не было в принципе, так что велосипед… twitter.com/i/web/status/1…

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

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

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

Нельзя просто сказать - jQuery ацтой, Effector лучше. Потому что 🤷‍♂️.

Возьмем $mol - это офигительная чтука. И вс… twitter.com/i/web/status/1…

И все "4 года" никакой другой реакции на $mol я не видел - у всех течет кровь из глаз, прям как когда-то у нас текл… twitter.com/i/web/status/1…

Это вообще немного пересекается с принципами развития OSS проектов от @andrey_sitnik, согласно которым описание дол… twitter.com/i/web/status/1…

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

Я начал постигать это искусство обучая жену, и по началу часто оставался без ужина, а то и вовсе спать на коврике (… twitter.com/i/web/status/1…

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

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

Итого:

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

Я точно знаю что "Federated Modules", aka webpack external import, кому-то так и не зашли.
Буду честен - что статья… twitter.com/i/web/status/1…

Для справки:

Хотя следует признать - старшеклассники катаются очень даже. pic.twitter.com/d8DWW0Svq4

На часах 7.25. Воскресенье.
А значит мое время практически завершилось.

С вами был @theKashey, из далекой Австрал… twitter.com/i/web/status/1…

Меня всегда можно найти: