На злобу дня

Сколько мегабайт данных необходимо скачать пользователю, чтобы прочитать коротенький твит? Сегодня расскажем об истории кризиса ожирения сайтов, дадим советы по скоростному прототипированию веб-приложений, достижению 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. Выглядит чуть более сложно, но работает замечательно. Подробности можно почитать в этой статье и в официальной документации плагина.

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