Главное Свежее Вакансии Образование
😼
Выбор
редакции
5 968 20 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Когда Gatsby заменит WordPress: интервью с Михаилом Новиковым

Gatsby — не просто генератор статических сайтов. Это амбициозный проект, создатели которого замахнулись на долю WordPress на рынке CMS. Вокруг Gatsby сейчас шум и хайп в блогосфере и соцсетях, поэтому мы решили не отставать. Пообщались с Михаилом Новиковым, Staff Software Engineer, Core Team Gatsby.

Code Basics — платформа для бесплатного изучения основ программирования от создателей «Хекслета». Чтобы делать классные образовательные программы, команда «Хекслета» следит за тенденциями в отрасли. Так мы помогаем студентам идти в ногу с рынком.

Сегодня предлагаем аудитории интервью с представителем интересного и перспективного проекта: генератора статических сайтов Gatsby. Пообщались с Михаилом Новиковым, Staff Software Engineer, Core Team Gatsby, о технологиях, бизнесе Gatsby и перспективах рынка систем управления контентом.

Дмитрий Дементий: Михаил, добрый день. Расскажите, пожалуйста, о себе: кто вы, чем занимаетесь?

Михаил Новиков: Приветствую читателей. Меня зовут Михаил Новиков, работаю в Gatsby. Развиваю здесь opensource-проекты, занимаюсь GraphQL. Живу в Хельсинки, организовываю конференции React Finland и GraphQL Finland. Управлял стартапом Reindex, но сейчас сконцентрировался на работе в Gatsby.

Михаил Новиков, Staff Software Engineer, Core Team Gatsby

Д.Д.: Расскажите, пожалуйста, о Gatsby в двух словах.

М.Н.: Gatsby — фреймворк, написанный на React. Это генератор статических сайтов, с помощью которого можно создавать полноценные веб-приложения.

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

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

Д.Д.: Gatsby — генератор статических сайтов, написанный на React. Зачем понадобился ещё один генератор, если есть Jekyll, Hugo и другие неплохие инструменты?

М.Н.: Во-первых, до Gatsby не было генератора сайтов на React. Сейчас Gatsby пользуется популярностью в React-сообществе, этот генератор активно используют фронтенд-разработчики.

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

Д.Д.: Gatsby сейчас активно развивается, вижу вокруг него информационную активность и даже хайп. В чём особенность этого инструмента?

М.Н.: Да, действительно, сейчас многие разработчики и представители CMS хотят работать с Gatsby. Поэтому вокруг инструмента началась информационная активность.

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

Ещё одна особенность — Gatsby с помощью готовых плагинов умеет собирать данные из разных источников. Это могут быть CMS или файловые системы. Благодаря GraphQL Gatsby может одновременно работать с несколькими источниками, и это не влияет на perfomance сайта.

Д.Д.: Gatsby поддерживает PWA «из коробки». То есть созданный с помощью Gatsby сайт по умолчанию является прогрессивным веб-приложением. Можете рассказать об этом? Какие преимущества получают владельцы сайтов и посетители благодаря PWA?

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

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

Д.Д.: Gatsby работает с GraphQL. Расскажите пожалуйста, какие преимущества это обеспечивает?

М.Н.: GraphQL обеспечивает интерфейс для получения данных из разных источников. Благодаря этому Gatsby удобно использовать с разными источниками данных, в том числе с так называемыми headless CMS. То есть работать с контентом можно в Contentful или в том же WordPress, а рендеринг обеспечивает Gatsby.

Д.Д.: Gatsby — проект с открытым исходным кодом. Это бизнес-проект или всё-таки некоммерческий проект? Если бизнес-проект, то можете рассказать о бизнес-модели?

М.Н.: Да, ядро Gatsby — opensource-проект, так будет всегда. Gatsby Inc — коммерческая организация. Мы предоставляем сервисы для тех, кто использует Gatsby. Например, Gatsby Preview — инструмент для контент-менеджеров.

Д.Д.: Читал, что Кайл Мэтьюз, основатель Gatsby, однажды назвал Gatsby убийцей WordPress. Это серьёзное заявление или шутка? Gatsby правда хочет «откусить» долю рынка у WordPress и стать топовым инструментом для создания сайтов? На WP работает треть сайтов в интернете и две третьих сайтов на CMS.

М.Н.: Конечно, пока это скорее шутка. Но у команды Gatsby действительно серьёзные амбиции, и мы хотим стать популярными. Ставим высокие цели, и если получится стать такими же популярными, как WordPress, будем рады.

Д.Д.: WordPress одновременно простой и функциональный. Чтобы разобраться с ним, не нужны какие-то специальные знания и сверхспособности. В то же время это универсальный движок, на котором можно сделать всё — от личного блога до корпоративного сайта или интернет-магазина.

Gatsby всё-таки не для всех. Не каждый рядовой пользователь захочет устанавливать Node.js, разбираться с Markdown’ом. Не все понимают, что это за surge.sh и GitHub Pages, на которых можно задеплоить сайт на Gatsby за 1 минуту. То есть чтобы Gatsby серьёзно претендовал на долю рынка WP, ему надо стать таким же простым. Можете прокомментировать мои рассуждения?

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

