Gridsome - это генератор статических сайтов на базе Vue.js для создания быстрых и безопасных веб-сайтов, которые можно развернуть где угодно. Я использовал Gridsome для своих проектов и обнаружил, что результаты просто феноменальны! Звучит интересно? Читайте и попробуйте создать свой быстрый и динамичный веб-сайт прямо из коробки.

Введение

В современную цифровую эпоху 20-х годов создание веб-сайта никогда не было таким простым. Javascript печально известен своим множеством библиотек и фреймворков, настолько, что они даже сгруппированы в стеки, самые популярные из которых - MEAN & MERN. Но есть одна стопка, которая уникальна и неслыханная - это стопка JAM.

Стек JAM означает Javascript, API и разметку, в основном стек, ориентированный на статические сайты. Gridsome - один из таких фреймворков, который включает в себя JAMstack. Это генератор статического сайта, который предварительно создает HTML-страницы с предоставленным источником данных, поэтому ему не нужно выполнять запросы во время выполнения. И, наряду с некоторой производительностью и внутренней SEO-оптимизацией, это делает ваш сайт чрезвычайно быстрым.

Особенности использования Gridsome

Gridsome в комплекте с исключительными функциями делает его одним из самых востребованных генераторов статических сайтов. Некоторые из этих функций включают:

  • Быстрая генерация статической страницы
  • Плагины источников данных (здесь вы избалованы выбором)
  • Поддержка прогрессивного изображения
  • Автоматическая маршрутизация страниц
  • Плагины (и растущее сообщество разработчиков, чтобы сделать это!)
  • Оптимизация для SEO и многое другое!

Моя история

Документация - это первое, с чем сталкивается разработчик при изучении нового фреймворка, и у Gridsome была одна из самых удобных для разработчиков документации, которую я читал, и она полюбила его с первого взгляда (каламбур). Настолько, что мне очень захотелось опробовать этот новый фреймворк и, следовательно, создать свой собственный простой профильный веб-сайт.

Хотя я начал на нем простой веб-сайт, я хотел протестировать его на некоторых реальных проектах. Открытие Gridsome произошло в то время, потому что к нам обратился клиент, Climber из EdTech Industry.

Пример использования - проблема и решение

Climber (их продукт: MyCaptain) - это компания, специализирующаяся на технологиях и технологиях, которая использует обучение, давая возможность молодым специалистам в своих областях в качестве капитанов проводить эти семинары. Их веб-сайт демонстрирует и продает их семинары и дает пользователям возможность проявить интерес или зарегистрироваться. Их существующий веб-сайт был медленным для маркетингового веб-сайта, не обладал богатым набором функций, и его было труднее поддерживать, учитывая частые изменения в списке семинаров. После определенного момента, когда компания масштабируется, такие проблемы необходимо исправлять. Их требования заключались в разработке быстрого, многофункционального, настраиваемого и обслуживаемого веб-сайта, который был бы оптимизирован для SEO, и в довершение ко всему, время его загрузки должно составлять чуть менее 2,5 секунд! Я был взволнован, глядя на требования, потому что знал, что пришло время исследовать Gridsome. У MyCaptain были точные требования, которые Gridsome предлагал из коробки! Взволнованные, мы пошли вперед.

Процесс

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

Вишенка на торте заключается в том, что мы использовали AWS Amplify для размещения этого приложения. Почему AWS Amplify? потому что он дает вам возможности встроенной CDN Amazon, обеспечивая при этом беспрепятственный способ развертывания вашего приложения с помощью рабочего процесса на основе git, что было именно тем, что нам было нужно для этого приложения.

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

Результаты

GTmetrix

Google Page Speed

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

Последние мысли

Довольно удивительно, правда? Прежде чем вы сделаете все возможное и создадите веб-сайт на этом фреймворке, позвольте мне сказать вам, что это были не стандартные результаты, нам пришлось реализовать несколько улучшений самостоятельно на основе того типа контента, который был на веб-сайте MyCaptain, например, встраивание видео с YouTube, измененные и унифицированные изображения и быстрая загрузка изображений, которые не являются статичными (следовательно, к ним не применяется магия Gridsome), ленивая загрузка всего дерьма, которое не требуется для первой отрисовки (GTM, Chatbot, Hubspot, и т. д.), имея минимальный код onMount для сокращения времени выполнения Javascript, особенно на мобильных устройствах. Но даже после этой чрезмерной оптимизации, то, что мы получаем, делая очень мало из коробки с этим фреймворком, довольно впечатляет, что определенно делает Gridsome подходящим для того, чтобы стать одной из фреймворков в вашем техническом стеке.

Вывод

Если вы хотите создавать современные статические сайты, Gridsome - ваш выбор. Благодаря поддержке настраиваемых источников данных и схеме GraphQL, объединенной с различными источниками данных, он дает мощный и гибкий способ создания современных статических сайтов. Рекламируемый как генератор статических сайтов, он также может быть полезен для создания динамических веб-сайтов путем получения динамических данных, которые требуются во время выполнения, что делает его таким же эффективным, как и любые другие Frontend Framework для небольших приложений. Области, которые могут получить наибольшую выгоду от его приложений, - это целевые страницы, страницы продуктов, рекламные кампании, небольшие веб-сайты электронной коммерции с менее чем 1000 продуктами, блоги и портфолио, документация. Gridsome гарантирует, что взаимодействие с пользователем всегда будет наилучшим, благодаря таким функциям, как:

  • Более быстрая загрузка страницы
  • Отличное SEO из коробки
  • Передовое управление изображениями.

Крики

Зайдите на сайт EdTech MyCaptain, который мы создали на Commutatus, и дайте нам знать, что вы о нем думаете. Если вы хотите, чтобы ваш веб-сайт был построен с использованием Gridsome, вы можете связаться с нами.

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