Почему вы должны использовать GatsbyJS для создания статических сайтов

1656486498 pochemu vy dolzhny ispolzovat gatsbyjs dlya sozdaniya staticheskih sajtov

от Ajay NS

1*c4wjZPrF_3AnRMUZd5tlpw

Гэтсби со временем растет, и я рад видеть его использование на огромном количестве сайтов, таких как маркетинговые сайты, блоги и созданные статические страницы.

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

Эта статья пытается заставить вас понять, почему она приобрела популярность. Если вы используете его, вы получите лучшее представление о функциях, которые можно использовать для еще лучшего опыта разработки.

Заметьте, что это то, что работает для меня и я делюсь только своими взглядами. Я ни в коем случае не говорю вам, что ваша текущая настройка, которая работает для вас, устарела, но я просто стараюсь поделиться тем, как Гэтсби был отличным для меня.

Что такое Гэтсби?

Это еще один генератор статических сайтов как Hugo, Jekyll и так далее. Итак, что делает его особенным? Почему мы говорим об этом?

Gatsby можно использовать для создания статических сайтов, которые являются прогрессивными веб-приложениями, соответствуют последним веб-стандартам и оптимизированы для высокой производительности. Он использует новые и популярные технологии, включая ReactJS, Webpack, GraphQL, современный ES6+ JavaScript и CSS.

1*yCPN-lvsZ7k2WcRsPQYjqA
GraphQL + React + Webpack = ❤

Это означает, что многие разработчики могут подключиться без особой кривой обучения, поскольку они уже знают или по крайней мере использовали одну часть этого технологического стека, на котором построен Gatsby.

Кроме того, я хотел бы добавить, что я заметил, работая с разработчиками, которые не имели представления о новейших фреймворках и библиотеках и просто привыкли к традиционному способу создания сайтов с файлами HTML, JavaScript, CSS.

Подход к развитию

С одной стороны, у нас есть пользователи, ожидающие плавной работы в Интернете, как в приложении. Другая сторона – это разработчики, привыкшие к сайтам, имеющим страницы, каждая из которых является файлами HTML или, возможно, используют какие-то шаблоны – на самой основе. сайты как страницы с внутренними ссылками.

Если вы начинаете работу с любым из последних фреймворков, рассмотрим пример React. Вы можете запустить приложение с минимальной конфигурацией с помощью create-react-app. Но если вы посмотрите на структуру проекта, это может не иметь большого смысла для новичков или даже некоторых разработчиков, приходящих из других технологических стеков. Узор значительно отличается от того, что вы видели раньше.

Это потому, что без дополнительной настройки они ориентированы на создание одностраничных программ, SPA. Чтобы добавить маршрутизацию, страницы или оптимизацию для SEO, понадобится больше инструментов и конфигурации.

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

Особенности

Компоненты

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

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

Атомарный дизайн является подходом, который является хорошим способом обработки сложных интерфейсов, и мы могли бы применить его здесь с компонентами React. У Брэда Фроста есть удивительная публикация в блоге, в которой описывается, что это такое и как это работает.

Комплектация Webpack и новейшие инструменты

Webpack создает оптимизированные, минимизированные пакеты HTML, JavaScript и CSS. Когда он предварительно настроен с помощью Babel и других плагинов, он позволяет использовать новейшие ES6+ JavaScript и GraphQL.

Вишенка на торте: у нас встроена горячая перезагрузка и разделение кода, что обеспечивает лучший опыт разработки и лучшую производительность сайта. Это направлено на то, чтобы заставить разработчика писать минимальную конфигурацию инструментов и сосредоточиться на фактической разработке сайта.

Плагины Gatsby, стартеры и пакеты React

Вы можете использовать любые пакеты, которые вы уже использовали с NPM, особенно React, поскольку он построен на том же. Но это еще не все: существует большое количество плагинов, стартеров и трансформаторов, постоянно растущих от сообщества Гэтсби.

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

Используя их, Gatsby можно расширить с помощью дополнительных функций. Например, несколько примеров включают адаптивные изображения, офлайн-функционал, исходные данные из CMS и форматы разметки данных, добавление посторонних сервисов (Google Analytics и т.п.) и т.д.

Заключение

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

Gatsby поддерживает SCSS, библиотеки CSS-in-JavaScript, что позволяет вам лучше и легко управлять стилями. Даже настройки для этого достаточно легко справиться с установкой плагина или пакета.

Соответствующие изображения

Изменение размера изображений для реагирования на разных устройствах, отложенная загрузка, использование srcsets и picture…Уже звучит скучно, когда это нужно делать вручную.

1*yhkSz2qqhyRZ-HpATSQx6Q
Различные версии одного и того же изображения для отзывчивости

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

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

Опыт, похожий на приложение

Благодаря повышению производительности и функциям, улучшающим работу пользователя, Gatsby стремится получить полноценный опыт, похожий на приложение, заимствованное у полных PWA. Нет перезагрузок между страницами при использовании gatsby-link вместо гиперссылок, и программа все еще выглядит гладкой и производительной благодаря отложенной загрузке изображений и разделению кода.

