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

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

[EN] Вышел Web Almanac 2020, в котором авторы собрали в кучу самую разнообразную аналитику.

Какую аналитику? Ну например, что средняя страница содержит 6 внешних CSS-файлов, которые блокируют первую отрисовку.
Что реальная популярность использования разработчиками гридов на мобильных сайтах выросла до 4%, а флексбоксов аж до 61%.
Целых 2% сайтов используют одну из CSS-in-JS библиотек и Styled Components самая популярная среди них.
А лидером среди JS-библиотек всё так же остается jQuery c его 83% сайтов.

Объём работы по составлению такого альманаха просто поражает. Лучше сходите и посмотрите на него сами.

[EN] 90% браузеров уже поддерживают синтаксис ES2017, но, несмотря на это, многие разработчики продолжают компилировать свои библиотеки и утилиты в легаси синтаксис для большей браузерной совместимости. Ну или просто по привычке.
Из-за этого, в бандл попадают полифилы и функции-хэлперы, которые замедляют исполнение кода и увеличивают размер на 20%.

В статье показано, как можно настроить Webpack 5 или Rollup, чтобы обеспечить поддержку, как современного, так и легаси синтаксиса.

Для предварительной оценки эффективности такого перехода, воспользуйтесь специальным сайтом. Например, JS на главной странице Твиттера можно смело уменьшить на целых 2%.

Frontend-команда из Tinkoff поделилась своим «технологическим радаром» — диаграммой, на которой можно увидеть технологии, которыми в компании пользуются активнее всего, а от каких — отказываются.

И отказываются они, например, от JavaScript. Ну вы знаете, типов нет, поддерживать большую кодовую базу с каждым днём становится всё труднее.
Вместо JS, в Тинькове всё активнее используют TypeScript — внутренние опросы показывают, что 94.6% сотрудников предпочитают TS.

А вот всё активнее они внедряют Dependency Injection и Машинное обучение на фронте, которое уже работает в проде и заранее загружает контент для страницы, на которую пользователь перейдёт с большей вероятностью.

[EN] CSS-in-JS — это частый подход для стилизации компонентов, который позволяет динамически менять стили, в зависимости от получаемых пропсов.
Когда кастомизаций становится слишком много, производительность таких компонентов может упасть.

Автор заметки рассказал о ситуации, когда рендеринг Storybook c кучей кнопок занимал 36 секунд, и как ему удалось сократить это время до 200 мс.

Секрет в использовании data-атрибутов и CSS-переменных, которые устанавливаются только при первом рендере компонента, а дальше обрабатываются браузером, как любые другие CSS-переменные.

В качестве альтернативы такому подходу, автор предлагает рассмотреть генерацию статических CSS-файлов, во время компиляции проекта. Например, используя Compiled или linaria.

[EN] Чтобы на самом деле понять, как работают языки программирования — нужно вовсе не книжки умные читать, а просто написать свой язык.
Чтобы это было действительно просто, вам будет помогать автор Uglify.js.
В его небольшом руководстве разобрано, как на JavaScript можно написать свой парсер, интерпретатор и компилятор языка.
Попутно автор поясняет все базовые нюансы, от построения абстрактного синтаксического дерева до оптимизаций.
А в самом конце руководства, вас ожидают примеры использования написанного языка.

[EN] Многие ещё помнят или хотя бы слышали про Callback-Hell, который преследовал JavaScript-разработчиков до появления промисов и async/await.
С тех пор, код стал чище и понятнее, но автор статьи предлагает не останавливаться на этом.

В статье показано, насколько код станет еще чище, если добавить ложку функциональщины, например, в виде функции pipe или экспериментального оператора |>.
Такой подход, по заверению автора, избавит код от бойлерплейта, оставив только действительно важную функциональность.