Первый шаг — хотим стать удобными для контент-менеджеров. Создать инструменты, которые пользователь без бэкграунда в программировании сможет использовать для публикации и управления контентом. Для этого мы выпустили Gatsby Preview, который позволяет видеть изменения на сайте, когда контент-менеджер редактирует публикации в CMS.

Второй шаг — мы двигаемся в сторону большей доступности для рядового пользователя. Хотим, чтобы он без технических знаний мог создать сайт на Gatsby.

Д.Д.: Чем Gatsby лучше бойлерплейта Create React App? Зачем человеку пользоваться генератором сайтов на React вместо React?

М.Н.: Create React App предоставляет отличную основу для создания приложения на React, но если нужны какие-то продвинутые фичи, это всё надо делать самому. Gatsby предоставляет многое по умолчанию, например, высокую производительность из коробки. Мы постоянно работаем над поддержкой в браузерах, добавляем новые фичи. То есть с Gatsby вы сразу получаете функциональный сайт, а с Create React App только среду для создания сайта.

Д.Д.: На сайте Gatsby есть большой каталог тем или шаблонных сборок. Здесь есть сайты-портфолио, блоги, корпоративные сайты и так далее. Эти темы делает сообщество. Как Gatsby контролирует безопасность и качество этих сборок?

М.Н.: Некоторые темы делает сообщество, некоторые делаем мы сами. Пока у нас нету зафиксированных стандартов и механизмов контроля, поэтому ориентируемся на обратную связь. Жалоб на темы, созданные сообществом, не было.

Д.Д.: Представьте, что к вам обратился знакомый юрист, художник или строитель. Он хочет сделать себе самостоятельно небольшой сайт-визитку и спрашивает вас, каким инструментом воспользоваться. Вы бы порекомендовали человеку разобраться с Gatsby, или всё-таки отправили бы его работать с более простыми инструментами?

М.Н.: Если этот человек хочет или планирует изучать программирование, порекомендую ему Gatsby. Если он не планирует развиваться в этом направлении, пока им будет удобнее работать с более простыми инструментами.

Д.Д.: Как индексируются в поисковиках сайты на Gatsby?

М.Н.: Сайты отлично индексируются. Gatsby генерирует статичный сайт, браузер и поисковый робот видят HTML. Поэтому с индексацией нет никаких проблем.

Д.Д.: Когда я впервые сделал тестовый блог на Gatsby и показал его знакомым, даже далёкие от веб-разработки люди заметили невероятную скорость загрузки страниц. Это одно из основных преимуществ Gatsby. А для каких проектов это важнее всего? Возможно, стоит рекомендовать генератор тем, чья аудитория пользуется смартфонами и мобильным интернетом?

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

Д.Д.: Gatsby написан на React и пользуется популярностью в сообществе React. А насколько интересен этот инструмент специалистам, которые изучают PHP или Python? Им удобнее пользоваться фреймворками, написанными на «родных» языках, или всё-таки Gatsby подходит всем?

М.Н.: Мы сейчас активно работаем с сообществом WordPress, многие разработчики сотрудничают с нами. Это же касается и представителей других известных движков. Те же PHP или Python-разработчики могут использовать Gatsby для фронтенда, а бэкенд делать на привычных языках или фреймворках.

Д.Д.: Чего пока не хватает Gatsby? Есть ли какой-то пробел или пробелы, которые команда пока не закрыла? Что нужно, чтобы Gatsby выстрелил, и нём узнали так же, как о WordPress?

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

Д.Д.: Я видел, что Gatsby активно нанимает специалистов. Возможно, это заинтересует кого-то из наших выпускников или продвинутых студентов. Подскажите пожалуйста, кого вы ищете, какие требования предъявляете к кандидатам?

М.Н.: Да, мы активно нанимаем людей. Не требуем опыта работы с Gatsby. Нам важнее опыт работы с opensource-проектами. Прямо сейчас нужны специалисты в области accessibility, GraphQL, JavaScript, Node.js, React.

Д.Д.: Как работает команда Gatsby? Это распределённый коллектив? Как вы общаетесь друг с другом, как планируете рабочие задачи?

М.Н.: Да, это распределённый коллектив. У нас работают специалисты из США и Европы. Общаемся с помощью Skype, регулярно синхронизируемся. Раз в месяц проводим общий созвон. Три раза в год встречаемся лично, компания оплачивает перелёты и проживание.

Д.Д.: «Хекслет» — образовательная платформа, поэтому нашим читателям будет интересно получить рекомендации от опытного разработчика. Поделитесь пожалуйста советами, лайфхаками, своим видением: как стать крутым специалистом и попасть в крутой проект, такой, как Gatsby?

М.Н.: У каждого свой путь в разработку, каждый учится по-своему. Поэтому здесь сложно дать универсальный рецепт. Лично я рано пришёл в React и GraphQL, стал известным в сообществе. Много общался, посещал конференции. Это сыграло роль в моём развитии и карьере.

