Рома Дворнов имплементировал очень крутой инструмент, который упрощает анализ перформанса реакт-приложений

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

Сегодня опубликовал React render tracker – инструмент, который помогает обнаруживать в React приложениях непреднамеренные (лишние) ререндеры и отмонтирование компонент, что может быть причиной багов и проблем с производительностью. Проект в стадии MVP/proof of concept, но кое-что уже умеет. Планов много, есть "небольшой" базовый список того, что хотелось бы добавить в ближайшее время. Самое важное для меня – это возможность записывать логи рендеров для анализа на CI, и возможность получать логи и скриншоты чтобы прикладывать их в задачи, PR и в технических документах. Также с помощью React render tracker можно будет (хотя что-то можно уже сейчас) показывать, как на самом деле ведет себя React в разных кейсах и проверять гипотезы. То есть потенциально у него возможны обучающая и демонстрационная функции.
Я еще напишу, чем React render tracker отличается от React Developer Tools и других инструментов, и постараюсь делиться как кейсами использования инструмента и как он будет развиваться, так и ситуациями использования React, когда последний работает не так, как может думать разработчик.
В общем, какое-то время в канале будет про особенности React'а и около. Надеюсь, не слишком долго, поэтому не переключайтесь 🙂

Я как обычно пропал из канала. Д - дисциплина. Но ближайшее время всплыву на холи жс где мы поговорим об одной из наиболее популярных операционных систем, о которой вы скорее всего никогда не слышали!

Когда-нибудь покупали телефон своим бабушкам и дедушкам? Вероятно, это были телефоны без тачскрина с огромными кнопками? А вы знали, что существуют похожие аппараты, на которых можно запускать знакомые нам приложения вроде WhatsApp или YouTube?

Если не знали, Никита Мостовой вам все расскажет. В своем выступлении на HolyJS 2021 Moscow он расскажет про такой «бабушкофон»: его архитектуру, софтверные и хардварные ограничения. А в дополнение к этому он залезет в его системное приложение, разберет его по косточкам и покажет, как написать аналогичное. Если вам надоели доклады об Angular и Vue и хочется разнообразия, то это как раз для вас.

Подробности и билеты: https://vk.cc/c7lQTu

#НетВойне
Знаете, я думал месяц назад, покину холи, реформирую чат, договорился почти до того, чтобы стримы гонять…

Все в один момент стало неважно.
Я на прошлой неделе был онкол и во вторник был «критикал на проде».
Теперь у нас всех блокер в жизни.

Жизнь разделилась на до и после. Я не знаю как с этим жить. То, что Россия начала войну — не поддаётся уму. Это непростительное преступление, совершенное кровожадными уродами.
Я знаю, что это должно быть остановлено.
Получить в четверг утром сообщение: «на нас напали, в городе взрывы» — сумасшествие.

У меня маленький канал. Я очень надеюсь, что со всеми вами все хорошо, вы живы и здоровы и ваши родные тоже.

Ку, живые есть? Я в очередной раз планирую воскресить канал. Есть такая традиция

Сколько до/после Вебпака сборщиков вышло? Хочешь, вот тебе:
- Для либ
- Супер-быстрый
- Zero configuration
Все что угодно, вебпак и рядом не стоял.

Правда вебпак до сих пор не только живет и разивается, но и если нужно гибко настроить сборку, проанализировать, что в бандле случилось, то до полноценной замены, как на батуте до луны.
Нет, есть конечно сборщики хорошие в чем-то одном, не спорю. Например, вот нужно либу мелкую собрать для раздачи в npm, ну возьми ты microbundler, который на rollup и радуйся жизни.

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

Что у нас наиболее хайповое последнее время? Vite? Быстрый, резкий, но если ты собираешь код для продакшена, то мы вообще за себя не отвечаем, мы тут только ради development режима постоим, он у нас ого-го, на esbuild, который на Rust! Слышали, да? на Rust, а не на каком-нибудь JS, но вот незадача, как только нужен продакшн билд и какие-нибудь браузеры без нативной поддержки ES6Modules, то у нас Rollup: https://vitejs.dev/guide/build.html#public-base-path

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

Удобно!

В комментариях правильно указали, что esbuild не на Rust, а на Go.

Оказалось, чтобы раздуть срач, достаточно сказать в твиттере - не пользуйтесь "разрушающими" операциями в git, не делайте amend, rebase, squash и далее по списку.

Пара мыслей:
В своей ветке, коммить хоть по каждому символу отдельно.
В истории основной / релиз / мастера / мейна ветке коммиты лучше держать таким образом, если любое количество предыдущих откатили -- все равно все работало. (Terms and conditions apply (c))

Почему так? Сделал например я
tmp -> tmp2 -> feature -> fix коммиты и залил на прод.
Обнаружился баг в tmp2 критичный, что вот нужно срочно решать. Написание решения оказывается сложным, поэтому логично -- откатить.
Если я в отпуске, то как правильно откатывать? один коммит? все последующие? все связанные с этой веткой?

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

