Фронтенд дайджест #140 Лучшее за неделю Подкаст [EN] Команд | FrontoWeek: Недельный дайджест [Фронтовик]

Фронтенд дайджест #140
Лучшее за неделю
Подкаст

[EN] Команда разработки React и лично Товарищ Дэн Абрамов, представили сообществу демо новой фичи, над которой они сейчас работают — React Server Components.

Серверные компоненты рендерятся только на сервере, а значит в них удобно размещать запросы к серверу или чтение файлов. На демо ребята даже писали SQL прямо в серверных компонентах, с оговоркой, что, конечно же, так делать не нужно.
Ещё один плюс серверных компонентов — их зависимости не попадают в клиентский бандл, а значит в такие компоненты можно вынести тяжёлые библиотеки, которые используются в одном-двух местах.

Но это не всё. Дэн представил, как может выглядеть новая архитектура Реакт-приложений.
Основная идея в том, чтобы построить своё приложение из серверных компонентов, которые быстро получают необходимые данные и прокидывают их в клиентские компоненты через пропсы.

Вот мы и нашли, чем занять команду разработчиков в следующем году.

Что лучше: Angular или React?
Можете не отвечать, это был риторический вопрос.
А вот наставникам из Яндекс.Практикума приходится отвечать на эти вопросы регулярно. Автор решил написать статью, о том, какой инструмент лучше подойдёт для той или иной задачи, но увлёкся и написал подробную историю развития JS-библиотек и фреймворков.

Всё началось в 2005 году с появления утилитарных библиотек, вроде Dojo Toolkit. Затем вышел знаменитый jQuery, который до сих пор держит 83% сайтов в интернете.
Выход стандарта ES5 в 2009 году дал толчок развитию JavaScript, после чего мир увидел первые полноценные JS-фреймворки.
В статье рассказано о самых известных фреймворках: какие у них особенности, какие задачи они решали, почему одни теряли популярность, а другие её приобретали.

Рекомендуется к изучению для более аргументированных споров о том, какой стек лучше.

[EN] Сколько файлов фавиконки нужно, чтобы все браузеры её отобразили?
Обычный онлайн-сервис генерирует вам 25 иконок во всех необходимых размерах и форматах.

Андрей Ситник — автор PostCSS и Autoprefixer — в блоге Злых Марсиан рассказал, что для покрытия большинства браузеров достаточно всего 5 картинок:

3 в HTML:
- SVG для современных браузеров;
- 180×180 PNG для устройств от Apple;
- 32×32 ICO для совсем старых.

И 2 картинки в manifest.json:
- 192×192 PNG для отображения на главном экране;
- 512×512 PNG, которая будет появляться при запуске PWA.

А в самом конце статьи, Андрей даёт инструкцию, как собрать такой пак иконок.

[EN] Автор Ruby on Rails представил новый подход к разработке веб-приложений, не требующий написания JavaScript. Хорошо, требующий, но совсем чуть-чуть.

В подходе Hotwire объединилось сразу несколько инструментов. Библиотека Turbo позволяет клиенту подписываться на обновления частей страницы через веб-сокеты, получая готовый HTML от бэкенда.
Это уже решает 80% задач, для которых обычно требуется JavaScript.
Остальные 66% могут быть покрыты с помощью фреймворка Stimulus, который чем-то напоминает AngularJS на минималках.

Кстати, именно на этом стеке работает почтовое приложение Hey, в котором главный упор сделан на быстродействие.

В следующем году этот стек дополнит библиотека Strada, которая позволит создавать гибридные мобильные приложения. Пока ничего конкретного, но посмотрим, сможет ли она потеснить позиции React Native.

[EN] Чтобы применить трансформации к элементу в CSS, сейчас нужно перечислять все функции подряд: transform: translate(0,0) scale(1,1) rotate(0). Это создаёт массу проблем, например, с анимациями: приходится копировать всю строку, даже если нужно анимировать одну функцию.

Вслед за Firefox, Chrome Canary, индивидуальные свойства трансформации приходят и в Safari Technology Preview 117. Совсем скоро, лет через 5, можно будет применять трансформации по одной.

Это был последний дайджест 2020 года и конец первого сезона.
Следующий, 201 выпуск, будет доступен патронам с 9 января, а 14 января появится на основном канале.

С Новым годом !
С вами был Фронтовик и мне уже пора.