Всем привет, это «Новости 512» от CSSSR. В этом выпуске мы поговорим о регулярных выражениях, взаимодействии микрофронтендов и оптимизации компилятора TypeScript. Мы немного поговорим о браузерной версии «Героев 3», redux-saga и потенциальном сопернике Copilot от Google. В этом же выпуске: релизы Firefox 113, Next.js 13.4 и Vue 3.3.
Интересные публикации
Регулярные выражения помогают нам работать со строками и текстами. Они очень полезные, но освоить их достаточно сложно. Адебайо Адамс (Adebayo Adams) в своей статье постарался собрать всё, что нужно знать о регулярных выражениях в JavaScript. Начиная с основ и постепенно усложняя материал, он рассказывает о базовых конструкциях, разных нотациях, методах, квантификаторах и всех других важных аспектах работы регулярных выражений. В конце статьи ещё и несколько примеров реальных задач. Получился хороший, подробный обзор. Даже если вы чувствуете себя уверенно в работе с регулярками, загляните освежить знания.
Про микрофронтенды говорят много и часто, все уже видели миллионы схем со стрелочками и прочими делами, но как организовать обмен данными по этим самым стрелочкам? Об этом следующая статья. В материале описываются несколько способов организации взаимодействия между микрофронтами. Здесь и старые знакомые (например, iFrame), и относительно новые технологии (например, BroadcastChannel API). Помимо них рассматриваются событийные CustomEvent API и Storage event. У каждого метода есть свои преимущества, недостатки и ограничения, о них коротко для каждой технологии и рассказывает автор.
Писать сложные типы на TypeScript непросто, но ещё сложнее найти какой-то более понятный, реальный пример. В следующей статье пример написания типов на примере роутинга в React. В гайде используется react-router, сам React и набор TS-утилит. Конечно, типы для роутера и так уже написаны, но в этом материале изобретается велосипед в исключительно образовательных целях. Рекомендую: получился пример реальной проблемы, а разбор процесса написания сложных типов получился очень подробный.
Следующий материал довольно сложный, по крайней мере для меня. В блоге TypeScript Рон Бактон (Ron Buckton) рассказал о новом VS Code-плагине Deopt Explorer, при помощи которого оптимизировали компилятор TypeScript. Речь идёт об исследовании встроенного кеширования, или Inline caching — технике оптимизации, которая применяется в разных движках. В некоторых условиях она становится менее эффективной или даже деоптимизирует работу движка. Для исследования проблемных мест и пригодится новое расширение. Также в статье Рон показывает пример поиска и устранения подобной деоптимизации. Пригодится всем, кто так или иначе имеет дело с работой V8 и интересуется работой движков.
Redux-saga практически стандарт индустрии при работе с Redux. Она помогает работать с сайд-эффектами и упрощает их тестирование. Именно о «саге» рассказывает в своей статье на Хабре Станислав Быков. Это обзорный материал, который проводит читателя по всем основным возможностям библиотеки и объясняет основные концепции. Также в статье есть и примеры работы с библиотекой.
В CI/CD-пайплайне много чего может пойти не так, а узких мест может быть предостаточно. Это один из кейсов, когда установка зависимостей «ела» кучу времени и тормозила пайплайн. Федор Биличенко рассказал о том, как удалось ускорить пайплайн за счет оптимизации установки зависимостей. Помог Yarn и его философия Zero-Installs. Проще говоря, зависимости будут храниться в репе в виде архива — по сути это оффлайн-кэш зависимостей. В итоге пайплайн ускорился в три раза. Больше подробностей о кейсе по ссылке в описании выпуска.
Немного о тестировании. Cypress — прекрасный инструмент для тестирования. Часто он используется и при автоматизированном тестировании. Для «чистого» тестирования может быть очень важно изолированное окружение, имитирующее правильные условия. О том, как использовать Cypress в связке с Docker, на Хабре рассказал Алексей Санжанов. Он показал примеры использования официальных образов Cypress и некоторые приёмы работы с контейнерами на небольшом тестовом проекте. Если вы хотите подружить Docker и Cypress на своих проектах, это хорошая стартовая точка.
Иногда тесты Jest могут падать ложно. В тесты может просачиваться состояние, они могут быть зависимы от порядка выполнения, и это не полный список причин. Джейми Мэги (Jamie Magee) в своём блоге рассказал о настройках Jest clearMocks, resetMocks, restoreMocks и resetModules, которые стоит включить, чтобы среда ресетилась перед прогонами. В статье более подробно рассказывается о самих настройках и есть примеры того, как тесты могут быть ложнонегативными.
В блоге web.dev появилась статья о новой спецификации Scroll-driven animations. В статье вы найдёте небольшой рекап о том, как анимации работают сейчас, и много демок новой спецификации. Есть даже отдельный мини-сайт с демками. Если я всё правильно понял, то этот API будет доступен уже в Chrome 115.
Что вы делаете, когда веб-страницу нужно сохранить как PDF-файл? Правильно, берёте браузер и выбираете «Печать в PDF». Но что, если по какой-то причине этого делать нельзя? Например, из-за требований к безопасности, как в следующем кейсе в Лаборатории Касперского. Разработчик Алексей Сингур рассказал о том, как задача решалась при помощи библиотеки React-PDF. Тут разбор кейса, самой библиотеки и обзор преимуществ с недостатками.
Если вы уже давно не писали на «ванильном» JS, то загляните в эту статью. Это перевод статьи Пола Кнулста (Paul Knulst) об основных особенностях JS. Здесь о замыканиях, прототипном наследовании, Event Loop, приведении типов и других особенностях. Если вы собираетесь готовиться к собесу или просто хотите поднять базу ещё раз — добро пожаловать по ссылке.
В конце статья на Хабре о ни много ни мало браузерной версии «Герои 3». Разработка заняла три года, кучу строк кода, нервов и времени на тесты. В ней есть мультиплеер на веб-сокетах, возможность создания модов и другие фичи. Посмотрите, суперинтересно. В проекте достаточно багов — автор будет рад баг-репортам и помощи.
Новости релизов
Firefox догоняет Chrome с номером версии 113. В этом релизе по умолчанию включена поддержка новых цветовых спецификаций и функций. Это значит, что oklch() теперь поддерживается всеми мажорными браузерами. Был добавлен Compression Streams API, который может сжимать и распаковывать gzip и deflate. В DevTools прокачали поиск по JS-файлам, доступным в отладчике. Также был представлен ряд исправлений багов и устранён ряд уязвимостей.
Вышла версия Next.js 13.4. В этом релиза App Router вышел как уже стабилизированная часть фреймворка. Кроме того, бандлер Turbopack получил статус беты, и его уже можно попробовать. Больше подробностей о релизе — в блоге Next.js.
Доступен Vue версии 3.3. Эту версию назвали в честь Бродяги Кенсина, если вы смотрели это аниме и понимаете, о чем я. В этом релизе разработчики сосредоточились на улучшении DX при использовании Vue с TypeScript. Была анонсирована экспериментальная фича реактивной деструктуризации пропсов, а также ряд небольших инфраструктурных апдейтов.
Тестовый фреймворк Jasmine отметился релизом пятой мажорной версии. Главная фича релиза — поддержка параллельного исполнения тестов. Кроме этого появилась поддержка 20-ой версии Node.js.
Вышел важный security-релиз Gitlab, который устраняет критическую уязвимость. В определённых условиях через GraphQL-эндпоинт к любому проекту инстанса может быть приложен вредоносный раннер. Только в мае security-релизов было уже три. Не забывайте вовремя обновляться.
Также в этом эпизоде отмечу релизы pnpm 8.5.1 и фреймворка Electron 24.2.0.
Другие новости
На главном для Google событии года Google I/O помимо новых устройств и презентации новой версии Android был представлен сервис Google Codey. Codey — это основанный на языковой модели PaLM 2 ассистент в написании кода. Пока он может работать с двадцатью языками, умеет писать и объяснять строчки кода. Конечно, его видят как конкурента Copilot от Microsoft и GitHub. Пока непонятно, сколько это будет стоить и в каком виде сервис будет доступен для пользователей. Посмотрим, увидим ли мы битву битву искусственных интеллектов в обозримом будущем.