Д.Д.: Спасибо за интересный разговор!

М.Н.: Удачи читателям!

Оригинал статьи опубликован в блоге «Хекслета».

-2
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Alex Weiss
Не открывается ваш проект. Хабраэффектом накрыло?)
Ответить
Code Basics
Бесплатные практические уроки программирования от создателей «Хекслета»
Дмитрий Дементий
Проверил, открывается в данный момент. Каким браузером вы пользуетесь?
Ответить
Alex Weiss
Открылся. Браузер не при чем, там не было подключения к серверу, коннект обрывался по таймауту.
Ответить
Code Basics
Бесплатные практические уроки программирования от создателей «Хекслета»
Дмитрий Дементий
Спасибо. Возможно, что-то обновляли.
Ответить
Valeriy Kochiev
По-моему пример демо сайта не очень удачный. Есть вариант наполнить его контентом , закинуть гугл метрику в футер, чат кнопку добавить? и тогда посмотрим на скорость загрузки
Ответить
Code Basics
Бесплатные практические уроки программирования от создателей «Хекслета»
Дмитрий Дементий
Это демо дефолтной темы Gatsby. На сайте Gatsby есть разные темы. Я лично пробовал разные. Просто летает. Более того, сайты на Gatsby работают офлайн, то есть без интернета. Магия PWA или прогрессивных веб-приложений.
Ответить
Valeriy Kochiev
Скажите пожалуйста как будет грузится страница из поисковой выдачи ? Ведь это важно , эти миллисекунды.

Пока что ощущение , что эти фоновые подгрузки только замедлят первую загрузку , пришедшего из поисковика .
Ответить
Code Basics
Бесплатные практические уроки программирования от создателей «Хекслета»
Дмитрий Дементий
Всё грузится моментально. Сайты на Gatsby по сути — SPA (single page application) на React. Когда загружается главная страница, в фоне Gatsby загружает данные других страниц, на которые есть ссылки с главной. Но грузит не страницы полностью, а информацию о разнице, необходимую для отрисовки новой страницы. В итоге всё летает. Скорость — главный конёк Gatsby, даже визуально без измерений заметно, насколько быстро он работает. Посмотрите хотя бы сам сайт Gatsby, он тоже на Gatsby сделан ))
Ответить
Valeriy Kochiev
Хм действительно , сделал замеры самой тяжелой страницы вашего сайта https://www.gatsbyjs.org/showcase/
на https://tools.pingdom.com/
в сравнении с сайтами типа Backcountry.com, wallmart.com, wordress.org
скорость в 2 раза выше около 500 мс против 900мс и 1.1 сек.

какая будет поддержка по плагинам и тп? не получистя ли так как получилось у Nokia на win mobile ? ;)
Ответить
Code Basics
Бесплатные практические уроки программирования от создателей «Хекслета»
Дмитрий Дементий
Валерий, это не наш сайт :) Это проект Gatsby, мы взяли интервью у сотрудника Gatsby Михаила Новикова.

Ядро Gatsby — опенсорс. Плагины и темы делает в основном сообщество. Проект быстро развивается. Что будет дальше? Я не знаю.
Ответить
Invorica
Единая платформа финансирования бизнеса на лучших условиях
Мурат Ошроев
https://www.gatsbyjs.org в сафари и хроме не открывается. на 00:22
вот такой вот, ваш гетсби
Ответить
Code Basics
Бесплатные практические уроки программирования от создателей «Хекслета»
Дмитрий Дементий
Проверил, открывается. Gatsby к сожалению не наш :) Мы взяли интервью у представителя Gatsby. Но я лично пользуюсь этой штукой уже полгода. Штука правда крутая.
Ответить
Иван Суковатый
У меня в Хроме тоже не открывается
Ответить
Code Basics
Бесплатные практические уроки программирования от создателей «Хекслета»
Дмитрий Дементий
Очень странно, Иван. Может быть какие-то работы у них. Я снова открыл спокойно.
Ответить
Виктор Кузинский
Через Хром зашел, грузился сайт секунд 20 не меньше
Ответить
Code Basics
Бесплатные практические уроки программирования от создателей «Хекслета»
Дмитрий Дементий
Виктор, куда зашли? На Code Basics или на Gatsby?
Ответить
Дмитрий 18312
Лошары ))) не открывается ни основной, ни демо-сайт. На Вордпресс они замахнулись )) рукожопы )
Ответить
Code Basics
Бесплатные практические уроки программирования от создателей «Хекслета»
Дмитрий Дементий
Дмитрий, я не знаю, в чём дело, у меня всё открывается. Но вы не первый, кто говорит о проблеме. При случае спрошу у Gatsby. Вот эта демка открывается? https://gatsby-starter-hero-blog.greglobinski.com/
Ответить
Alex Naghtigall
У меня тоже не открылось в основном браузере. Открылось только через VPN. Похоже IP-адрес заблокирован у некоторых инет-провайдеров.
Ответить
Code Basics
Бесплатные практические уроки программирования от создателей «Хекслета»
Дмитрий Дементий
Спасибо. Похоже, действительно где-то блокируют.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.