Для сайтов, соответствующих стандартам, которые вы также хотите быть производительными, у нас есть множество дел и руководств, которых следует придерживаться: минимизация и группировка, кэширование браузера и асинхронная загрузка сценариев или файлов и т.д. При работе с фреймворком, таким как React, у вас есть больше вопросов, о которых нужно волноваться, даже если это решает несколько проблем: разделение кода, SEO, маршрутизация, если нужно, адаптивные изображения, и список можно продолжать.

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

Экосистема Гэтсби

плагины

Gatsby был создан, чтобы быть расширяемым и гибким – использование плагинов является одним из способов сделать это таковым. Их можно непосредственно устанавливать и использовать для различных функций, включая перевод сайта в автономный режим, добавление аналитики Google, добавление поддержки встроенных файлов SVG – список почти бесконечен.

Из разных типов плагинов Gatsby, плагины gatsby-source, в частности, получают данные из локального или удаленного источника и позволяют использовать их через GraphQL. Такими источниками могут быть CMS, такие как WordPress, Drupal, Plone, локальная расценка, XML или файлы, базы данных, API и форматы данных, как JSON, CSV.

Это означает, что почти все можно использовать в качестве источника для работы с Гетсби и создания статических сайтов.

GraphQL – это язык запросов для API, который работает на основе философии простого запроса именно того, что вам нужно. В отличие от REST API, вы не ищете конечные точки, чтобы предоставить ваши данные и обработать их из предоставленной от них структуры, а спрашиваете то, что вы хотите и непосредственно используете эти данные. Более подробно о том, как это работает и как его использовать, читайте в их документах.

После установки некоторые плагины можно использовать сразу, просто указав их gatsby-config.js другие настроены с помощью объекта параметров.

Просмотрите библиотеку плагинов Gatsby, в ней уже достаточно большое количество плагинов, и активное сообщество добавляет больше.

Стартеры

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

Плагины Gatsby часто имеют соответствующие стартовые элементы, которые показывают или служат быстрым способом начать работу с ним. Они также действуют как справочник, охватывающий все функции и демонстрирующий конфигурации используемого плагина.

1*0EB7BqFJb70XAGAqt0LgRw
Библиотека Gatsby Starter

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

Статические сайты

Во-первых, давайте посмотрим, как Гэтсби работает внутри. В отличие от SPA, которые посылают запросы API при запуске программы, Gatsby извлекает все данные, включая источники данных из локальных файлов, при составлении. Все эти данные используются для создания статических файлов HTML, JavaScript и CSS. Благодаря этому статическому рендерингу все работает быстрее.

1*8JLlG_T6onoeW2mVjVT_Gw
Как работает Гэтсби

Это было много о Gatsby, его экосистеме и о том, как она помогает создавать удивительные статические сайты. Но зачем нам статические сайты? Разве это не звучит как шаг назад от динамических?

  • Они не требуют сложной настройки сервера с базами данных, обслуживания и проблем с масштабированием.
  • Данные полностью защищены. CMS и API имеют частные функции, но данные все еще находятся на сервере, который можно использовать. Gatsby берёт только необходимые данные для отображения из источника, а частные или защищенные данные даже не присутствуют в окончательном сборнике. Что самое безопасное, что он может получить.
  • Вместо того, чтобы полагаться на серверы для динамического создания страниц, предварительно воспроизводите все из них во время сборки и используйте CDN для невероятно быстрой и бесперебойной работы для пользователей со всего мира.
  • Гэтсби выполняет статический рендеринг. Благодаря этому содержимое доступно в формате HTML и оптимизировано для поисковых систем, не долго начальной загрузки.

Попробуй!

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

Может быть, вам пора опустить руки и оглянуться вокруг!

Благодаря CodeSandbox мы можем сделать это сразу в самом браузере.

Если вы хотите запустить локально, вам следует проверить gatsby-cli. Это самый быстрый и простой способ начать работу. У них также есть удивительная документация и учебные пособия, чтобы вы погрузились в разработку сайтов на gatsbyjs.org.

Надеюсь, вам понравилась эта статья, и вы обнаружили, что она стоит внимания. Вы можете просмотреть все мои проекты на Github или Dribbble и не стесняйтесь обращаться ко мне в Twitter!

Вы также можете ознакомиться с другими моими статьями:

Прогрессивные веб-приложения: преодоление разрыва между веб- и мобильными приложениями
Если вы не жили под камнем, вы наверняка слышали о PWA или прогрессивных веб-приложениях. Это очень актуальная тема…medium.freecodecamp.orgОтчет о хакатоне: что вы можете закодировать за 30 часов? Достаточно много!
Что можно построить через 30 часов подряд? Как группа студентов второго курса колледжа с растущим портфолио работы…medium.freecodecamp.orgACM Месяц кода 2k17: Строительство Moodify
Март был достаточно продуктивным месяцем, и все благодаря этому великому событию, организованному Ассоциацией вычислительной техники, NIT…hackernoon.com

Добавить комментарий

Ваш адрес email не будет опубликован.