#инструмент дня

Продолжаем инструментальную неделю :)

после поглощения VMWare компанией Broadcom, VMWare Fusion Pro (MacOS) и VMware Workstation (Win/Linux) стали бесплатными для индивидуального использования

Думаю, многие знают, что это за инструмент, но если вкратце — средство виртуализации для винды/мака с понятным GUI и уж точно на несколько порядков лучше VirtualBox.

Учитывая, что VirtualBox для macOS на M-процессорах работает максимально плохо...

Нопридется регистрировать учетную запись в Broadcom (для РФ только через VPN).

Заметка о выпуске:
https://blogs.vmware.com/teamfusion/2024/05/fusion-pro-now-available-free-for-personal-use.html

#virtualization #vmware #virtualbox

#статья дня

GitHub выкатил отличный пост о том, как они ускоряли рендеринг диффов в пулл-реквестах (исконно русские слова) — и внезапно выяснили, что браузеру становится плохо, когда в PR десятки тысяч строк.

Вот ссыль сразу: https://github.blog/engineering/architecture-optimization/the-uphill-climb-of-making-diff-lines-performant/

Главная проблема оказалась в том, что каждая строка diff-а была маленьким React-стартапом: 8–13 компонентов, куча DOM-нод и отдельные event handlers почти на всё подряд.

Старый подход выглядел примерно так:

<DiffLine>
  <LineNumber />
  <SyntaxHighlight>
    <Token />
    <Token />
  </SyntaxHighlight>
</DiffLine>

И конечно же:

<div
  onMouseEnter={...}
  onMouseLeave={...}
  onClick={...}
/>

Когда таких строк 10 000+, Chrome начинает потреблять память не в себя.

А дальше случилось прекрасное: GitHub героически переоткрыл event delegation — технику, которую jQuery нормально объяснял ещё лет 15 назад (не воспринимайте буквально, автоматическая делегация в реакте была и есть). Оказалось, что один обработчик событий на контейнер внезапно быстрее, чем 30 тысяч onMouseEnter на каждую строку. Кто бы мог подумать.

Новый вариант:

<table onMouseMove={handleHover}>
  <tr data-line="42">
    <td>const value = 1;</td>
  </tr>
</table>
function handleHover(e) {
  highlight(e.target.dataset.line)
}

В итоге GitHub выкинул 74% React-компонентов, почти вдвое снизил потребление памяти и ещё удалил пару лишних <code>-тегов из каждой строки, потому что 20 000 ненужных DOM-элементов — это всё ещё 20 000 ненужных DOM-элементов.

Мораль истории максимально простая: abstraction is not free. Иногда один обработчик событий и туповатый плоский код работают лучше, чем архитектура мечты из 400 reusable-компонентов, custom hooks и трёх уровней composition.

#github #react #virtualization