Monbanquet.fr и великий Гэтсби

Это делается путем загрузки следующей страницы в виде пакета Javascript, а не документа HTML. Идея состоит в том, чтобы заменять компоненты на лету без необходимости повторного рендеринга всей страницы.

Вы можете увидеть это в действии, когда я наводил курсор на разные ссылки на странице.

‹GatsbyImage› и разрешения

Еще один инструмент, который предоставляет Гэтсби, - это компонент реакции под названием gatsby-image. Это позволяет вам в полной мере использовать методы оптимизации изображений без лишних хлопот.

Если вы ранее пытались правильно реализовать теги image / picture, вы знаете, как сложно использовать тег ‹picture› и атрибут srcset со всеми указанными файлами разрешений.

Это не только требует времени, чтобы написать, но и создавать изображения любого размера и разрешения. Некоторые онлайн-сервисы могут сделать это за вас, но что, если вы не хотите пользоваться дорогостоящими услугами? Gatsby снова помогает вам здесь, используя свои плагины. Используя gatsby-plugin-sharp, все необходимые разрешения и размеры будут созданы и переданы вам в красивом стиле GraphQL. В конце концов, приведенный выше код был сгенерирован этим небольшим фрагментом:

Вы можете спросить, зачем нам все это делать. Почему бы не добавить простой сингл ‹img src =”… ”/› и баста? Ну ... просто потому, что от этого страдают ваши пользователи. Изображения не оптимизированы для всех устройств, размеров экрана и сетевых подключений. В то время как с gatsby-image браузер может решить, какой источник показывать на основе этих критериев, обеспечивая быстрое взаимодействие с пользователем, в то время как Gatsby помогает разработчикам.

У нас есть все, что касается скорости, ура! Но подождите, gatsby-image идет дальше. Он не только выбирает наилучшее доступное разрешение, но и загружает его лениво и визуально прогрессивно. Есть два метода, доступных с gatsby-plugin-sharp и gatsby-image.

Первый называется traced-svg и заключается в создании контура изображения, которое вы хотите отобразить в качестве заполнителя, пока загружается реальный объект. Здесь вы можете видеть, что когда я перезагружаю страницу, SVG ненадолго отображается перед тем, как изображение заменяет его.

Второй метод называется размытием и заключается в том, чтобы встроить 20-пиксельную версию вашего изображения в HTML в качестве URI данных перед заменой с правильным разрешением. Это создает ощущение контекста для ваших пользователей, которые могут почти чувствовать картинку во время ее загрузки, предотвращая мучительное ожидание с пустым местом или переходом по контенту.

Здесь вы можете наблюдать за эффектом размытия в действии, а также за отложенной загрузкой изображений, когда они попадают в область просмотра.

Эта работа над воспринимаемой производительностью еще больше улучшает впечатления пользователей от использования вашего веб-сайта. И все это сделано за вас. Никакой сложной настройки или манипуляций.

Плагины Moaaaaar

Я знаю, что это пугает и напоминает дни jQuery, когда в каждой библиотеке был плагин jQuery. В Gatsby плагины лежат в основе экосистемы. Они позволяют создавать и формировать контент до того, как он попадет в ваши компоненты.

Один из плагинов, который я считаю особенно полезным, - это gatsby-subfont-plugin. Он вытряхивает любой символ шрифта, который вы не используете, из критического пути рендеринга вашей домашней страницы. Это достигается путем создания версии шрифта, содержащей только те глифы, которые вы действительно используете.

После этого полный шрифт по-прежнему загружается асинхронно для обработки любого возможного динамического содержимого. Но ваш первый рендер должен быть значительно более быстрым и уменьшать FOUT. В конце концов, мы сократили примерно 50 КБ неиспользуемых символов шрифта при первом рендеринге, что немаловажно.

Примечание об анимации / взаимодействиях

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

Конечно, анимация сама по себе глупа и подрывает доверие к сайту и удобство использования. Тем не менее, тонкие и своевременные действия могут сделать впечатления значимыми и даже восхитительными. Помогаем пользователю понять, почему что-то появляется на экране и откуда оно берется.

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

Это то, что мы сделали для нашей основной панели навигации. На мобильном устройстве имеется левый ящик для навигации между страницами веб-сайта. Если вы попробуете его, то заметите, что, в отличие от многих боковых веб-панелей навигации, он не просто появляется в поле зрения, а мягко скользит по основной области содержимого. Точно так же вы можете вызвать его, коснувшись ссылки меню или перетащив ее от левого края экрана. Стандартный шаг, которого уже давно ожидают мобильные пользователи. Но исторически сложилось так, что делать это правильно на мобильных устройствах. До… реагирующей пружины.