Следующая проблема — что автор хотел сказать tmp? а tmp2?
Да, можно просить человека давать осмысленные коммиты, но вот ты сидишь на ревью, тебе попросили поправить это и это, ты чешешь репу и даешь какое название коммиту? правильно "review fixes".

И да, разрушающих операций в гите не существуют. Точнее существует, но одна -- грохнуть репу у себя и всех, кто ее успел скачать. Но это уже как удалённое из интернета фото Бейонсе.

Главный takeaway этой истории:
Следить за политикой "причесывай свои коммиты" сложно. Тулзы должны форсить культуру кода, а не надеяться на дисциплину. Чем больше количество людей коммитящих в проект тем это важнее.

Я часто рассказываю как работают промисы, и всякие подробности, уровня catch возвращает промис, и если не делать rethrow, то промис будет зарезолвлен.

Вот оформил все в компактную статью: https://dev.to/xnimorz/101-series-promises-1-how-promises-work-1k1i

Планирую сделать серию статей про промисы и всякие штуки с ними

В первой статье мы разобрали базовые элементы промисов.

Прежде чем мы перейдем к кишочкам, предлагаю отвлечься и посмотреть какие утилиты мы можем строить вокруг промисов.

Я выбрал два популярных топика: как получить статус промиса и как построить promise queue.

https://dev.to/xnimorz/101-series-promises-2-how-to-get-current-promise-status-and-build-your-own-promise-queue-18j8

Пока я готовлю следующую часть, так как осознал, что прежде чем рассказывать про GC и промисы, хорошо бы рассказать про слабые ссылки, finalization registry вот это вот все, хотел поделиться вот чем:

Я в начале июля подавался на endorsment для смены визы со skilled worker на global talent.
Андрей Гончаров об подобном писал здесь: https://blog.goncharov.ai/getting-a-talent-visa-in-the-uk-for-mortals

Было бы интересно почитать про мой экспириенс в этом?

Я не буду писать большие статьи, я не буду писать большие статьи...

Strong and weak refs, finalization registry и как трекать работу GC в свежеопубликованной статье!
https://dev.to/xnimorz/javascript-memory-management-101-strong-and-weak-refs-finalizationregistry-1281

Просто чтобы рассказывать о промисах и GC для них нужна некоторая база. Эта статья как раз таки такую базу дает.

Несколько лет назад я наткнулся на логичное, но не самое "дружелюбное" поведение babel плагинов
Когда вам нужно выдрать какую-то ноду или создать ее с нуля и вставить в ваш файл, то вы можете создать эту самую ноду через всякие createIdentifier и прочее либо просто взять ноду по path.node

Но если вы ее вставляете куда-то, то клонируйте ноду _всегда_ через types.cloneNode(node).
В этом случае вы получите полноценный клон и никогда не попадете в ситуацию, когда элемент который нужен в 3,4,5 местах внезапно используется только в последнем.

Я как обычно, канал веду стихийно. Начал, отвлекся, закончил.

С наступающим вас всех, крепкой кукухи и мира.

Я тут решил, что свой блог хорошо, но поддерживать самому лениво, долго и... и еще раз лениво.
Поэтому сайт перетащил обратно на Svelte, у них кстати, есть очень удобный SvelteKit, который правда до нормального релиза все еще не дошел и даже на маленьких проектах API то и дело слетает, я для деплоя 2 страниц наткнулся на 3 разных issue, но сама идея SvelteKit — мое увожение. Попозже расскажу.

Вместе с перевозом сайте, перетащил блог на hashnode и затащил две статьи про CallStack и гиганта про Event Loop.

Event Loop кстати я переписал, и обновил: https://blog.xnim.me/event-loop-and-render-queue

До 2018-2019 года я сохранял часть статей на "почитать когда-нить потом". Я сейчас удаляю/переношу все в обсидиан и решил выложить закладки сюда. Играю по честному, не утаиваю, все что сохранено было шарю. Сортировки нет, все уровня "как попало":

Очень крутая статья о том как жеш браузер рендерит страницы https://developer.chrome.com/blog/inside-browser-part3/

Receive object, return object: простой, понятный паттерн, который на самом деле упрощает чтение вашего кода. Статье не хватает оценки perf impact. https://medium.freecodecamp.org/elegant-patterns-in-modern-javascript-roro-be01e7669cbd

MobX state Management tree https://github.com/mobxjs/mobx-state-tree Стейт контейнер для mobx

Throwing and fetching on render method https://dev-blog.apollodata.com/a-first-look-at-async-react-apollo-10a82907b48e -- подустарела, Suspence пока suspence еще нет

ES6 Proxies. Если вы еще не используете WeakMaps и прокси, то хотя бы потыкайте в них палочкой, они бывают полезными https://ponyfoo.com/articles/es6-proxies-in-depth

У меня статья хранилась под названием "Почитать, осознать". Статья о написании функции мемоизации: https://habrahabr.ru/post/350562/ (когда хабр еще был хабрахабром и он еще не превратился в днищенское дно с запретом высказываний против войны) Я в целом дико люблю контект посвященный PRE в любом варианте. Как ненапряжная статья для чтения в поезде метро - гуд

Одна из статей, до которых я так и не дошел. По секрету скажу - я ни разу не использовал GraphQL с нодой. Но вы никому не говорите это, оке? https://blog.risingstack.com/graphql-overview-getting-started-with-graphql-and-nodejs/

https://frontstuff.io/in-defense-of-utility-first-css — Atomic CSS. Ну, не только же жс писать, правда? Статья хорошая, потыкайте

А еще в списке на почитать у меня были записи уровня "(Потерял ссылку) — WebWorkers", согласитесь, очень полезные, да?

https://habr.com/post/353564/ — Когда реакт еще был основан на классах (и знаете из глора компонента-функции я возвращаюсь к мнению, что классы были лучше), апи классов сильно штормило. ComponentWillMount/componentWillUpdate/componentDidUpdate/SCU и иже с ними. В какой момент часть методов дерпекейтилось, менялось и вот анонсировали getDerivedStateFromState, которая блин prevProps не получало, да епрст! Статья как раз об этом и об мемоизации.

https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3 — статья основанная на докладе, про дизайн больших приложений. Еще одна статья из цикла -- я в итоге ее и не прочитал.

https://medium.com/@pomber/jsx-can-do-that-1b2666c23a32 Сейчас популярно: "я написал С++ компилятор на чистом CSS" Статья примерно о том же, но про JSX.
<Sum>, <If> и так далее

https://medium.com/@pomber/didact-fiber-incremental-reconciliation-b2fe028dcaec?sectionName=top - немного о lifecycle компонентов и как можно спроектировать свой собственный скедулер. Прикольная статья если хотите посмотреть как другие люди подходят к архитектурированию приложений.

"Я купил книгу положил на полку, не помогает". Урок по Apollo+GraphQL: https://www.robinwieruch.de/react-graphql-apollo-tutorial/

React context и авторизация: https://www.freecodecamp.org/news/how-to-protect-your-routes-with-react-context-717670c4713a?source=email-9be83c7362ee-1526530608364-digest.reader------0-58------------------e95f8e57_c0f0_4b0d_9fcc_ebf294a4f3a9-1&sectionName=top

Simplicity в целом очень важно. Если вы умеете делать сложные вещи просто, то вы молодцы. У меня не всегда получается. Следующая статья -- простой пример о том же самом для реакт-компонентов: https://medium.com/prolanceer/how-to-architect-complex-ui-components-in-react-27042ff3689f

"Не читал, ууууу". Тулинг для редакса: https://medium.com/welldone-software/redux-toolbelt-supercharge-your-redux-ec16e704fe93

О публикации open source проектов https://medium.com/codezillas/a-bitter-guide-to-open-source-a8e3b6a3c1c4

https://hackernoon.com/redesigning-redux-b2baee8b8a38 — редизайн редакс-апи, использование action creators которые напрямую влияют на редьюсеры.

Создание генератора форм: https://medium.com/hackernoon/how-to-build-forms-dynamically-in-react-redux-e3a6c89a3406

А помните, а помните как все писали про новый контекст? https://medium.com/@v.cibizov/new-react-context-560e7a40497f это еще пока не нашли кучу проблем с ним

SSR in Airbnb https://medium.com/airbnb-engineering/operationalizing-node-js-for-server-side-rendering-c5ba718acfc9

Использование композиции и render props вместо context api https://medium.com/@barisozcetin/using-composition-and-render-props-instead-of-context-api-e431b1cbbc3b

https://medium.com/devschacht/event-loop-timers-and-nexttick-18579cd122e0 — node.js event loop

Путь рендеринга веб-страниц https://habr.com/post/262239/ https://habr.com/post/320430/

Vue preview https://medium.com/vue-mastery/evan-you-previews-vue-js-3-0-ab063dec3547

Редизайн gmail — технические метрики — https://medium.com/@boriscoder/peeking-under-the-hood-of-redesigned-gmail-dd84b532e0f5 Классная статья.

Why react element has $$typeof property https://overreacted.io/why-do-react-elements-have-typeof-property/

Export react error boundaries https://medium.com/chingu/exploit-react-error-boundaries-to-improve-ux-8e1b18faa5ab

The cost of javascript https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4?fbclid=IwAR0ovt8QShYg_epZyk5sJIBOuviBUlKKPxyfaKaCBo5CPtbz2uLLn1MQbq8

Использование колбеков-хендлеров в реакт https://medium.freecodecamp.org/the-best-way-to-bind-event-handlers-in-react-282db2cf1530?gi=8982be63f390

Priority hints (контект страницы) https://wicg.github.io/priority-hints/

React deep dive (ворнинг, не читал) https://overreacted.io/react-as-a-ui-runwww.tgoop.com/

Мне понравилось обсуждение в реакт-редаксе про новый контекст, сабскрипшены и т.д. React-redux https://github.com/reduxjs/react-redux/issues/1177