|
| 1 | +--- |
| 2 | +title: 'В этом выпуске: Chrome 98, серверные компоненты React, мониторинг регрессий производительности в Netflix, оптимизация Angular-приложений, кое-что побыстрее pnpm, GitHub и безопасность npm-пакетов.' |
| 3 | +soundcloudLink: 'https://soundcloud.com/csssr/chrome-98-servernye-komponenty-react-angular-optimizatsii-tnpm-bezopasnost-npm-paketov' |
| 4 | +date: '2022-02-04T00:00:00.000Z' |
| 5 | +episodeNumber: 207 |
| 6 | +tag: 'news' |
| 7 | +author: 'Ислам Виндижев' |
| 8 | +--- |
| 9 | + |
| 10 | +<ParagraphWithImage imageName="manWithLaptop"> |
| 11 | + ### Интересные публикации |
| 12 | + |
| 13 | +Чан Ву (Chang Wu) в блоге Plasmic рассказал про внутреннее устройство [React Server Components (RSC)](https://blog.plasmic.app/posts/how-react-server-components-work/). Вы уже могли слышать про фичу в ранних заметках о React 18 или на ReactConf. Это экспериментальный тип компонентов, которые позволяют выносить некоторую часть логики приложения на сервер и не включать в бандл. В статье рассматривается устройство серверных компонентов, разделение логики и жизненный цикл таких компонентов. Затем объясняется, как это всё в итоге обрабатывается браузером. В общем, относительно небольшой и подробный гайд-разбор по серверным компонентам, получилось неплохо. |
| 14 | +</ParagraphWithImage> |
| 15 | + |
| 16 | +[Какие проблемы решают веб-фреймворки](https://www.smashingmagazine.com/2022/01/web-frameworks-guide-part1/), и как можно без них обойтись? На этот вопрос в своей статье на SmashingMagazine пытается ответить Ноам Розенталь (Noam Rosenthal). Он выбрал для сравнения React, Svelte, Lit и Solid.js и показывает, как эти фреймворки привносят реактивность, решают проблемы работы с данными и логикой приложений. За пределами статьи он оставил компонентный подход, но в целом, как вы понимаете, работа с компонентами — это ещё одна фича фреймворков, из-за которой они и нужны. Планируется вторая часть, в которой автор собирается показать, как это всё можно провернуть без фреймворков, должно быть довольно интересно. |
| 17 | + |
| 18 | +Минко Гечев (Minko Gechev) на YouTube рассмотрел [распространенные проблемы производительности фреймворка Angular](https://www.youtube.com/watch?v=f8sA-i6gkGQ): zone pollution, change detection вне компонента, лишние перерасчеты в шаблонах и слишком массивные деревья компонентов. В видео он объясняет, как именно эти проблемы возникают и как их можно решить. Видео чуть меньше 20 минут, если вы работаете с Angular и не слышали о какой-то из этих проблем — обязательно посмотрите. |
| 19 | + |
| 20 | +Следующий материал тоже по Angular, но несколько попроще. Мария Заид (Maria Zayed) написала заметку [о жизненном цикле Angular-компонентов](https://indepth.dev/posts/1494/complete-guide-angular-lifecycle-hooks). Она рассматривает 7 методов жизненного цикла компонентов, их особенности и то, в каком порядке они вызываются. Всё это на примере маленького демоприложения. |
| 21 | + |
| 22 | +Ангус Кролл (Angus Croll) из Netflix написал статью [об обнаружении регрессий производительности](https://netflixtechblog.com/fixing-performance-regressions-before-they-happen-eab2602b86fe). В его команде тесты производительности прогоняются и при коммите, и при слиянии в целевую ветку. В итоге для обнаружения аномалий используется специальный алгоритм, который анализирует данные большого количества прогонов. Потом при помощи статистических методов определяются конкретные сборки, в которых возникали проблемы. После внедрения техники количество ложно положительных падений тестов уменьшилось в 10 раз. Крутая статья для тех, кто интересуется мониторингом и не вполне типичными методами анализа проблем. |
| 23 | + |
| 24 | +В последнее время довольно часто слышно о pnpm и его скорости. А можно ли ещё быстрее? На dev.to появилась статья разработчика из Alibaba [про проприетарное решение tnpm](https://dev.to/atian25/in-depth-of-tnpm-rapid-mode-how-could-we-fast-10s-than-pnpm-3bpp), которое, по сути, является внутренним реестром пакетов для проектов Alibaba. Команда не искала легких путей и перелопатила архитектуру типичного менеджера пакетов. Было применено большое количество оптимизаций, от снижения числа запросов до работы с файловой системой и обращениями к диску. В итоге в одном из бенчмарков tnpm оказался в 10 раз быстрее pnpm. Понятное дело, это не значит, что tnpm всегда и везде в 10 раз быстрее pnpm, но посмотреть на оптимизации интересно. tnpm пока строго проприетарный, но в будущем его код планируют открыть. |
| 25 | + |
| 26 | +Код-сплиттинг — это подход, при котором бандл может быть разделен на несколько бандлов, которые пользователь может получить по мере работы приложения. Таким образом, [стоимость использования JavaScript в той или иной мере снижается](https://www.smashingmagazine.com/2022/02/javascript-bundle-performance-code-splitting/). Именно об этом новая статья Адриана Беце (Adrian Bece). Он рассказывает о проблеме большого бандла, почему это плохо (я думаю, уже все знают и понимают, почему) и о том, как, собственно, организовать код-сплиттинг в бандле. Адриан приводит несколько стратегий разделения бандла. Если вы ещё не разбирались в концепции, то это неплохая возможность. |
| 27 | + |
| 28 | +Ингвар Степанян (Ingvar Stepanyan) на web.dev написал статью о том, [как собирать разные версии WebAssembly-бандлов](https://web.dev/webassembly-feature-detection/) для поддержки разных браузеров. Проблема в том, что не все браузеры поддерживают все фичи WebAssembly, что порождает необходимость иметь разные версии для разных браузеров. Ингвар рассказывает, как выбрать и логически сгруппировать нужные фичи, скомпилировать нужные наборы фич и, наконец, организовать загрузку правильного бандла. |
| 29 | + |
| 30 | +Далее любопытная статья [о фронтенд-трендах 2022](https://habr.com/ru/company/htmlacademy/blog/648325/) из блога HTMLAcademy. Самым важным трендом был назван отказ от старых браузеров и прекращение их поддержки, с чем я, конечно, согласен. Также 2022 год сулит быть годом TypeScript, React и новых CSS-фич. Отдельно обсуждается рынок труда. Верить описываемым трендам в статьях или стримах других людей — дело ваше, в этом случае есть ссылки на ресурсы, на основе которых писалась статья, так что можете почитать и сами. |
| 31 | + |
| 32 | +Закроет рубрику ресурс [monorepo.tools](https://monorepo.tools/). Как вы могли догадаться, это ресурс о монорепозиториях. Там вы можете найти базовое определение монорепозитория, объяснение, для чего нужны и могут быть полезны монорепы, а также ссылки на дополнительные ресурсы. Как написано в самом начале страницы, там есть всё, что вам нужно знать про монорепозитории и инструменты вокруг них. |
| 33 | + |
| 34 | +<ParagraphWithImage imageName="laptopNews" > |
| 35 | + ### Новости релизов |
| 36 | + |
| 37 | +Первый релиз — [Chrome 98](https://chromereleases.googleblog.com/2022/02/stable-channel-update-for-desktop.html). В этой версии появилась поддержка нового формата шрифтов с поддержкой цветов, градиентов и смешивания COLRv1. При обращении к приватным сетям отправляются CORS Preflight-запросы. В инструментах разработчика теперь используется редактор на базе Codemirror 6, что позволяет обрабатывать большие файлы и исправить проблему со смещением скролла во время отладки. Lighthouse обновили до 9 версии, добавили панель дерева доступности и инструмент отладки кеша перехода вперед и назад. Больше подробностей традиционно в обзорах [Пита Лепейджа](https://developer.chrome.com/blog/new-in-chrome-98/) и [Джеселин Ин](https://developer.chrome.com/blog/new-in-devtools-98/). |
| 38 | +</ParagraphWithImage> |
| 39 | + |
| 40 | +Вышли обновления 14 и 12 LTS-версий Node.js. В версии [14.19.0](https://nodejs.org/en/blog/release/v14.19.0/) была добавлена поддержка Corepack. Corepack уже есть в 17 версии, и я её упоминал, это технология, которая позволяет работать с разными пакетными менеджерами без их установки. Звучит интересно, но я так и не успел посмотреть, как это работает. На странице релиза можно найти ссылку на документацию Corepack. В обновлении [12.22.10](https://nodejs.org/en/blog/release/v12.22.10/) версию npm апнули до 6.14.16. |
| 41 | + |
| 42 | +Вышел [TypeScript 4.6 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/), подробнее о новой версии TS я расскажу, когда выйдет релиз-кандидат. |
| 43 | + |
| 44 | +Также на этой неделе отмечу релиз веб-сервера [nginx 1.21.6 ](https://mailman.nginx.org/archives/list/[email protected]/thread/3TSUANWIIXQIG7LLLSLRTIZ4CNTKKT2Q/). |
| 45 | + |
| 46 | +<ParagraphWithImage imageName="laptopNews" > |
| 47 | + ### Другие новости |
| 48 | + |
| 49 | +Недавние волнения на тему безопасности и разные истории о пакетах в npm, которые кладут на лопатки весь интернет, заставили GitHub [призадуматься](https://github.blog/2022-02-01-top-100-npm-package-maintainers-require-2fa-additional-security/). Компания выделила 100 пакетов, которые наиболее часто встречаются в зависимостях других пакетов и проектов. Для мейнтейнеров этих пакетов была введена обязательная двухфакторная аутентификация. Цель простая: сделать так, чтобы злоумышленники не могли получать доступ к важным пакетам и компрометировать их. Также были анонсированы и другие инициативы по безопасности, например, ускорение внедрения поддержки WebAuthn. |
| 50 | +</ParagraphWithImage> |
| 51 | + |
| 52 | +И в конце коротенькая новость. С 7 февраля [Vue 3](https://blog.vuejs.org/posts/vue-3-as-the-new-default.html) станет новой версией фреймворка по умолчанию или, если хотите, основной версией. |
| 53 | + |
| 54 | + ### Пишите нам и читайте |
| 55 | + [Telegram—канал CSSSR](https://t.me/csssr) |
| 56 | + |
| 57 | + [Twitter CSSSR](https://twitter.com/csssr_dev) |
| 58 | + |
| 59 | + [Twitter новостей](https://twitter.com/csssr_news) |
| 60 | + |
| 61 | + [Telegram ведущего](https://t.me/Vindizh) |
| 62 | + |
| 63 | + [Twitter ведущего](https://twitter.com/Vindizh) |
0 commit comments