From df72ed55ae52baefc22d865d29c5dcfa237d6c87 Mon Sep 17 00:00:00 2001 From: Islam Vindizhev Date: Fri, 7 Jun 2024 18:52:32 +0300 Subject: [PATCH] add news issue 256 --- _posts/news512/news-256.md | 77 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 _posts/news512/news-256.md diff --git a/_posts/news512/news-256.md b/_posts/news512/news-256.md new file mode 100644 index 00000000..558ee0f1 --- /dev/null +++ b/_posts/news512/news-256.md @@ -0,0 +1,77 @@ +--- +title: 'В этом выпуске: релиз SolidStart 1.0 и Astro 4.10, паттерны работы с получением данных в SPA-приложениях, переезд расширения 1Password на esbuild, инструмент для миграции конфига ESLint и другие материалы.' +soundcloudLink: 'https://soundcloud.com/csssr/patterny-spa-solidstart-10-astro-410-optimizatsiya-rasshireniya-1password-dekompozitsiya' +date: '2024-06-07T00:00:00.000Z' +episodeNumber: 256 +tag: 'news' +author: 'Ислам Виндижев' +--- + +Всем привет, это «Новости 512» от CSSSR. Этот выпуск немного необычный, потому что в нём нет «Других новостей», а каких-то достаточно крупных релизов практически не случилось. Тем не менее сегодня мы поговорим о релизе SolidStart и Astro 4.10, обсудим паттерны работы с получением данных в SPA-приложениях, узнаем, как 1Password прокачивал своё браузерное расширение, а также посмотрим на инструмент для миграции конфига ESLint. Конечно, будут и другие интересные материалы. + + + ### Интересные публикации + +Когда SPA должно получить данные сервера, оно должно оставаться отзывчивым и реагировать на действия пользователя даже во время медленного запроса. Как этого добиться при помощи пяти паттернов, [рассказал в своей статье](https://martinfowler.com/articles/data-fetch-spa.html) Джунтао Ки (Juntao Qui). Он рассказывает о пяти полезных паттернах, которые в комплексе решают эту проблему. Асинхронный обработчик состояния оборачивает эти запросы в мета-запросы для состояния запроса. Параллельное получение данных минимизирует время ожидания. Fallback-разметка поможет на время прикрыть интерфейс. Code splitting загружает только тот код, который нужен, а префетчинг загрузит данные до того, как они смогут понадобиться, чтобы уменьшить задержку. Соответственно, он показывает примеры применения всех паттернов и рассказывает о них подробнее. Получился лонгрид, но очень подробный и интересный. + + +Команда 1Password поделилась [кейсом модернизации системы сборки своего браузерного расширения](https://blog.1password.com/new-extension-build-system/). Существующая система устарела и стала медленной, расширение разрослось, и пора было что-то менять. Эти проблемы замедляли разработку и поддержку. В итоге на хакатоне был разработан прототип со сборкой при помощи esbuild. В итоге production-версию мигрировали на esbuild. Как результат, production-бандл уменьшился на 90%, а время «тёплого» билда составило 5 секунд вместо 30. Подробнее о кейсе — в блоге 1Password. + +Про промисы мы говорили достаточно много раз. [Ещё один их разбор](https://www.joshwcomeau.com/javascript/promises/) сделал Джок Комо (Josh Comeau) — в своей манере: доступно, подробно, с примерами. Он начинает с того, для чего вообще нужны промисы и какую проблему решают, как с ними работать, как чейнить, реджектить. В конце он касается конструкции `async/await`. Для корифеев материал, конечно, не подойдёт. Но заглянуть стоит. + +Александр Инкин из «Тинькофф» (уже «Т-Банка») в блоге компании поделился [статьёй о декомпозиции сложных задач](https://habr.com/ru/companies/tbank/articles/817755/). Он считает, что этот навык можно совершенствовать бесконечно, а хорошему сеньору или архитектору без него не обойтись. И я с ним очень согласен. В статье Александр выбрал задачу для примера и демонстрирует декомпозицию сначала на уровне логики, а потом и в коде. Вполне себе стоит познакомиться и сложить в свою копилочку подходов к решению задач. + +Следующий материал — это микрозаметка [об опыте перехода на Biome с Prettier и ESLint](https://kittygiraudel.com/2024/06/01/from-eslint-and-prettier-to-biome/). В итоге среднего размера проект получилось мигрировать за день-два. Автор отмечает ряд преимуществ: одна зависимость с одним файлом конфигурации, очень информативные сообщения об ошибках, скорость и легковесность. Были и проблемы: пока присутствуют некоторые баги, некоторых вещей в конфигурации по сравнению ESLint просто нет и не нравится JSON как конфиг. Но в итоге плюсы перевесили минусы и общий опыт очень понравился. + +Продолжая тему миграций. Оказалось, что многие пользователи не перешли на новую, девятую версию ESLint, потому что процесс переноса конфига казался трудоёмким и сложным. Николас Закас (Nicholas C. Zakas) в блоге ESLint представил [ESLint Configuration Migrator](https://eslint.org/blog/2024/05/eslint-configuration-migrator/). Как вы догадались, это тулза, которая помогает быстро мигрировать конфиг в новый формат. В статье, соответственно, рассказывается, как инструмент работает, как миграцию провести и какие у него есть ограничения. Так что если вы откладывали обновление ESLint, то вот вам прекрасный повод к этому вернуться. + +Разработчик Андрико Карулла (Andrico Karoulla) собрал в репозитории на GitHub [список дилемм, с которыми можно столкнуться при разработке библиотеки компонентов](https://github.com/andrico1234/the-dilemmas-youll-face). Он задаётся большим количеством вопросов: использовать ли библиотеки для написания компонентов, как поставлять пакеты, как писать документацию, как тестировать свою библиотеку и другими. Если у вас есть похожие задачи, очень рекомендую посмотреть — возможно, вы найдёте там готовый ответ на свой вопрос. + +По какой причине можно отказаться от одного облачного провайдера в пользу другого? Да по разным, а в данном случае — из-за цен. Харрисон Броадбент (Harrison Broadbent) рассказал о том, [как отказался от Netlify в пользу Cloudflare](https://harrisonbroadbent.com/blog/goodbye-netlify-hello-cloudflare/). Если коротко, он превысил лимит трафика и получил жирненький счёт. После этого он проверил тарифы и перешёл на другой сервис. Мораль: хорошо изучайте тарифы своих сервисов и инструментов, чтобы случайно не попасть в неприятную ситуацию. + +Как измерить производительность какого-то Node.js-приложения? В ноде существует специальный модуль `performance hooks` для точного измерения с высокой надёжностью без использования таймстемпов и других ухищрений. Павел Романов [в своей статье](https://pavel-romanov.com/nodejs-performance-hooks-mastering-the-mental-model) разбирается в том, как работает модуль и как правильно при помощи него производить измерения для получения достоверных результатов. + +Продолжая тему ноды. Довольно часто после его выхода я упоминал Node.js Test Runner. Напомню: это встроенный тест-раннер Node.js, который относительно недавно стал стабильным. Это [базовый гайд по работе с ним](https://betterstack.com/community/guides/testing/nodejs-test-runner/), если вы его ещё совсем не пробовали — загляните. Внутри вы найдёте базовую настройку раннера, постепенное усложнение фич, которые рассматриваются, создание моков, прогон тестов, демонстрацию подсчёта покрытия и другие фичи. Хороший стартовый гайд. + +Дальше немного практики и справочных материалов. В следующем материале автор предлагает [реализовать touch-жесты на чистом JS](https://habr.com/ru/articles/816857/). Это вторая часть, в ней реализуются drag и resize. Конечно, на проде вы вряд ли будете писать это руками, но как способ посмотреть, как работают такие штуки внутри библиотек, — очень даже. + +Если в прошлом выпуске я предлагал написать React за 400 строк кода, то в этом эпизоде Марсело Лазарони (Marcelo Lazaroni) предлагает реализовать [Virtual DOM за 200 строк кода](https://lazamar.github.io/virtual-dom/). Мотивация та же — разобраться, как это работает. + +Как опубликовать свой пакет в NPM с использованием бандлера Vite? На этот вопрос отвечает [в своей статье](https://habr.com/ru/companies/croc/articles/816803/) разработчик Дмитрий из Крока. Туториал начинается с азов, буквально с регистрации на NPM, затем Дмитрий рассказывает о настройке Vite, детально разбирает конфиг, готовит `package.json` и рассказывает о самом процессе публикации. + +Лиззи Пэриш (Lizzie Paris) в своей заметке предлагает читателям [окунуться в мир разработки Chrome-расширений](https://spin.atomicobject.com/write-your-first-chrome-extension/). Гайд супер-базовый и для тех, кто вообще никогда этого не делал. Там есть ссылка на официальный гайд от Google и базовый пример простенького расширения. + +Косьма Милке (Cosima Mielke) в SmashingMagazine поделилась [подборкой лучших практик по именованию](https://www.smashingmagazine.com/2024/05/naming-best-practices/) дизайн-токенов, компонентов и переменных. Если вам иногда приходится поломать голову — добро пожаловать по ссылочке. + +И в конце рубрики справочный материал от Джофа Грэхема (Geoff Graham) о [единицах измерения в CSS](https://css-tricks.com/css-length-units/). Он покрывает и относительные, и абсолютные единицы, кастомные виды единиц измерения и ряд других. В конце есть и примеры. + + + ### Новости релизов + +Вышел [SolidStart 1.0](https://start.solidjs.com/). Вы можете догадываться, что он имеет отношение к библиотеке SolidJS, всё именно так. SolidStart — это уже полноценный, комплексный JS-фреймворк для разработки приложений на SolidJS. В нём есть все необходимые для разработки современного приложения инструменты: от бандлера до роутера, сериалайзера и Nitro для деплоя на кучу платформ. Если вы попробовали SolidJS и он вам нравился, то на SolidStart определённо нужно обратить внимание. + + +В [Astro 4.10](https://astro.build/blog/astro-4100/) добавили хэлперы для Container API в Vite-окружениях, экспериментальный модуль `astro:env` для переменных окружения, а также возможность использования Astro-компонентов за пределами контекста самого Astro. Кстати, я не обращал внимания, но, кажется, недавно у Astro запустился раздел с темами, так что проекты можно стартовать, выбрав какую-нибудь из каталога в разделе Resources. + +Biome, о котором я уже сегодня немного говорил, обзавёлся [новой версией 1.8](https://github.com/biomejs/biome/releases/tag/cli%2Fv1.8.0). Была добавлена новая команда `biome clean`, которая очищает папку с логами. Для линтера добавили новые флаги `--only` и `--skip`; соответственно, первый флаг позволяет прогнать определённую группу правил, а второй — пропустить. Помимо этого, были добавлены улучшения для миграции с ESLint и багфиксы. + +В [Prettier 3.3.0](https://prettier.io/blog/2024/06/01/3.3.0.html) добавили поддержку кучи новых фич Flow, таких как компоненты и объявление хуков. Был также добавлен ряд небольших улучшений и фиксов багов для других языков. + +Также я отмечу минорный релиз [ESLint 9.4.0](https://eslint.org/blog/2024/05/eslint-v9.4.0-released/). + +esbuild отметился [релизом 0.21](https://github.com/evanw/esbuild/releases/tag/v0.21.0). В нём реализовали пропозал с JS-декораторами. Здесь отдельно нужно добавить, что они несовместимы с экспериментальными TS-декораторами. Также были добавлены оптимизации и фиксы багов. + +Пока я не смотрел в ту сторону, у Docusaurus случилось аж два релиза: [3.3](https://docusaurus.io/blog/releases/3.3) и [3.4](https://docusaurus.io/blog/releases/3.4). Напомню: это инструмент для создания простых, удобных и быстрых сайтов с документацией, построенный на React. В версии 3.3 ребята готовились к релизу React 19, а в 3.4 добавили фичу с тегами и ещё несколько экспериментальных фич. Если у вас есть свой пакет и ему нужна дока, попробуйте Docusaurus — возможно, он вам понравится. + +Также в этом выпуске я отмечу релизы [pnpm 9.2.0](https://github.com/pnpm/pnpm/releases/tag/v9.2.0) и фреймворка [Ember 5.9.0](https://github.com/emberjs/ember.js/releases/tag/v5.9.0). + + ### Пишите нам и читайте + [Telegram—канал CSSSR](https://t.me/csssr) + + [Twitter CSSSR](https://twitter.com/csssr_dev) + + [Twitter новостей](https://twitter.com/csssr_news) + + [Telegram ведущего](https://t.me/Vindizh) + + [Twitter ведущего](https://twitter.com/Vindizh)