Всем привет! В этом выпуске мы поговорим про релизы Firefox 108, Vite 4, PHP 8.2 и Ruby 3.2. Также мы посмотрим на Redux Toolkit Query, масштабирование разработки с NestJS, Drag-n-Drop-приложение и его тестирование по BDD с Cucumber и другие интересные материалы недели.
Прежде чем мы начнём — несколько слов о следующем эпизоде. Пока непонятно, будут ли достаточно важные новости к следующему выпуску, так что, скорее всего, это будет краткий обзор уходящего года с новогодним поздравлением вас любимых. Но если будут новости, которые не смогут ждать января, то они будут тоже.
После этого новости возьмут перерыв на новогодние праздники и вернутся в пятницу, 13-го января. Надеюсь, среди нас нет суеверных людей (я точно не из их числа).
А теперь к выпуску.
Интересные публикации
Как вы знаете, на фронтенде, если очень обобщать, задача — получить данные для пользователя, отобразить и дать возможность с ними взаимодействовать. С усложнением состояний появились и менеджеры состояний. Один из них — Redux, который многие ругали за большое количество шаблонного кода и отсутствие некоторых фич. Эту проблему решили созданием Redux Toolkit, и сейчас это официально рекомендуемый подход. Антон Степанов — фронтендер из Альфа-банка — в своей статье рассказывает о Redux Toolkit Query или RTK Query. Эта библиотека была создана как раз для того, чтобы фетчить данные и кешировать их без огромных шаблонных конструкций. Кроме того, она помогает работать с оптимистичным обновлением, дедупликацией запросов и другими общими кейсами применения Redux. Антон показывает разные случаи применения на примере фронта и бэка приложения и разбирает применение RTK Query в разных ситуациях. В конце статьи — ссылки на репозитории фронта и бэка, так что с примерами можно поэкспериментировать самостоятельно.
Следующая статья посвящена разработке приложения с Drag-n-Drop. В статье Олександр Ткаченко показывает пример реализации простого приложения с применением React, React DnD и TypeScript. Приложение в стиле ситкома ALF: это подобие ресторана, в котором можно перетаскивать блюда между столиками посетителей. Репозиторий и работающий пример в статье, кстати, тоже есть. Цель — не только реализация приложения, но и его тестирование. Этому посвящена вторая часть статьи — она пока не переведена, но есть на английском языке. Для тестирования используются React Testing Library, Cucumber и Jest Cucumber, а сам подход — BDD или Behavior-driven development. Очень даже неплохо, а про BDD в JS-проектах я вообще очень редко слышу. Рекомендую поинтересоваться, хотя бы для общего развития.
Выходят новые версии фреймворков, появляются новые фичи, а как-то последовательно опробовать их и применить в деле не всегда получается. Иногда из-за документации, иногда из-за слабого освещения той или иной фичи и по другим причинам. В этом материале речь идёт об Angular 15 и его новых фичах. По существу это подборка ресурсов, которые помогут разобраться. В первую очередь идут, конечно, ссылки на официальную документацию. Далее — статьи, которые помогут разобраться в API композиции директив, директиве для Image, Standalone API и других фичах.
Денис Былинин из Сравни рассказал на Хабре о том, чем NestJS может помочь разрастающимся проектам. В статье приводится мотивация и разные аспекты работы с фреймворком — конечно, не без подводных камней. В итоге автор делает вывод, что NestJS поможет в масштабировании, но не подойдёт для небольших проектов или там, где нужно выйти за рамки концепций фреймворка. Статья будет полезна руководителям разработки, архитекторам, тимлидам и внедренцам фреймворков и инструментов.
Интеграционные тесты — наверное, самые любимые тесты, которые есть у каждого разработчика (нет). Но писать их всё равно приходится, и если вы раньше не писали интеграционные тесты, вы можете обратиться к этому репозиторию. В нём собраны лучшие практики, от настройки инфраструктуры, базы данных и веб-сервера до анатомии самих тестов и внедрения написания тестов в процесс разработки своей команды. Там же есть ссылка на шоукейс, в котором собраны примеры описываемых практик. Бонусом — ссылка на подборку полезных ресурсов по теме.
Игорь Агапов на Хабре опубликовал перевод статьи о геометрии DOM и соответствующем API. Речь идёт о CSSOM. Это набор интерфейсов, позволяющих манипулировать CSS с помощью JavaScript и, соответственно, CSS-свойствами элементов DOM. В статье рассматриваются случаи применения для скролла, анимаций, бесконечной загрузки и другие. У CSSOM View Module API статус рабочего черновика, и уже довольно давно. Вряд ли это понадобится на проде в ближайшее время, но довольно интересно, а большая часть свойств и методов CSSOM View Module API поддерживаются современными браузерами.
В блоге ДОМ.РФ была опубликована статья, в которой компания поделилась использованием Module Federation из пятого Webpack для шеринга элементов интерфейса из UI-kit. Проблема вам знакома: не хочется разрабатывать разные UI-kit’ы для похожих проектов, а хочется просто их переиспользовать. В статье, понятное дело, сами UI-kit’ы не рассматриваются — только настройка шеринга и резервного варианта на случай нестабильности сервера с теми самыми элементами интерфейса. Больше подробностей и нюансов вы найдёте по ссылке в описании выпуска.
Дальше вас ждёт заметка Келли Кокрейн (Kelly Cochrane), которая недавно узнала, что внутрь grid-контейнера можно вложить несколько сабгридов. Она показывает пример, в котором решала задачу расположения нескольких элементов, которые не должны были переноситься по вертикали при изменении размера контейнера. Крайние ячейки превращались в обрезанное превью текста, а ячейки в конце не изменялись. Обязательно взгляните на пример. Старая задача — новое решение.
Следующая статья о новой экспериментальной метрике Interaction to Next Paint. Идея в том, чтобы отслеживать все задержки между кликами, тапами и нажатиями клавиатуры пользователя до реакции страницы, а самая большая задержка и будет считаться результирующей метрикой. Об этом рассказали Джереми Вагнер (Jeremy Wagner) и Филип Уолтон (Philip Walton) в блоге web.dev. Они рассказали как можно воспроизвести медленное взаимодействие, как может помочь метрика и как диагностировать такие проблемы.
Завершит рубрику библиотека ts-is. Идея в том, чтобы сложные проверки можно было описывать словами. Например, if (is.object.not.empty(variable)) {}. Через точки, вызывая методы по очереди, ну вы поняли. Вряд ли вам дали бы занести её на прод, но выглядит как минимум симпатично.
Новости релизов
Доступна 108-ая версия браузера Firefox. В этом релизе «лисичка» начала поддерживать Container Queries, были добавлены тригонометрические функции и функция round() для параметров округления в CSS. В JS был добавлен метод Array.fromAsync для создания массивов из данных, которые поступают асинхронно, и по умолчанию включена поддержка import map. Кроме того, был добавлен удобный хоткей Esc + Shift для открытия страницы менеджера процессов.
Немного о языках программирования. Состоялся релиз PHP 8.2. В новой версии был добавлен синтаксис классов только для чтения: теперь необязательно помечать каждое поле — можно сделать readonly весь класс целиком. Ещё одна интересная фича — дизъюнктивная нормальная форма для типов. Она позволяет не использовать mixed, а просто указывать типы аргументов методов через амперсанд (&). Кроме того, null, true, false стали отдельными типами. С полным списком изменений можно ознакомиться в официальном блоге, а обзор главных фич доступен в блоге Хекслета в обзоре Александра Макарова
Наш любимый драгоценный камень, он же Ruby, порадовал нас свежей версией за номером 3.2. В этом релизе был помечен стабильным написанный на Rust JIT-компилятор YJIT: его почти год тестировали при разных нагрузках, и он хорошо себя показал. Кроме того, была добавлена поддержка WebAssembly на базе WASI или WebAssemly System Interface. Ещё одно нововведение — улучшение регулярных выражений для противодействия атакам типа ReDoS.
Vite 4 увидел свет. Четвёртая мажорная версия инструмента перешла на бандлер Rollup 3. Появился новый плагин для React, который работает с SWC или Speedy Web Compilier, который работает быстрее Babel. При этом старый плагин с Babel всё ещё можно использовать. Был представлен импорт CSS как строки, который позволяет избежать двойного импорта стилей. Зависимости обновили и поработали над размером бандла: он уменьшился на 23%. Также доступен гайд по миграции на новую версию Vite.
Команда тулчейна Rome анонсировала релиз одиннадцатой версии своего детища. Новых инструментов пока не добавили, но добавили новые правила для линтинга и переработали некоторые группы правил. Была добавлена поддержка оператора satisfies из TypeScript 4.9. Больше подробностей — в официальном блоге Rome.
В Node.js 19.3.0 версию npm обновили до 9.2.0. LTS-версии 16.19.0 и 14.21.2 получили обновление OpenSSL 1.11s и обновление обновление Network Security Services 3.85. Ряд корневых сертификатов был добавлен, какая-то часть — удалена. Возможно, это уже заключительные релизы Node.js в этом году.
Вышла версия Deno 1.29. Всё ещё продолжается работа над улучшением поддержки npm. Теперь можно использовать кастомные регистры npm через переменную окружения и использовать npm-имена с командой deno install. Также была добавлена поддержка TypeScript 4.9. В этом же релизе представили ряд доработок для удобства и некоторые изменения в стандартных библиотеках и API. Полный список изменений — в блоге Deno.
Ещё один релиз райнтайма — релиз Bun 0.3.0. Сейчас главные приоритеты команды — стабильность и совместимость с Node.js и Web API. В этом направлении ребята пока и двигаются. Оптимизировали потребление памяти под нагрузкой, работают над покрытием тестами. В этом релизе также представили ряд фиксов, которые касаются как раз проблем совместимости с разными API.
Также отмечу релизы фреймворка Ember 4.9, git 2.39.0 и ядра Linux 6.1.
Другие новости
Завершился опрос State of CSS 2022. В этом году Flexbox gap стал самой используемой новой фичей, сабгриды вызвали наибольший интерес пользователей, а CSS Modules удержали наибольшее их количество. Как вы думаете, что с Bootstrap? Правильно, о нём знает наибольшее количество опрошенных и использует его. Многие используют Tailwind CSS, следом за ним — Materialize CSS. Среди CSS-in-JS решений Styled Components использует большинство опрошенных, следом за ним — CSS Modules. Разные процессоры CSS никаких сюрпризов не преподнесли: Sass, PostCSS, Less, Stylus и упоминание Assembler CSS. Наверное, это всё, что можно коротко рассказать о результатах опроса. Больше информации вы найдёте по ссылке на подробные результаты в описании выпуска.
npm вслед за самим GitHub получил новые фичи для безопасности. Я говорю о гранулярных токенах, которые позволяют гибко настроить необходимые права для тех или иных токенов разных пользователей. Это потенциально позволит обезопасить пакеты от вредоносных изменений, если злоумышленники как-то получат данные контрибьюторов. Ещё одна фича — интерфейс для просмотра кода прямо в npm. Раньше, для того чтобы посмотреть на код пакета, нужно было скачать и поставить пакет, что само по себе может быть небезопасной операцией. Теперь код можно будет просмотреть прямо в npm и понять, ставить пакет или нет. Также продолжается принудительное включение 2FA для мейнтейнеров пакетов с высоким влиянием. Это пакеты с миллионом и более загрузок в неделю или у которых более 500 пакетов, которые от них зависят.
Завершит выпуск новость от широко известного менеджера паролей LastPass. У них случилась утечка данных пользователей. Коротко напомню: в августе злоумышленники проникли в инфраструктуру LastPass, и вроде бы не пропало ничего критичного, но утекла информация об инфраструктуре. Это, по предположению сотрудников LastPass, позволило похитить данные пользователей сейчас. В блоге компании опубликован пост, в котором рассказали об инциденте и уверяют, что получить доступ к данным будет крайне сложно. Подробностей, которые прокачают вас в инфобезе, там нет, но эта новость есть в выпуске, чтобы вы могли подумать о менеджерах паролей и своих данных или подойти к ответственному безопаснику в вашей компании и рассказать ему об этом — вдруг у вас используется LastPass?
На сегодня у меня всё. Как я уже говорил, в этом году нас ждёт ещё один выпуск. Так что до встречи в следующем выпуске и всех с Наступающим!