На злобу дня

14 сентября 2022
На злобу дня

Сколько мегабайт данных необходимо скачать пользователю, чтобы прочитать коротенький твит? Сегодня расскажем об истории кризиса ожирения сайтов, дадим советы по скоростному прототипированию веб-приложений, достижению zero runtime при использовании CSS-in-JS и созданию красивых «каруселей». 

Сбросим лишний вес

Всего четверть века прошло с того момента, как мы выходили в интернет через телефонные линии с помощью медленных аналоговых модемов. Скорость доступа в лучшем случае не превышала 56 Кбит/с, а средний размер веб-страницы до 2003 года редко был больше 100 Кбайт. Скорость доступа к сети всё время росла, страницы становились тяжелее, но пользователи не замечали каких-либо неудобств.

В какой-то момент наступил кризис ожирения сайтов. Автор одноимённой статьи Мачей Цегловски (Maciej Ceglowski) вспоминает, что уже в 2012-м году средний размер страницы перевалил за 1 Мбайт и удвоился к 2014-му.

«Мастер и Маргарита», упакованная в простой HTML, поместится на 3,5 дискету почти дважды. А вот твит (140 байт чистого текста) влезет всего один. Сегодня чтобы его прочитать, нужно загрузить 1 Мбайт данных, большая часть которых — бесполезный рекламный мусор.

Блокировщики рекламы не просто так стали популярными. Страница одного и того же сайта без рекламы весит на порядок меньше. Если у вас «толстый» канал связи, то размер страницы вас не волнует. Но если вы живёте там, где до сих пор используют DSL или экзотично в сельской Австралии с еле живым EDGE, то вам размер сайта будет критичен. Никто не будет ждать загрузки сайта ресторана, у которого в первую очередь грузится 4К-видеоролик в качестве заднего фона.

Уменьшение размера веб-страницы не означает потерю в дизайне или устаревший внешний вид. Есть отличный ресурс 1mb.club, который представляет собой коллекцию веб-сайтов весом не более 1 Мбайт. Тот же самый pypi.org или xfce.org в этой коллекции присутствуют.

Про экстремальное сокращение размера советуем почитать статью Making a Website Under 1kB. Там автор рассматривает несколько трюков, которые способны существенно уменьшить размер страницы, используя особенности стандарта HTML5.

Shuffle.dev — сила 4 фреймворков

Бизнес требует от разработки высокой скорости, потому что ему надо быстро меняться. Например, быстро проверить маркетинговую гипотезу, а не создавать целое приложение. Выходом становятся конструкторы веб-сайтов, с помощью которых можно за пару щелчков создать прототип и сразу показать его в действии. Ещё хорошо бы использовать уникальные UI-компоненты, чтобы отличаться от конкурентов.

Этим выделяется Shuffle.dev. Его очень любят за то, что он предлагает на выбор 4 фреймворка — Tailwind CSS, Bulma, Bootstrap и Material-UI. Фактически — это конструктор для конструкторов. На базе каждого из них можно очень быстро создать прототип веб-приложения. На выбор есть более 6400 компонентов.

Бесплатный сыр бывает только в vendor lock-in мышеловке. У Shuffle нет бесплатных тарифов, зато все исходники можно скачать и использовать за пределами конструктора. При этом в них нет внешних зависимостей, которые могли бы помешать развертыванию на вашем сетапе. 

CSS-in-JS — подорожник или лопух?

CSS-in-JS часто кажется волшебной палочкой. Этот метод делает CSS абстракцией и позволяет описывать стили при помощи JS. Не нужна большая директория с десятками CSS-файлов, всё сделает небольшой высокопроизводительный компилятор.

Всё, что нужно знать о CSS-in-JS, этот метод убирает главный недостаток CSS — отсутствие компонентного подхода. Появляется возможность собрать свою UI-библиотеку компонентов и везде её переиспользовать.