Пользоваться этой библиотекой было приятно, и она стала глотком свежего воздуха. Я не буду вдаваться в подробности реализации здесь (тема для более позднего сообщения), но просто знаю, что компонент Drawer и вся его логика взаимодействия охватывают не более 50 строк кода. Это включает сенсорное управление умение обращаться. Мы опубликуем код, как только он будет готов.

Добавление жестов пользователя и реагирование на них еще никогда не было таким простым и обычно занимает всего несколько строк (тем более с выпуском хуков реакции). Я рекомендую вам внимательно изучить, как сделать ваш сайт более живым с помощью этих двух пакетов, вы не пожалеете об этом. (Большое спасибо Пол)

• Реагирующая пружина
• Реакция-использование-жест

Строить. Развертывать. Повторить.

Теперь, когда у нас есть хорошее представление о том, как Gatsby помогает разработчикам создавать отличные и быстрые пользовательские интерфейсы, как нам все это объединить? Как мы доставим все это чудо?

Ответ зависит от вас, вашего выбора, вашего стека и вашей команды. На Monbanquet.fr мы остановились на Contentful и Netlify. Они отлично подходят для наших сценариев использования. Вот аргументы, которые заставили нас зачислить:

Довольный

• Имеет веб-интерфейс
• Только контент, без стиля
• Имеет плагин Гэтсби
• Это отличное место для размещения фотографий
• У него есть щедрый бесплатный уровень

Netlify

• DX потрясающий (вывод сайта в сеть занял самое большее 5 минут)
• Он строится и развертывается при каждом нажатии git.
• У него есть URL-адрес для каждой сборки фиксации и каждой ветки
• У него есть веб-перехватчики для запуска сборки извне.
• Имеет сплит-тестирование на основе ветвей.
• У него есть щедрый бесплатный уровень
• Еще много интересных функций, которые мы еще не пробовали. (Формы, личность…)

Наши потребности были простыми, но найти их было трудно. Нам нужна была гибкость, поэтому Contentful предоставит нам контент, не связанный с фронтенд-разработкой, что значительно поможет взаимодействию с маркетологами, отвечающими за контент. Нам также нужно было что-то быстро выпустить, исключая любую сложную систему сборки или процесс разработки. И Netlify с этой задачей справился. Так как же сейчас выглядит процесс разработки?

Содержательное изменение → Триггеры строятся на netlify через веб-перехватчик → сайт развернут

Изменение кода → Триггеры на netlify с помощью git push → сайт развернут

В своей презентации я упомянул, что это обошлось нам в 0 евро. Это, очевидно, без учета времени разработки. Что все еще было относительно низким. Создание (правда, простого) веб-сайта, над которым работал только один человек, заняло всего 2 месяца (включая дизайн). Это довольно приятная сделка, если вы спросите меня, учитывая:

Производительность… проверяется. SEO… проверил. Мобильное взаимодействие… нативное. Управление контентом… проверено. Хостинг и процесс сборки… быстро и легко. Времени на обучение… почти ноль. Стоимость SaaS… 0 €.

Заключение

Почему все любят Гэтсби? Причин может быть много, но мне, например, нравится, как это помогает вам максимально эффективно использовать современные веб-технологии (предварительная выборка, оптимизация изображений и шрифтов ...), которые часто слишком сложны, чтобы их можно было должным образом своевременно обрабатывать. Теперь у вас в команде практически бесплатно есть инженер по производительности. Производительность больше не является чем-то запоздалым, она запеклась. Барьеры упали, и у вас больше нет оправданий, чтобы не создавать высокопроизводительный веб-сайт.

Является ли будущее Monbanquet.fr статичным?

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

Например, мы собираемся предлагать онлайн-заказы, которые включают множество вариантов использования электронной коммерции. Страницы продуктов, корзины, поиск и многое другое. Вы можете догадаться, как это становится немного сложнее, чем написание нескольких страниц. Проблемы возникнут в отношении максимального количества страниц, которое мы можем создать за разумное время, аутентификации и смешивания статических страниц с динамическим контентом. Это поможет нам найти пределы статической генерации. Предел, который мы хотим исследовать, если хотим создать отличный опыт как для пользователей, так и для разработчиков.

Спасибо за прочтение!

Спасибо, Чарли Поли за ваш отзыв и помощь!

Следите за нашими постоянными разработками в твиттере @dot_louis и @monbanquet

Слайды: https://slides.com/dotlouis/deck-13

Доклад (на французском 🇫🇷 с субтитрами на английском 🇬🇧): https://www.youtube.com/watch?v=xLQ4to7Ubn0

#UX #UI #static #webdevelopment #gatsby #jamstack #speed #easy # react-spring # react-use-gesture #animations