Всем привет, это «Новости 512» от CSSSR. В этом выпуске мы поговорим о релизах Chrome 118, Java SE 21 и Python 3.12. Мы поговорим о применении Redis и Memcached, разработке коллаборативных инструментов, новом выпуске TechRadar, веб-версии Photoshop, паттернах React и React Concurrent и других интересных материалах. Также сегодня пачка мини-релизов.
Перед началом выпуска я хочу поблагодарить всех, кто поучаствовал в опросе. Несколько интересных фактов: подкаст слушают не только фронтендеры, но и бэкендеры с менеджерами. Кто-то указал на переходы между рубриками, которые я сам уже давно хотел поменять, — я надеюсь, что получится сделать это достаточно скоро.
Больше всего опрошенным хочется больше интересных публикаций и более подробного описания. К сожалению, хорошего контента выходит не так много, как хотелось бы, а про некоторые материалы можно записывать отдельные часовые выпуски. Было интересное предложение про разборы — эта мысль не пропадёт. Я буду стараться раскрывать содержание лучше, но вряд ли за счет увеличения объёма. По крайней мере, пока.
Отдельное спасибо хочу сказать за благодарности, высокую оценку подкаста в целом и моей работы. Ваша поддержка важна, это очень ценно для меня. Я буду стараться улучшать подборки и подкаст дальше.
Интересные публикации
Первая статья в этом выпуске о кэширующих решениях на базе Reids и Memcached. С одной стороны Redis. Он более навороченный, более сложный в настройке, но при этом поддерживает сложные структуры данных, умеет кэшировать не только in-memory и умеет другие полезные вещи вроде репликации. С другой стороны Memcached, который более легковесный, проще настраивается, но может делать только in-memory кэш. Из статьи вы узнаете об особенностях Redis и Memcached и в каких случаях их стоит применять. Это ещё не всё. Решения можно комбинировать для применения в разных случаях на одном проекте. В статье также есть примеры кэширования в веб-приложениях, ускорения работы с базами данных и применение в области распределённых вычислений. Затрагиваются вопросы безопасности и мониторинга, производительности и поддержания целостности данных. Хорошая отправная точка для тех, кто хочет разобраться с Redis и Memcached и начать применять на своих проектах.
Вышла вторая часть мини-цикла Дмитрия Глазкова о React Fiber и Concurrency. Вторая часть, как и обещалось, посвящена неблокирующему рендерингу. Для понимания вопроса Дмитрий немного углубляется в историю развития этой фичи React. React Concurrent позволяет пометить обновления как прерываемые и несрочные и не замораживать взаимодействие пользователя с браузером. В статье разбираются подробности работы, есть примеры кода. Перед прочтением стоит посмотреть на первую часть, потому что в ней есть важные для понимания моменты, а ссылку вы найдёте как раз в начале второй части.
Немного продолжая тему React. Следующий материал про продвинутые паттерны разделения логики и представления в компонентах React и не только. Рикардо Тартаглиа (Riccardo Tartaglia) делится своими мыслями о том, как лучше организовывать код для реиспользования, уменьшить связность и грамотно использовать композицию. Также он касается того, как избежать проблем при использовании компонентов-оберток и композиции кастомных хуков.
Наверняка многие из вас пользовались Google Docs, Figma и другими инструментами, в которых можно работать в коллаборации. Они работают по принципу peer-to-peer, а возможно, это благодаря CRDT — бесконфликтным реплицирующимся типам данных. Как раз об этом следующая статья в двух частях. В первой раскрываются основные понятия и примеры, а во второй реализуются простой коллаборативный инструмент. Это простая рисовалка, которая демонстрирует принцип работы. Вы создадите такие типы, научитесь их обновлять, а также синхронизировать. Если вы всегда мечтали сделать коллаборативный инструмент, вам определённо стоит посмотреть.
Поговорим немного о Vue. В блоге SimbirSoft была опубликована статья, в которой собраны разные практики работы с props. Здесь и о том, как их базово передавать, и о том, как валидировать, делать пропсы обязательными и задавать значения по умолчанию. Затрагиваются и более продвинутые темы, например работа с хуками, потоки данных в приложении и глубокая передача пропсов. Удобно, что темы разделены по сложности, статья будет полезна и начинающим, и продолжающим ребятам.
Довольно давно не было материалов о JWT или Json Web Token. Время пришло. В статье есть теория, но больше практики. Внутри вы найдёте пример базового использования JWT, описание разных типов токенов и для чего они нужны, что там по безопасности и как всё это в итоге объединить. Примеры на Python, но в целом всё должно быть понятно.
Давайте посмотрим на пару сравнений. Я уже рассказывал про одно сравнение Remix и Next.js. Это ещё одно, но на этот раз более глубокое. Пратек Сурана (Prateek Surana) закопался в детали и разобрался, чем похожи и не похожи фреймворки. Пратек сравнил их в части работы с разметкой, получения и изменения данных, бесконечной загрузки, стриминга и других фич. Он рассматривает различия на примере простеньких клонов твиттера. Код приложений доступен в монорепозитории, так что можно составить и своё мнение об этом сравнении. Получилось подробно, с примерами и скринкастами.
Следующее сравнение касается состояния современных минификаторов. Хироки Осаме (Hiroki Osame) и контрибьюторы на GitHub опубликовали свежее сравнение двенадцати библиотек, которые могут минифицировать JS. Среди них были и esbuild, и swc, и Bun, и ряд других. В итоге в большинстве случаев именно в плане минифицированного размера лучше всех себя показывает uglify.js, а swc лучше минифицирует большие файлы. В репозитории описываются мотивация, методология и результаты для разных случаев.
К декораторам больше привыкли скорее бэкенд-разработчики, но чем они могут помочь фронтендерам? Далее попытка упрощения разработки формы при помощи декораторов. Автор использует MobX, а при помощи декораторов добавляет формам валидацию, отслеживание изменений и функциональность изменения данных, например перед отправкой на сервер. В итоге это всё оформилось в пакет MobX Form Schema. Декораторы, конечно, не серебряная пуля, но присмотреться определённо стоит.
Теперь немного о переходах на новые технологии. Уже довольно много людей переехало с Webpack на Vite или на какой-то другой инструмент, лишь бы не на Webpack. Волна переходов продолжается. Это как раз кейс, в котором из-за легковесности, простоты настройки и горячей замены модулей было принято решение о переходе. Татьяна, авторка статьи, столкнулась и со сложностями, и с нюансами. Например, с подключением Font Awesome и настройкой прокси. Всё — по ссылке в описании.
Другой кейс от Саши Беспоясова. Он довольно небольшой. Он мигрировал свой личный сайт и блог на SvelteKit, потому что хотел, чтобы всё было сильно проще. Он отказался от Next.js и TypeScript, чтобы уменьшить издержки на поддержку. В итоге за счёт того же Vite в SvelteKit проект быстрее стартовал и собирался. Для тестов Саша выбрал Playwright и скриншотное тестирование. Заодно были переосмыслены теги, обновлены страницы — заходите заценить.
Кстати о тестировании. Себастьян Лорбер (Sébastien Lorber) из команды Docusaurus написал статью о тестировании визуальных регрессий с помощью Argos. Идея простая: Playwright делает скрины всех страниц двух веток для сравнения, скрины отдаются Argos, а он показывает различия. Всё это происходит в CI, и в итоге в PR вы увидите, есть ли различия и визуальный отчёт по ним. Интересно, стоит посмотреть.
Теперь немного старенькое, но полезное. Как часто вы пользуетесь регулярными выражениями? Вы умеете их писать или боитесь их? Не бойтесь — лучше прочитайте следующую статью. Это подробный, иллюстрированный гайд по регулярным выражениям. В статье также много полезных ссылок.
Закроет рубрику материал о Docker и десяти годах, которые он с нами. В статье немного об истории появления Docker, принятии его сообществом, сути технологии и его использовании.
Новости релизов
Вышел Chrome 118. Как и ожидалось, в браузере появилась фича @scope, которая позволяет задать область действия селекторов. Между специфичностью и порядком отображения появляется шаг определения скоупа, к которому применяются определённые стили. Появились две новые медиа-фичи scripting и prefers-reduced-transparency. Первая позволяет определить, включены ли скрипты у пользователя, и применить определённые стили в разной ситуации, а вторая, соответственно, определяет, включено ли в системе уменьшение прозрачности. Во вкладке Source раздел Filesystem превратился в воркспейсы — это должно облегчить работу с исходниками в DevTools и синхронизировать их. Также во вкладке Styles появился раздел для кастомных CSS-свойств. Больше подробностей в официальных обзорах Chrome и DevTools от Google.
Доступна Java 21. В этой версии наконец стабилизировали виртуальные потоки. Они должны значительно упростить разработку конкурентных программ. Также были стабилизированы паттерны записей. Switch теперь поддерживает паттерн матчинг, паттерны могут снабжаться условием при помощи нового ключевого слова when, но у нового паттерн матчинга есть и свои ограничения. Отдельно отмечу появление строковых шаблонов в статусе Preview — эта фича уже давно есть во многих языках, например в том же JS. Были другие фичи в статусе Preview и не только, больше подробностей о релизе — по ссылкам. Я приложу ссылки на подробности на русском и английском языках.
Спустя год разработки мы увидели релиз Python 3.12. Была продолжена работа по оптимизации производительности и улучшении эффективности работы языка в многоядерных системах. Появился более компактный синтаксис описания типов для обобщённых классов и функций. Информативность сообщений об ошибках также значительно повысили. Больше подробностей в release notes, я также приложу ссылку на обзор на Хабре.
Релизов на этой неделе насыпалось много, поэтому дальше я постараюсь покороче, но на все релизы, как всегда, будут ссылочки.
В Node.js 20.8.0 подвезли улучшение производительности потоков чтения и записи, улучшили их создание и удаление, а также уменьшили потребление памяти.
Bun 1.0.5 стал новым багфикс-релизом. Самым заметным фиксом, думаю, стало устранение утечки памяти в методе fetch().
Фреймворк от команды Deno Fresh 1.5 теперь поддерживает фрагменты и может заменять на клиенте HTML на отрендеренные на сервере фрагменты без перезагрузки страницы. Также добавили фичу для анализа бандла и создания целевых билдов esbuild.
В Astro 3.2 продолжили работу над улучшением поддержки View Transition API.
Также отмечу релизы Solid 1.8.0 и Preact 10.18.0. Сейчас команды фреймворков, помимо поддержки, сосредоточены на реактивности, реализации или улучшении своих версий сигналов или signals.
Инструменты тоже отличились релизами. Бандлер Parcel в версии 2.10 получил значительный буст производительности, улучшение режима --lazy и кучу багфиксов.
В esbuild 0.19.4 пофиксили вывод декораторов в некоторых сложных случаях.
Вышла бета TypeScript 5.3. Была улучшена поддержка атрибутов импорта, сужение типов в ряде ситуаций работает лучше, а ряд подсказок в VS Code теперь может перемещать пользователя прямо к типу.
Это не совсем релиз, но касается релиза девятой мажорной версии ESLint. В блоге линтера появилась статья с описанием того, что нужно знать авторам правил перед релизом, потому что будут некоторые ломающие изменения и нюансы. Если вы пишете правила, вам определенно нужно заглянуть.
Также в этом выпуске отмечу обновление WSL 2.0 2023, релизы Electron 27.0.0, Ember 5.3, pnpm 8.8.0 и Rust 1.73.0.
Другие новости
Вышел новый выпуск TechRadar. Это подборка технологий, техник и фреймворков из разных сфер, которые актуальны на сегодняшний день или набирают обороты. Эта подборка выходит два раза в год, её готовит компания Thoughtworks. Перечислять технологии прямо в выпуске нет смысла, потому что на радаре в этом выпуске их более 100. Тем не менее очень рекомендую посмотреть, для того чтобы понять, что на слуху сегодня и может быть популярно завтра. К каждой позиции приложено краткое описание и ссылки на детали.
Photoshop наконец прорвался в веб. Веб-версия входит в подписки Adobe, и ей по идее уже можно пользоваться. Пока не совсем понятно, потолкается ли Photoshop локтями с Figma, но если вы постоянный пользователь продуктов Adobe, то вам определенно стоит взглянуть. К веб-версии прикрутили генеративный AI-инструмент, который поможет работать с изображениями, дополнять их и делать другие крутые штуки. Над проектом Adobe работала совместно с Google.
2-го ноября пройдёт JetBrains JavaScript Day 2023. Это бесплатный онлайн-митап, на котором будут обсуждаться языковые модели в фреймворках, принятие стандартов ECMAScript, TypeScript и другие темы, связанные с JavaScript. Всё пройдёт одним днём — достаточно зарегистрироваться на странице митапа.
Мошенники наносят новый удар. В сети появились сообщения, что под видом клиента Thunderbird распространяется вредоносное ПО, которое крадёт чувствительные данные пользователей. Затем мошенники начинают шантажировать человека и требовать денег за неразглашение непубличных рабочих данных и другой похожей информации. Берегите свои данные и устанавливайте ПО только из надёжных источников.