В Интернете часто можно увидеть такой макет, когда вы просматриваете огромное количество контента без какой-либо заметной структуры:
Ваш взгляд естественно притягивается к узнаваемым вами формам. Наша зрительная кора может обрабатывать столько информации за один раз, и наше внимание размером с горошину не успевает за ней. Все, что не распознается, отфильтровывается, и, хотя оно появляется в вашем поле зрения, оно не отпечатывается. Это называется макет кирпичной кладки, и я хочу вам сказать, что это отстой.
Но газета…
Во времена ранней механической печати использовались колонны, потому что шрифтовые блоки приходилось размещать вручную, а позже формировались по запросу. Это была нелегкая задача. Когда мы перешли на современные принтеры, столбцы сохранились, потому что они позволяют размещать больше различных товаров в верхней части страницы и хорошо работают с рекламой.
Так почему же мы все еще используем эти макеты в Интернете в 2017 году? По тем же причинам: реклама и слабо связанный контент. Если вы решаете, стоит ли вам использовать кладку, ответ почти всегда отрицательный. Есть одно исключение: когда вы не можете отсортировать свой контент по порядку апелляции.
У дьявола много имен:
Изотоп, Пакеты, Masonry.JS, Bricks.JS - все это прекрасные воплощения того, как выглядит макет кладки. И они работают на многих веб-сайтах благодаря простоте использования и предлагаемым функциям. Однако проблема в том, что они не созданы для скорости и обманывают разработчиков, использующих их.
В 2016 году мне было поручено разработать совершенно новое веб-приложение на React для The Hunt. Так сайт выглядел раньше:
Нет сомнений в том, что эта сетка устарела, но в ней действительно легко ориентироваться, потому что она линейная. Он течет, как книга, строка за строкой.
Если бы я мог вернуться и сделать лучший вариант для этого макета, я бы это сделал.
Поскольку кладка выполняется медленно…
Мы начали с Isotope JS. Я использовал его раньше в предыдущих проектах, и он подходит для более легких веб-сайтов и статичных блогов. В процессе разработки я никогда не замечал никаких проблем с производительностью, потому что у меня был процессор i7 Intel 3,4 ГГц и 16 ГБ оперативной памяти.
Когда мы запускались, наши пользователи сообщали о сбоях и медленной прокрутке. Я покопался в библиотеке и обнаружил, что API-интерфейсы, с которыми она сталкивается, были намного медленнее и устаревшими, что приводило к ненужной перерисовке браузера. Другой проблемой была бесконечная прокрутка, еще один плохой шаблон пользовательского интерфейса, от которого мы, кажется, не можем избавиться. Но это совсем другая тема.
В этом случае бесконечная прокрутка и макет каменной кладки загружали сотни элементов DOM на страницу и перерисовывали гораздо больше, чем необходимо. Что хорошего в макете из каменной кладки, если ваши пользователи не могут пройти мимо третьей страницы на своих нетбуках и планшетах?
Я просмотрел многие библиотеки макетов каменной кладки. Вопреки рекомендациям практически всех, с кем я разговаривал, я знал, что должен сделать то, чего не хотел делать.
Я написал свой собственный движок верстки…
Иногда приходится начинать с нуля. То, что нам нужно от разметки кладки, совсем не то, что нужно другим. Многие макеты кладки имеют замечательные функции, такие как изменение размеров элементов и перетаскивание.
Я решил выяснить, почему некоторые из этих библиотек работают медленно. Я обнаружил, что многие функции, делающие их гибкими, также вредят. Например, изменение размеров - это огромная потеря производительности: измерение сотен моделей размеров элементов стоит дорого. А в некоторых случаях библиотека могла бы использовать методы, которые вызывали бы ненужную перерисовку для получения ширины и высоты. Другая проблема заключается в том, что все эти элементы складываются, и по мере роста страницы вычисления происходят в геометрической прогрессии.
Затем я посмотрел на Pinterest - вершину кладки. Мне было интересно, как инженерам удалось сделать его быстрым и удобным.
Вот где я провел черту:
- Заранее заданная высота элемента - это упростило размещение элементов в одном и том же месте каждый раз. Без этого весь макет нужно было бы пересчитать, чтобы разместить новый элемент.
- Фиксированная ширина столбцов - проценты стоят дорого, и вместе с №1 это избавит нас от ненужных красок и перерисовок для замедления DOM API.
- Визуализируйте только то, что видно - за счет уменьшения количества элементов DOM в браузере остается меньше объектов для рисования при прокрутке и перекомпоновке.
Процесс потребовал много математики и терпения - вычислений, где разместить предметы и как разместить их эффективно. Например, когда элемент занимает несколько столбцов, он создаст зазор, если элементы выше не выровнены. Это был самый сложный аспект, потому что нам не нужна была быстрая компоновка кладки с пустыми пробелами повсюду. Все это должно было уместиться внутри компонента React и соответствовать структуре событий жизненного цикла. Поэтому, когда бесконечная прокрутка загружает новую страницу, должны быть размещены только новые элементы.
И каким красивым оказался компонент React. Я решил написать этот пост, чтобы задокументировать разочарование и огромную гордость, которые я испытывал за эти усилия. Когда я размышляю о процессе и результате, я вижу одни из своих лучших работ. Пробовать и пробовать, итерация за итерацией; моменты «мы еще там?». Голос в глубине моей головы, говорящий: «Не пишите механизм верстки».
Получилось невероятно эффективно. На Chromebook икоты не было, и рендеринг был быстрее, чем требовалось серверу для возврата следующей страницы. Я немедленно сделал компонент доступным через Github (проверьте его, если хотите узнать, что скрывается под капотом). Он недоступен в виде пакета, потому что он не универсален, и последнее, что нужно для Интернета, - это еще одна библиотека масонства.
Вы можете увидеть, как этот движок работает в прямом эфире на сайте thehunt.com.
Если вы думаете о развертывании собственной системы макетов: действуйте осторожно. В Интернете доступно множество ресурсов для Flexbox, CSS4 Grids и эффективных интерфейсов. Ищите лучший пользовательский опыт, который течет естественно. Если вы хотите сделать это самостоятельно, я бы посоветовал провести ваше исследование и избавиться от чрезмерно сложных функций.
Надеюсь, вам понравилось это читать: если вы чувствуете боль при планировке каменной кладки или уже были там раньше, не стесняйтесь поделиться своим опытом.
