Джек Франклин — участвует в разработке Chrome DevTools — реализовал на React и Svelte небольшое приложение для трекинга времени с сохранением данных в Firebase и рассказал о своём опыте в статье "Comparing Svelte and React".

В статье сравнивается простота интеграции с аутентификацией Firebase, работа с веб-воркерами, условный рендеринг, реактивность, композиция компонентов, стилизация. По результатам сравнения победил Svelte, так как в нём проще работать с сайд-эффектами. Кодовая база Svelte в целом также оказалась проще. Из коробки идут средства для работы со стилями. Как бы то ни было Джек пишет, что ему нравится работать и с React, и со Svelte.

Немного субъективная статья, но всё равно интересная. Рекомендую заглянуть.

#jsframeworks #react #svelte

https://www.jackfranklin.co.uk/blog/comparing-svelte-and-react-javascript/

Несколько дней назад вышла новая версия Next.js. Команда разработчиков фреймворка рассказала о новинках релиза — "Next.js 11".

— В новую версию попали наработки Google, которые включают в себя разные оптимизации и правила eslint, предотвращающие использование паттернов, приводящих к деградации производительности.

— Добавлена новая реализация загрузчика Babel, ускоряющая время пересборки приложения.

— Добавлен новый компонент Script, упрощающий управление приоритетами загрузки скриптов.

— Компонент Image теперь может генерировать width и height автоматически для улучшения метрики CLS. Была добавлена возможность автоматического создания плейсхолдеров изображений.

— Добавлена экспериментальная автоматическая миграция кодовой базы Create React App на Next.js.

— Добавлен Next.js Live (Preview Release), предоставляющий удобные средства коллобарации.

— Завершена миграция на Webpack 5.

#release #jsframeworks

https://nextjs.org/blog/next-11

Релиз Next.js 12

Три дня назад была представлена новая мажорная версия Next.js — "Next.js 12".

Next.js 12 по умолчанию использует swc для транспиляции JavaScript- и TypeScript-файлов. Swc — это очень быстрый аналог Babel, написанный на Rust. Благодаря ему время production-сборки стало в пять раз меньше. В три раза уменьшилось время обновления страницы при локальной разработке.

Была добавлена поддержка миддлвар для гибкой модификации HTTP-ответа. В зависимости от входящего запроса можно изменить ответ, добавить новые HTTP-заголовки, сделать редирект и т.п. Миддлвары могут работать на edge-серверах Vercel, улучшая отзывчивость приложения.

Была проведена работа для подготовки к переходу на React 18. В экспериментальном режиме доступны серверные компоненты и новый поточный серверный рендерер с поддержкой Suspense.

Теперь по умолчанию в Next.js используется ESM с поддержкой импорта CommonJS-модулей. Добавлена экспериментальная поддержка импорта модулей по URL.

В компоненте <Image> появилась поддержка формата изображений AVIF. Также компонент автоматически определяет основное изображение страницы, которому нужно передать пропс priority для улучшения метрики LCP.

В рамках нового релиза была опубликована библиотека @vercel/nft (Node File Tracer). Она используются для генерации облегчённых standalone-сборок Next.js-приложений для serverless-окружений и контейнеризации.

В Next.js 12 поисковым ботам будут отдаваться полностью отрендеренные страницы, использующие Incremental Static Regeneration. Обычные пользователи будут видеть интерфейс загрузки страницы.

В ломающих изменениях отказ от Webpack 4, деприкейт опции target, использование <span> вместо <div> в next/image, увеличение минимальной поддерживаемой версии Node.js с 12.0.0 до 12.22.0

#release #jsframeworks #react

https://nextjs.org/blog/next-12

Релиз Angular 13

Сегодня вышла новая мажорная версия Angular. Марк Тексон рассказал о всех нововведениях релиза — "Angular v13 is now Available".

— С этой версии больше недоступен View Engine — движок рендеринга, предшествующий Ivy. Благодаря его удалению открываются возможности сокращения времени компиляции, которые будут реализованы в будущем

— Изменён формат внешних модулей Angular Package Format (APF): добавлена поддержка ES2020, удалена необходимость использования ngcc

— Включена поддержка сохранения кеша сборки для ускорения скорости бандлинга. Прирост составляет 68%. Также в Angular CLI v12.2 была добавлена поддержка esbuild, который ускорил время сборки production-бандлов на 10%

— Упрощено API для динамического создания компонентов

— По умолчанию включена инвалидация окружения при прогоне каждого теста

— Улучшена доступность компонентов Angular Material

— RxJS обновлён до версии 7.4, TypeScript обновлён до версии 4.4

— Прекращена поддержка IE11. Пользователи Internet Explorer могут продолжать использовать Angular 12. Он будет поддерживаться до ноября 2022 года

#angular #release #jsframeworks

https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

Открытие исходного кода фреймворка Remix

Райан Флоуренс и Майкл Джексон — авторы React Router и Reach UI — полгода назад представили новый проект Remix — фреймворк для разработки приложений с серверным рендерингом на базе React. Всё это время он распространялся платно. После привлечения трёх миллионов долларов в качестве инвестиций они открыли исходный код проекта под лицензией MIT.

По сути Remix — это конкурент Next.js. Райан и Майкл в презентации дипломатично ушли от сравнения с Next.js. Говорят, что друзья с создателем Next.js и хотят жить в мире, но по лендингу проекта видно, что Remix претендует на свой кусок пирога. Более того они поделились планами по монентизации проекта. Они планируют создавать платные сервисы вокруг фреймворка, как это сделал Vercel с Next.js.

Основные отличия от Next.js. В Remix серверный код можно размещать внутри React-компонентов. Кастомный транспилятор удаляет этот код при создании бандла для клиента, и оставляет в серверной сборке. То есть это что-то похожее на серверные компоненты из React 18. Ещё очень большой упор в презентации был сделан на эргономику работы с формами — выглядит всё, действительно, очень удобно и привычно. На сайте проекта также говорится про улучшение флоу загрузки приложения, но над этой фичей работает core-команда React, а не Remix, и она появится в Next.js (или уже появилась?).

В общем, меня лично проект не сильно впечатлил. Однако за проектом стоят известные разработчики в React-сообществе и есть инвестиции, поэтому проект будет развиваться. В конце концов здоровая конкуренция это всегда хорошо.

#announcement #react #jsframeworks

https://remix.run/ (сайт проекта)
https://www.youtube.com/watch?v=wsJaUjd1rUo (презентация Remix)

Тюнинг производительности Next.js-приложений

Бен Шварц поделился рекомендациями по улучшению производительности Next.js-приложений — "Next.js Performance: Making a Fast Framework Even Faster".

Для загрузки сторонних скриптов рекомендуется использовать компонент next/script со стратегией lazyOnload, чтобы код начинал грузиться тогда, когда завершается загрузка основного кода приложения. Для вставки изображений рекомендуется использовать компонент next/image. Он берёт на себя конвертацию изображений, генерацию плейсхолдеров и поддержку ленивой загрузки. Для уменьшения размера основного бандла приложения можно использовать динамическую загрузку кода с помощью import(). Для динамической загрузки React-компонентов — хелпер next/dynamic.

Полезная статья. Рекомендую почитать, если работаете с Next.js.

#jsframeworks #performance #react

https://calibreapp.com/blog/nextjs-performance