Сегодня разработчики React представили новую фичу библиотеки — серверные компоненты.

Серверный компонент — это неинтерактивный React-компонент с расширением .server.js. Он полностью работает на стороне сервера, что позволяет внутри кода компонента сделать запрос к базе данных или прочитать файл с файловой системы сервера. Благодаря комбинированию клиентских (обычных) и серверных компонентов можно улучшить производительности приложения и улучшить UX. Ещё одна важная особенность серверных компонентов — их код не попадает в клиентский бандл приложения. Они не предназначены для замены обычных компонентов — решение об их использовании остаётся на усмотрение разработчиков приложений.

Серверные компоненты — это экспериментальная фича, которая находится в стадии активной разработки, но её уже можно пощупать и поделиться своим фидбэком в RFC.

#jsframeworks #react #experimental

https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

Давид Хейнемейер Ханссон — автор веб-фреймворка Ruby on Rails — вчера представил Hotwire — альтернативный подход для создания SPA-подобных приложений, который использовался для создания почтового клиента hey.com.

Hotwire предоставляет набор из трёх библиотек: Turbo, Stimulus и Strada — для создания современных web-приложений без упора на JavaScript. Stimulus — это JavaScript-фреймворк, который был предоставлен пару лет назад. Его особенность заключается в HTML-центричном подходе для описания состояния и поведения приложения в браузере. Strada — это библиотека, облегчающие создание гибридных мобильных приложений. На данный момент она находится в стадии активной разработки, и более подробной информаци о ней нет. Turbo — это новая библиотека, помогающая в создании интерактивных страниц. Turbo интегрирует между собой бэкенд, который для обновляемых частей приложения вместо JSON отправляет отрендеренный HTML, и клиент, который подписывается на обновления с бэкенда по web-сокету и подменяет части приложения прилетевшими кусочками HTML-кода.

Видел в твиттере и на hackernews разные мысли по поводу этого подхода. Кто-то пишет о том, что ребята переизобрели Laravel Lifewire. Кто-то хвалит за продвижение идеи минимального использования JavaScript. Кто-то ругает за то, что отказ от JSON смешивает между собой слои представления и приложения. Подход, как минимум, интересный, но будет ли он развиваться за пределами Ruby-экосистемы, пока остаётся вопросом.

#jsframeworks #announcement

https://hotwire.dev/
https://twitter.com/dhh/status/1341420143239450624

Райан Карниато — автор библиотеки Solid.js — сравнил производительность популярных ui-фреймворков/библиотек и опубликовал результаты в статье "JavaScript Frameworks, Performance Comparison 2020".

Райан поделил все фреймворки на четыре группы. В группе с небольшим упором на производительность первые места взяли Alpine, Marko и React. В группе с большим упором на производительность на первых местах Riot, Preact и LitElement. В группе с очень большим упором на производительность лучшие результаты показали HyperApp, Svelte, Elm. В группе с максимальным упором на производительности с незначительным разрывом победил Solid.js, следом за ним идёт Inferno.

Выводы из статьи. Маркетинг не всегда отражает реальность, так как в разных проектах разные особенности. При выборе ui-фреймворка нужно делать свои бенчмарки; в одном случае будет лучше работать решение с Virtual DOM, в другом случае — DSL, компилируемый в JavaScript.

#jsframeworks #performance

https://medium.com/javascript-in-plain-english/javascript-frameworks-performance-comparison-2020-cd881ac21fce

Райан Карниато — автор библиотеки Solid.js — написал статью о общих принципах работы точечной реактивности — "A Hands-on Introduction to Fine-Grained Reactivity".

Точечная реактивность (fine-grained reactivity) используется в MobX, Vue, Svelte, Knockout и Solid. Если объяснять совсем просто, то её суть сводится к выполнению реакций при изменении наблюдаемых значений. Точно также как меняется результат выполнения формулы в Excel при изменении ячеек, которые используются формулой. Если продолжать аналогию, то эти "ячейки" в разных библиотеках называются по-разному: Signals, Observables, Atoms, Subjects, Refs, — а "формулы": Reactions, Effects, Autoruns, Watches, Computeds.

В статье нет каких-либо деталей реализации, но её можно рекомендовать как хорошее введение в тему точечной реактивности.

#jsframeworks #reactivity #architecture

https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf

Джек Франклин — участвует в разработке 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

Qwik — возобновляемый JavaScript-фреймворк

Райан Карниато поделился своими мыслями после работы с Qwik — новым фреймворком от автора Angular — "Resumable JavaScript with Qwik".

Qwik — это представитель новой категории возобновляемых фреймворков. Его основная особенность — прогрессивная гидрация приложения без обязательной загрузки кода приложения. Qwick единственный в своём роде фреймворк, полноценно реализующий эти идеи, кардинально уменьшая метрику Time To Interactive. Фреймворк при компиляции расставляет в HTML специальные маркеры, которые содержат необходимые данные и ссылки на код, который нужно загрузить перед выполнением. Таким образом реализуется поддержка ленивой инициализации приложения.

Qwik находится на этапе активной разработки. На данный момент его не рекомендуется использовать для production-приложений.

#jsframeworks #performance

https://dev.to/this-is-learning/resumable-javascript-with-qwik-2i29