Из всех тенденций современной эпохи веб-разработки, тенденция к высокопроизводительной веб-производительности - это та тенденция, которая в одиночку предлагает наибольшее вознаграждение и вознаграждение как пользователям, так и веб-разработчикам; обычные пользователи теперь ожидают, что веб-сайты будут предлагать невероятно высокую скорость загрузки страниц, минимальное время загрузки, а также увлекательный и удовлетворительный пользовательский интерфейс с абсолютно нулевым разочарованием.
В последние годы мы увидели, что это ожидание сбылось. По мере того, как мы постоянно подталкиваем Интернет к тому, чтобы делать все больше и больше, и добавляли новые функции в наши приложения, мы начинаем видеть серьезное снижение количества веб-сайтов. представление. Но благодаря веб-технологиям, таким как PWA (прогрессивные веб-приложения), сервис-воркерам и генераторам статических сайтов, которые борются с этим и открывают времена долгой загрузки собственных приложений и разочаровывающих задержек, разработчики могут создавать быстрые, эффективные и надежные приложения, предлагающие выдающийся веб-опыт с минимальным временем разработки.
Суть в том, что производительность имеет значение, и постоянное продвижение Google в этом направлении с помощью сервисов Lighthouse для PWA и ускоренных мобильных страниц (AMP) действительно показывает, как большие мальчики отрасли в настоящее время уделяют приоритетное внимание веб-производительности, и мы все тоже должны.
Google даже предоставляет нам статистику, подтверждающую это. Например, Pinterest увеличил трафик поисковых систем и количество регистраций на 15%, когда они сократили время ожидания на 40% (1), а BBC обнаружила, что они теряли дополнительно 10% пользователей за каждую дополнительную секунду, затраченную на загрузку их веб-сайта. (2).
В частности, из-за их невероятно высокой скорости страниц, повышенной безопасности и простой разработки, развертывания и хостинга многие веб-разработчики обращаются к генераторам статических сайтов как к способу создания своих веб-сайтов, одновременно достигая своих целей в области веб-производительности.
Итак, что такое генератор статических сайтов?
Распространенное заблуждение, что статические сайты представляют собой новую технологию, хотя на самом деле они существуют уже лет. Статические сайты были первоначальным методом веб-разработки, при котором для создания веб-сайтов использовались обычные HTML, CSS и JavaScript, без интерфейсных фреймворков, библиотек или плагинов.
Сами генераторы статических сайтов сосредоточены на генерации обычных сайтов HTML, CSS и JavaScript в качестве готового продукта без каких-либо ссылок на базы данных или обработки на стороне сервера (что делает их скорость загрузки очень высокой). Эти статические HTML-файлы создаются сервером и готовы к возврату в браузер. С возможностью генераторов статических сайтов извлекать данные из любого места, включая широкий спектр CMS, API и файлов содержимого.
Каковы преимущества использования генераторов статических сайтов?
- Скорость. Из-за отсутствия какой-либо серверной системы, фактически доставляющей веб-сайт, не требуется выполнять запросы к базе данных и обрабатывать запросы клиент-сервер, а сервер всегда имеет готовый HTML-вывод для доставки пользователю, статические сайты часто невероятно быстро. Кроме того, многие генераторы статических сайтов имеют функции кэширования, которые дополнительно сокращают задержки. По сути, все, что нужно сделать серверу, - это вернуть файл, который, как оказалось, довольно быстро справляется ...
- Безопасность. Опять же из-за отсутствия серверной системы статический сайт не имеет базы данных, которую можно было бы атаковать или использовать, нет плагинов или расширений, которые можно было бы использовать в качестве маршрутов в систему, и нет областей, которые кто-либо может получить несанкционированно. доступ к. WordPress (на котором работает огромное количество 34% веб-сайтов в Интернете) печально известен из-за того, что его используют и обеспечивают безопасность. уязвимостей, но со статическими сайтами никто не может нанести большого ущерба набору простых файлов HTML.
- Надежный. Еще одно преимущество JAMstack - отсутствие серверной системы. Развертывание и масштабирование статического сайта намного проще, а приложение в целом, как правило, более стабильно и надежно, поскольку сервер на самом деле может обрабатывать большой трафик, запрашивая только простые статические файлы.
- Легкость разработки. Генераторы статических сайтов значительно облегчают процесс разработки. Настроить и запустить что-то очень легко, с минимальными настройками и настройками, и после того, как сайт написан, для его развертывания часто остается всего лишь простая команда.
- SEO. Часто веб-сканеры не могут читать сложные приложения React.js или Vue.js с сотнями компонентов, из-за чего они оказываются на дне SEO. Но когда ваш контент статичен, а у вас отличная скорость и производительность страницы, тогда вы обязательно преуспеете на фронте SEO.
В чем недостатки использования генераторов статических сайтов?
- Приложения реального времени. Поскольку сайт ограничен одним набором статических файлов HTML, которые создаются при каждом запросе, в настоящее время нет возможности создать приложение, которое будет размещать данные в реальном времени. Так что попрощайтесь с любыми приложениями, которым требуются такие функции, как автоматическое обновление новостей, комментирование в реальном времени, данные в реальном времени или приложения для обмена сообщениями в любой форме.
Войдите в Gatsby.js
Gatsby.js - это фреймворк с открытым исходным кодом для создания статических сайтов. На основе JAMstack (https://jamstack.org). Гэтсби использует React.js в качестве предпочтительной внешней среды и GraphQL для поддержки своего уровня данных; в конечном итоге позволяет Gatsby извлекать данные из ряда источников (в основном из любого места), включая CMS, такие как WordPress, Drupal и Craft CMS, простые файлы разметки, состоящие из метаданных, полноценные базы данных и API или локальные файлы.
У Gatsby также есть множество плагинов для расширения его функциональности. Гэтсби использует 2 типа плагинов: плагины исходного кода для «получения» данных в приложение, например извлечение данных из CMS, таких как WordPress, и плагины-преобразователи, которые «преобразуют» данные из исходных плагинов в некоторые новые данные, такие как отложенная загрузка изображений.
React.js
Gatsby использует React.js для создания пользовательских интерфейсов веб-сайта, на самом деле он быстрый и довольно приятный (я немного фанат React и React Native), и, согласно последнему опросу разработчиков Stack Overflow, является предпочтительным веб-фреймворком для 31,3% разработчиков - это фреймворк, который больше всего любят 74,5% разработчиков, и он занимает первое место как самый востребованный веб-фреймворк.
GraphQL
Гэтсби использует GraphQL для своего уровня данных. Первоначально созданный Facebook, GraphQL позволяет нам загружать данные на наш веб-сайт. GraphQL действительно мощный инструмент, который дает действительно элегантные и эффективные решения. Подробнее о GraphQL позже.
Учебник
В этом руководстве мы будем использовать Gatsby.js, популярный генератор статических сайтов, используемый такими компаниями, как AirBnB и Nike. Gatsby.js использует React.js и GraphQL, и в этом руководстве мы создадим простой веб-сайт, отображающий информацию о фильмах и персонажах «Звездных войн» (предупреждение ботаников), а затем мы будем использовать Gatbsy.js для вывода полной статической информации. веб-сайт, который создается во время сборки всякий раз, когда пользователь его посещает.
Проект, который мы создадим, чтобы показать мощь Gatsby.js, - это простое приложение, которое извлекает данные из API Звездных войн (SWAPI - https://github.com/graphql/swapi-graphql) и отображает контент. о фильмах и персонажах из франшизы / вселенной. У нас будет простая индексная страница со списком фильмов и персонажей, и мы будем использовать простой макет карточки для отображения каждого фрагмента контента на индексной странице.
Роль Гатбси здесь заключается в выполнении запросов к API и создании статического сайта во время выполнения (всякий раз, когда кто-либо посещает сайт), в результате чего создается сверхбыстрый динамический набор веб-страниц, которые загружаются почти мгновенно. Более того, когда новый контент добавляется в API Звездных войн, статический сайт автоматически загружает этот новый контент и восстанавливается; в результате создается гибридный динамический-статический сайт.
Шаг 1 - Установка Gatsby.js
Во-первых, нам нужно установить Node.js, если вы уже сделали это, пропустите этот шаг, в противном случае перейдите на https://nodejs.org/en/download/.
Затем нам нужно будет использовать NPM для установки Gatsby.js CLI (интерфейс командной строки), это упростит создание проектов Gatsby и управление ими:
npm install -g gatsby-cli
Для справки, вы можете увидеть все доступные нам команды Gatsby, выполнив:
gatsby --help
Gatsby поставляется с набором предварительно созданных конфигураций проектов / начальных шаблонов, которые делают создание проектов Gatsby очень простым. Мы будем использовать стартовый шаблон «Hello World», поэтому для создания нашего нового проекта Gatsby запустите команду gatsby new с именем нашего проекта, а затем стартовым шаблоном. мы будем использовать:
gatsby new star-wars-app https://github.com/gatsbyjs/gatsby-starter-hello-world
Это создаст для нас базовый стартовый проект, поэтому выполните следующие команды, чтобы начать разработку приложения:
cd star-wars-app gatsby develop
Затем, если вы перейдете на http: // localhost: 8000, вы увидите свой проект Gatsby с пустым шаблоном hello world!
Шаг 2 - Создание наших шаблонов
Откройте проект в любом текстовом редакторе, я буду использовать VS Code. Откройте папку / src, и внутри нее будет каталог под названием pages. Как вы, наверное, догадались, здесь будут размещаться все содержательные страницы сайта. Поскольку мы использовали начальный шаблон, это будет один файл index.js, в котором будет одно сообщение компонента hello world. Удалите это, так как мы будем создавать собственные компоненты, которые будут использоваться на странице индекса.
Стоит отметить, что у Гэтсби есть супер крутой createPage API, где вы можете автоматически создавать страницы на основе данных, поэтому теоретически мы могли бы автоматически и динамически создавать отдельные страницы фильмов и персонажей для всех фильмов и персонажей, которые мы получаем. обратно из API. Это действительно мощная функция, которая действительно ставит Gatsby на передний план среди генераторов статических сайтов, и при правильном использовании может привести к созданию полноценного веб-сайта с минимальным временем написания кода. Довольно круто, а? Но для этого урока мы будем использовать только одну индексную страницу.
Затем нам нужно создать папку для создания наших компонентов. Итак, создайте новый каталог в src под названием components. Итак, структура вашего проекта должна быть следующей:
src pages index.js components
Мы создадим два компонента списка: один для списка фильмов, а другой - для списка персонажей. Затем мы создадим два компонента карты: один для отображения основной информации о каждом фильме, а другой для отображения информации о каждом персонаже.
Компоненты списка фильмов и списка персонажей будут показаны на главной странице (index.js), а затем каждый компонент списка будет отображать несколько компонентов карты.
Во-первых, давайте создадим компонент movies, создав файл moviesList.js в src / components / movies со следующим кодом React:
Здесь мы начинаем с импорта нашего компонента карточки фильма, который мы создадим позже, а также импорта React и модуля CSS с заданной областью действия, содержащего стили для наших карточек, которые мы снова будем создавать позже.
import React from “react” import FilmCard from ‘./filmCard.js’; import styles from “../card.module.css”
Затем мы собираемся использовать свойство списка карточек, которое будет передано нашим файлом index.js (мы вернемся к этому позже), чтобы создать новый массив карточек с помощью оператора .map (). Мы будем хранить все наши карты в константе под названием «карты», готовой для вставки в наш элемент ‹ul› ‹/ul›.
const cards = this.props.films.map((film, index) =>
<li className={styles.film__card} key={film.id}>
<FilmCard film={film} />
</li>
);
Каждый новый компонент карты, созданный в этом цикле, создает новый компонент FilmCard и передает ему данные о фильме (такие как название, номер эпизода, дата выпуска и т. Д.) В качестве опоры. Затем мы возвращаем список карточек внутри неупорядоченного элемента списка:
return <ul className={styles.cards__container}>{ cards }</ul>;
Затем давайте создадим файл filmCard.js в src / components / movies со следующим:
Здесь мы просто создаем компонент карточки, который будет просто отображать данные, которые мы будем возвращать из API, такие как номер серии, название, режиссер и начальный обход этого фильма. Позже мы подойдем к тому, как на самом деле получить эти данные:
<div>
<h1 className={styles.card__title}>#{this.props.film.episodeId} — {this.props.film.title}</h1>
<h5 className={styles.card__subtitle}>Release Date: <span className={styles.card__copy}>{new Date(this.props.film.releaseDate).toLocaleDateString(“en-US”)}</span></h5>
<h5 className={styles.card__subtitle}>Director: <span className={styles.card__copy}>{this.props.film.director}</span></h5>
<h5 className={styles.card__subtitle}>Opening Crawl: <span className={styles.card__copy}>{this.props.film.openingCrawl}</span></h5>
</div>
Мы следуем общей теме стиля многократного использования, используя классы card__title, card__subtitle, card__copy. Ничего особенного.
Стоит отметить, что мы форматируем дату выхода фильма, используя
.toLocaleDateString("en-US");
Это потому, что API возвращает объект даты JavaScript, и мы хотим, чтобы он выглядел красиво на нашем статическом сайте 😇.
Теперь, когда у нас есть компоненты фильма, мы сделаем то же самое для компонентов нашего персонажа. Которые следуют очень похоже на компоненты нашей пленки.
То же самое и с characterCard.js:
Оба набора компонентов FilmList и CharacterList, а также FilmCard и CharacterCard очень похожи. Компоненты List просто отображают список, содержащий несколько карточек, а компоненты Card просто показывают различную информацию.
Здесь стоит отметить, что последний бит данных, которые мы отображаем, - это список звездолетов для этого персонажа, мы получим массив из API, поэтому снова мы просто используем оператор .map () для формирования новый массив элементов списка, содержащий только название звездолета.
Структура проекта пока должна быть следующей:
src
pages
index.js
components
films
filmList.js
filmCard.js
characters
characterList.js
characterCard.js
Затем мы вернемся к файлу index.js и импортируем компоненты FilmList и CharacterList вверху, чтобы мы могли их просмотреть:
Здесь мы создаем компонент нашей домашней страницы с двумя массивами объектов, содержащих информацию о данных о фильмах и персонажах, которые мы собираемся показать. Не волнуйтесь, мы увидим эти данные позже, когда извлечем их из SWAPI с помощью GraphQL.
Теперь мы быстро добавим стили нашему статическому сайту.
Поскольку мы используем стили с ограниченными областями видимости, мы создадим в папке наших компонентов файл под названием card.module.css. Мы будем использовать несколько стилей, таких как заголовок, подзаголовок, список и копия, которые мы будем повторно использовать как в фильмах, так и в карточках персонажей.
Поэтому добавьте в файл следующий стиль кода:
Опять же, эти стили не имеют большого отношения к проекту, они просто дадут нам возможность взглянуть на что-то приятное!
Также создайте файл с именем global.css в src / styles и вставьте следующее:
Этот файл представляет собой файл глобальных стилей, который будет использоваться на всем сайте, здесь мы просто добавляем некоторые базовые стили, такие как семейство шрифтов.
Таким образом, файл card.module.css будет содержать все стили, относящиеся к карточкам, а файл global.css будет содержать все стили, относящиеся к самому приложению.
Вы можете задаться вопросом о div «звезды» и «мерцание» внутри файла index.js ... это просто для создания анимационного фона звезд, мерцающих на фоне черного неба, очень занудно ... Я знаю. ✨
Шаг 3 - Подключение GraphQL
Пока у нас нет данных, отображаемых в наших шаблонах. Но теперь мы рассмотрим использование GraphQL для извлечения наших данных из SWAPI.
Однако стоит отметить, что GraphQL - не единственный способ извлекать данные в приложение Gatsby. Еще одна мощная функция Gatbsy заключается в том, что вы можете извлекать данные из различных источников, таких как файлы разметки и файлы JSON, или вы можете расширить Gatsby с помощью исходных плагинов, которые позволяют запрашивать данные из CMS, таких как WordPress и Craft CMS.
Во-первых, нам нужно установить пакет GraphQL NPM для приложения:
npm install --save gatsby-source-graphql
Затем мы добавляем следующие параметры в наш файл gatsby-config.js:
Вышеупомянутое просто позволяет нам вызывать API и определяет, в каком поле мы можем получить доступ к данным (swapi).
Возвращаясь к нашему файлу index.js, нам нужно определить фактический запрос, который мы будем использовать для получения данных из API.
Прекрасная особенность GraphQL заключается в том, что мы можем буквально указывать точные поля нужной нам информации. Вместо того, чтобы возвращать массивный объект JSON, полный значений, мы можем указать, что именно мы хотим. Мы добавим следующий код в наш файл index.js, который представляет собой запрос, который GraphQL будет использовать для извлечения данных из API:
Вышеупомянутый запрос GraphQL не требует пояснений. Он определяет информацию, которую мы хотим получить от SWAPI, включая вложенные данные в дочерних объектах.
Нам доступно гораздо больше данных, на самом деле существует целый ряд данных о гораздо большем количестве вещей из Звездных войн, чем о фильмах и персонажах, и вы можете найти полный список здесь: https://graphiql.graphcms.com/simple/v1/ swapi , а также здесь можно протестировать любые запросы GraphQL. Но для целей этого урока мы дадим только основную информацию о фильмах и персонажах.
Здесь вы действительно можете увидеть мощь GraphQL, мы запрашиваем только необходимую информацию из API, а не возвращаем всю информацию об объекте фильма. Мы просто диктуем, что хотим, предсказуемым и надежным образом. GraphQL также имеет дополнительное преимущество, заключающееся в том, что мы можем возвращать множество ресурсов в простом запросе, поэтому вместо выполнения дополнительного запроса для получения информации о звездолетах персонажа (как в традиционном REST API) мы можем просто добавить звездолеты в конец запроса наших персонажей. С помощью одного простого запроса мы можем получить целый массив информации из различных источников, вместо того, чтобы выполнять несколько отдельных вызовов API. #GoJamStack
Итак, ваш файл index.js теперь должен выглядеть так, с добавленным запросом:
Теперь, когда мы получили наш запрос, мы рассмотрим наш файл index.js из предыдущего, и я объясню.
Сначала мы привязываем данные, полученные API, к нашему шаблону:
const {swapi: { allFilms, allPersons }} = this.props.data;
Затем мы передаем эти привязки данных нашему компоненту FilmList:
<FilmList films={allFilms} />
И CharacterList:
<CharacterList characters={allPersons} />
Как вы здесь заметите, наши предыдущие привязки к результатам allFilms и allPersons теперь используются как атрибуты «фильмы» и «персонажи» для компонентов списка, которые мы создали ранее.
Мы также используем следующие 2 блока, чтобы показать причудливый фон с мерцающими звездами в свете нашей темы "Звездных войн".
<div className="stars"></div> <div className="twinkling"></div>
Теперь, когда мы извлекаем данные SWAPI с помощью GraphQL, если вы выполнили console.log () allFilms и allPersons, вы должны увидеть в консоли следующие данные JSON:
Это означает, что наш запрос GraphQL к SWAPI выполнен успешно!
Вы видели, что из index.js мы передаем данные о фильмах и персонажах в FilmsList и CharacterList. Ниже показано, как выглядит наш компонент FilmsList. Здесь мы просто получаем реквизиты карточки из родительского компонента (index.js) и создаем с его помощью новый массив компонентов FilmCard, а затем отображаем карточки внутри ‹ul› ‹/ul›.
То же самое и для нашего компонента CharacterList.
В нашем компоненте FilmCard мы просто отображаем информацию, полученную из API:
И в компоненте карты персонажа мы сделаем то же самое для информации, связанной с персонажем:
Теперь у нас должен быть работающий локальный веб-сайт, который запрашивает SWAPI для фильмов и персонажей «Звездных войн», передает эти результаты в компонент списка, который, в свою очередь, просматривает все фильмы и всех персонажей для создания компонентов карты, отображающих информацию об указанных фильмах и персонажах.
Этот проект можно значительно расширить, как упоминалось ранее, существует целый ряд другой информации, связанной со «Звездными войнами», которую мы можем запросить и показать, и мы даже можем посмотреть на динамическое создание страниц из API. Но на этом мы остановимся и создадим производственную версию нашего сайта, которая будет использоваться для создания статических страниц.
Полную версию этого проекта можно увидеть по адресу: https://github.com/andrewsmith1996/gatsby-js-star-wars-app
Шаг 4 - Создание для производства
Теперь, когда наш сайт готов, мы создадим его для рабочей среды.
Сначала мы остановим нашу службу разработки и запустим следующую команду:
gatsby build
Затем мы можем просмотреть наш производственный сайт локально, чтобы дважды убедиться, что все в порядке:
gatsby serve
Теперь у нас есть производственная сборка нашего сайта Gatsby, готовая к запуску.
Чтобы доказать, насколько быстрыми являются сайты Gatsby, мы проведем аудит Google Lighthouse, который предоставит нам некоторую информацию о скорости и производительности страниц. Google рекомендует использовать это как способ оценки производительности PWA.
Откройте сайт в режиме инкогнито в Google Chrome, перейдите на вкладку «Аудит» и нажмите «выполнить аудит».
После завершения аудита вы должны увидеть следующую статистику о нашем сайте:
Вышеприведенная статистика действительно показывает, насколько хорошо работает Gatsby и насколько быстро он может работать за счет возврата только статического контента, что в конечном итоге соответствует нашей тенденции к высокопроизводительной веб-производительности. Особенно с учетом того, что мы выполняем вызовы API к внешней службе во время выполнения.
Заключение
Итак, мы создали наш образец приложения в Gatsby и убедились, насколько мощным, быстрым и эффективным может быть статический сайт и как его можно создать с помощью минимального кода и настройки.
Мы увидели, как React можно использовать для поддержки аспекта создания одностраничного приложения и как GraphQL может быть действительно элегантным решением с точки зрения запроса данных для вашего приложения. Gatsby.js - не единственный генератор статических сайтов, есть Jekyll, Hugo и Gridsome (для Vue.js), о которых люди хорошо отзываются. Но Gatsby.js - отличный выбор для создания суперэффективных и чрезвычайно быстрых сайтов сразу же, а также возможность расширения Gabsty с помощью плагинов, широкий спектр источников данных, из которых Gatsby может извлекать данные, и возможность динамического создания страницы из данных с помощью всего нескольких строк кода с использованием его createPage API действительно сделали его лучшим генератором статических сайтов.
Генераторы статических сайтов, несомненно, будут продолжать расти, и по мере появления тенденции к сверхвысокой веб-производительности с такими приложениями, как PWA и бессерверные системы, и JAMstack становится все более и более популярным в области веб-разработки, мы собираемся переместить в новую эру сверхбыстрых, ориентированных на производительность и заботящихся о безопасности клиентских приложений, которые предлагают отличные возможности как для пользователей, так и для разработчиков.
Использованная литература:
2: https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale
