Привет всем!
Рассылка переходит на летний режим: 1 выпуск из 2. Надеюсь, вы наслаждаетесь своими отпусками 😎.
Совсем скоро мы запустим Docusaurus 2.0 (опубликован 2.0-rc.1). По этому случаю я пришлю вам специальное издание. Это будет повод представить вам лучше этот проект, над которым я работаю 2+ года вместе с Facebook. Docusaurus 2.0 — не самый известный фреймворк React, но он остается очень используемым, несмотря на то, что находится в бета-версии: в два раза больше, чем Remix или Redwood, и постепенно догоняет Gatsby. Надеюсь, я могу рассчитывать на вас при запуске ProductHunt 😄.
На этой неделе я хочу осветить tRPC для осуществления удаленных вызовов (клиент/сервер или даже сервер/сервер). Типичное сквозное решение, проворное и гораздо более простое в использовании, чем GraphQL. Никаких особых событий, связанных с либой, не произошло, кроме значительного роста популярности благодаря Тео и его фреймворку create-t3-app.
До скорой встречи на презентации Docusaurus 👋.
🙏 Поддержите рассылку:
- 😘 Рекомендуйте ее своим друзьям: это действительно помогает!
- 💸 Спонсор This Week In React
- 😍 Пишите отзывы в Twitter
- 🧵 Ретвитните последнюю тему в Twitter
- 📨 Ответить на это письмо: отзывы приветствуются
- 👥 Следить на LinkedIn
Если вам нравится эта рассылка, подпишитесь на нее там:
- 🇬🇧 ThisWeekInReact.com
- 🇫🇷 ReactHebdo.fr
React
Чтение исходного кода: React
Алекс читает исходный код React и комментирует несколько частей, взяв за отправную точку монтаж React-приложения. Интересные детали об использовании прототипов, JSX и взаимодействии (агностического) согласователя с DOM-рендерером.
Можем ли мы все просто признать, что хуки React были плохой идеей?
Эми утверждает, что хуки React не соблюдают принципы архитектуры SOLID. Я не совсем согласен, но признаю, что большинство примеров, найденных в интернете, являются упрощенными и не обязательно демонстрируют хорошую архитектуру.
Применение принципов SOLID в React
Почти прямой ответ на статью выше, даже если применение SOLID здесь освещено более широко (компоненты + хуки). Примечание: не стесняйтесь использовать контекст React для инъекции зависимостей.
Дополнительно:
- 📜 Избегайте анонимных компонентов с displayName: иногда React не может придумать хорошее имя для ваших компонентов, что усложняет использование devtools (Context, memo, forwardRef, HOC).
- 📜 Почему Remix — это не React-фреймворк, а веб-фреймворк полного стека: хорошо написанный обзор различий между Remix и другими фреймворками. Remix является полностековым и не зависит от фреймворка.
- 📜 Функциональное программирование наконец-то становится мейнстримом: GitHub подчеркивает популяризацию функционального программирования, отчасти благодаря React, Redux и хукам. Лично я перешел со Scala на React после прочтения знаменитого поста Дэвида Нолена. До 2014 года я даже не любил JS 😅.
- 📜 Почему Docusaurus — мощный фреймворк документации: 1Password объясняет, почему Docusaurus является хорошим решением для их портала документации для разработчиков. Затрагиваются различные продвинутые темы, включая настройки сайта, замечательные плагины для расширения MDX/Markdown…
- 📜 Хранение данных в cookie с помощью сессий и Remix: создание cookie для счетчика посещений
- 📖 Remix Deferred: новый API в стадии разработки, который дает тонкий контроль над компромиссами загрузки данных при начальной загрузке страницы. Оптимизация по времени до первого байта или кумулятивному сдвигу макета.
- 📖 Улучшения в документе о доступности Next.js
- 🐦 Новая модель состояния Preact VDOM
- 🐦 Remix + React 18 startTransition + гидратация с временной нарезкой: Райан Флоренс делится спорным советом. Начинает интересные дискуссии о гидратации (Райан Карниато, Эндрю Кларк…)
- 📦 pmndrs/react-three-rapier: интегрирует react-three-fiber с Rapier (физический движок)
- 📦 Remotion 3.1: много новых возможностей! Gifs, Tailwind CSS, источники с продолжительностью, OffthreadVideo…
- 📦 Remix 1.6.5: загрузчик + useLoaderData TypeScript inference👌
- 📦 Framer Motion 6.5: анимация прокрутки
- 📦 Zustand 4.0.0-rc.2: готов к производству
- 📦 Redwood 2.1
💸 Спонсоры
💡 Как стать спонсором этого информационного бюллетеня
Storetasker: Сеть внештатных разработчиков Shopify
Привет! Это Тим из Storetasker. Мы управляем лучшей фриланс-сетью разработчиков Shopify. Я бы хотел, чтобы вы подали заявку, если вам нравится создавать сайты Shopify или вы заинтересованы в использовании передового React-фреймворка Shopify для создания пользовательских витрин: Hydrogen.
Принятые разработчики в сети работают на внештатной основе, и мы предоставляем им отличные возможности для работы над некоторыми из лучших брендов Shopify (Alo Yoga, Chubbies, JUDY и многие другие).
Самое замечательное в Storetasker то, что разработчики не конкурируют друг с другом — они просто берут работу, которая соответствует их интересам. Кроме того, это очень сплоченное сообщество.
Не стесняйтесь подавать заявки прямо по этой ссылке, чтобы присоединиться.
Еженедельный информационный бюллетень CSS
Будьте в курсе последних тенденций в CSS, получая только актуальные и ценные статьи и учебники прямо в свой почтовый ящик. Присоединяйтесь к более чем 30 000 разработчиков и подпишитесь прямо сейчас.
React-Native
Hermes по умолчанию
Движок JS Hermes является альтернативой JSC/V8. Он может помочь вашему приложению запуститься быстрее благодаря предварительной компиляции в байткод. В React-Native 0.70 (сейчас в релиз-кандидате) Hermes включен по умолчанию. Майкл делится различными контрольными показателями приложения с открытым исходным кодом Mattermost. Режим распространения Hermes был изменен, чтобы избежать проблем несовместимости ABI. На iOS добавлены недостающие Intl API. Предстоящая поддержка BigInt и WeakRef.
Чему работа в Airbnb в эпоху React Native научила меня о web3
Девин рассказывает об истории React-Native в Airbnb и очень тонком решении о его закате. Он проводит интересную параллель с web3. В долгосрочной перспективе потенциал технологии побеждает боль ранних последователей.
Дополнительно:
- 📜 Ionic — Announcing Portals for React Native: позволяет интегрировать опыт WebView Ionic в приложение React-Native. Платный продукт.
- 🎙️ React-Native-Radio #242 — Inspecting React Native 0.69
- 🎙️ The React Native Show #14 — React Native Paper v.5
- 📦 Vision Camera 2.14: теперь можно объединять процессоры кадров в цепочку
- 📦 expo vscode 0.8: автозаполнение конфигурации JSON 👍
- 📦 expo-music-picker
- 📦 react-native-iconic
- 🧑🎨 React-Native-Skia + Expo web demo
- 🧑🎨 демонстрация переходов страниц Instagram iOS
Другие
Vite 3
Vite быстро стал эталоном в экосистеме фронтенда. Сегодня это очень хорошая альтернатива Create-React-App, с гораздо более быстрым DX, и некоторые мета-фреймворки React также используют его (Storybook, Hydrogen…). v3 поставляется с большим количеством изменений, новой документацией, стартерами для различных фреймворков (включая React), улучшениями глобального импорта, новой документацией… Смотрите также конференцию ViteConf в октябре.
Дополнительно:
- Цена согласованности в UI-фреймворках
- Node.js 18.6 — Пользовательские загрузчики ESM: Кто, что, когда, где, почему, как
- Новый паттерн для Jamstack: Сегментированный рендеринг
- Событийно-ориентированная разработка JavaScript
- Chrome Dev Insider: Выпуск о CSS и пользовательском интерфейсе
- Safari Technology Preview 149
- NestJS v9
- Parcel CSS 1.12