Увы, у «магии вне Хогвартса» есть неприятные побочные эффекты. Бездумное использование CSS-in-JS ведёт к существенной просадке по производительности. Проявляется эффект матрёшки, когда рендеринг одного компонента тянет за собой рендеринг других. А если этот компонент ещё и сам по себе является составной частью более сложного элемента… тут всё становится печально. Подробнее можно почитать в прекрасной статье  фронтенд-разработчика Ангелоса Арванитакиса (Aggelos Arvanitakis).

Тем не менее, отказываться от CSS-in-JS не стоит. Если компонентов немного, обратите внимание на библиотеку Linaria. Она парсит CSS-in-JS непосредственно в процессе компиляции. Это одновременно убивает двух зайцев: позволяет не тащить много JS на клиент и не снижает производительность. 

 

3 способа создания карусели

Смартфоны приучили нас к мобильным интерфейсам и техникам взаимодействия с этими интерфейсами. Слайд-шоу в «карусели» заменили огромные рекламные баннеры и стали стандартной механикой в интернет-магазинах. Бизнесу этот подход нравится, так что хорошо бы уметь быстро создавать качественные и красивые «карусели».

Для начала напомним, что создать карусель можно вообще без единой строки JavaScript-кода, используя исключительно HTML и CSS. Нам пригодится такой трюк, как CSS Checkbox Hack, основанный на том, что CSS всегда знает состояние элемента. Этот эффект можно использовать как замену традиционному JS-событию click. Подробный туториал вы найдете по ссылке.

Теперь к чуть более привычным вещам. Простейшую «карусель» можно создать всего 15 строками JS:

const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");
 
nextButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft += slideWidth;
});
 
prevButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft -= slideWidth;
});

 

Разумеется, стоит подумать о структуре и стилизации. Детали в этом туториале.

Ну и ещё один часто используемый способ — воспользоваться JQuery-плагином Owl.js. Выглядит чуть более сложно, но работает замечательно. Подробности можно почитать в этой статье и в официальной документации плагина.

Митапы и конференции

Онлайн

Ruby Russia

Можно почерпнуть немало полезного для работы с Frontend, узнав как создают приложения, на языке Ruby.

Совсем скоро на нашем мероприятии Ruby Russia соберётся полторы тысячи рубистов. Интерес к обсуждениям будет подогреваться заранее отснятыми в студии докладами кинематографического качества. Будет организован прямой эфир из Сколково: всё, чтобы обсудить интересующие вас темы из мира Ruby разработки!

Программа уже доступна на официальном сайте — регистрируйтесь и присоединяйтесь к нашей онлайн-конференции 30 сентября и 1 октября. 

Регистрация

 

Онлайн

Frontend Meetup

14 сентября 2022

Уже сегодня вечером у нас пройдёт Frontend Meetup. Все доклады традиционно предзаписаны в студийном качестве 4К, а записи появятся на нашем YouTube-канале.

Наш коллега Фёдор Кирпичёв из Evrone представит доклад про особенности работы с формами. Софья Гусева из Яндекса поделится собственным опытом внедрения Code Style в образовательном сервисе Практикум. В завершение Владислав Худяков из команды цифрового дизайна Pragmatica расскажет как выращивать фронтенд-разработчиков внутри отдела.

Мы проводим такие мероприятия на регулярной основе, поэтому если у вас есть что рассказать и вы хотите стать спикером, то пишите на почту andy@evrone.com.

Регистрация

Вакансии

Удаленка / Офис

Evrone 

Мы открыты для новых Frontend-разработчиков. В Evrone можно работать удалённо с первого дня, мы поддерживаем и оплачиваем участие в Open-source проектах, а расти в грейдах можно с помощью честной системы проверки навыков и менторства.

Подробнее

Подписаться
на Digest →
Важные новости и мероприятия без спама
Технологии которыми вы владеете и которые вам интересны
Ваш адрес электронной почты в безопасности - вот наша политика конфиденциальности.