Smashing Podcast Эпизод 20 с Марси Саттон: Что такое Гэтсби?

Сегодня мы говорим о Гэтсби. Что это такое и как оно вписывается в ваш стек веб-разработки? Дрю Маклеллан разговаривает с экспертом Марси Саттон, чтобы выяснить это.

Показать примечания

• Гэтсби
• Марси в Твиттере
• персональный сайт Марси

Еженедельное обновление

• «Сделайте свои сайты быстрыми, доступными и безопасными с помощью Google»
  Дион Алмаер
• «Понимание разработки плагинов в Гэтсби»
  Алим Исиака
• «Создание крошечных настольных приложений с помощью Tauri и Vue.js»
  Кельвин Омерешон
• «Устранение паники из предупреждений о доставке и запасах электронной коммерции»
  Сюзанна Скакка
• «Переходы CSS в Vuejs и Nuxtjs»
  Тими Омоени

Стенограмма

Дрю Маклеллан: она ведущий инженер отдела по связям с разработчиками в Gatsby. Ранее она работала над библиотекой тестирования доступности axe-core с открытым исходным кодом, а также работала инженером по доступности в Adobe. Она увлечена улучшением Интернета для людей с ограниченными возможностями и часто говорит об этом на конференциях. В 2016 году О'Рейли вручила награду своей веб-платформе за работу в области доступности.

Дрю: Она также является одним из руководителей организации специальных встреч Seattle и NW Tech Women Meetups в местном регионе. Итак, мы знаем, что она опытный инженер и эксперт по доступности. Но знаете ли вы, что она хочет отправить его в бочку с водопадом Анхель? Мои потрясающие друзья, пожалуйста, поприветствуйте Марси Саттон.

Марси Саттон: Привет.

Дрю: Привет. Марси. Как твои дела?

Марси: Я разбиваю. Как твои дела?

Дрю: Я очень хорош. Спасибо. Я хотел поговорить с вами сегодня о Гэтсби. Потому что это всплыло в разговоре, который у меня был в предыдущем выпуске об изучении React с Миной Маркхэм. Я понял, что рискую поступить как типичный мужчина в Интернете, высказывая мнение о чем-то, с чем у меня не было прямого опыта. Так что у нас в Smashing все не так.

Дрю: И я хочу убедиться, что мы должным образом освещаем Гэтсби. И что может быть лучше, чем поговорить с кем-то, кто знает это вдоль и поперек. Итак, если предположить, что, возможно, я слышал имя Гэтсби. Но я понятия не имею, где он вписывается в стек при создании веб-сайта. Что такое Гэтсби.

Марси: Гэтсби — это генератор веб-сайтов, в настоящее время он использует React. Но он создаст для вас статический веб-сайт, который затем превратится в полноценное веб-приложение React. Таким образом, вы действительно получаете лучшее из обоих миров с быстрыми сборками, которые вы компилируете HTML-файлы, которые будут быстро загружаться для пользователей. И затем вы получаете все эти улучшения с помощью JavaScript, чтобы создавать действительно интерактивные динамические веб-приложения.

Марси: Итак, это действительно захватывающее пространство. И я работал над изучением документации, а теперь в команде Devrel, я сосредоточен на том, чтобы сделать ее настолько хорошей, насколько это возможно, зная о проблемах доступности с JavaScript. и просто пытаюсь исправить это изнутри.

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

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

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

Марси: Но для вещей, которые используют много интерактивности, таких как доступные интерфейсы, это хорошее место. Что касается меня, мне действительно нравится, что JavaScript всегда доступен для меня, и моя разметка просто находится в хорошем месте. Я знаю, что это вопрос предпочтений, хотите ли вы, чтобы ваш HTML, ваш JavaScript и ваш CSS были аккуратно связаны, и есть место для вариаций в построении Гэтсби.

Марси: Вам не всегда нужно использовать что-то вроде CSS и JS. Но на самом деле речь идет о том, чтобы получить всю мощь этого динамического слоя JavaScript, доступного вам во время написания вашего веб-сайта. Не нравится это дополнение в отдельном файле.

Дрю: Когда я думаю о том, как обычно работает генератор статических сайтов, я думаю о контенте, возможно, в файлах Markdown. И генератор просматривает этот контент, объединяет его с шаблонами и создает десятки, сотни, тысячи HTML-файлов, которые являются страницами вашего сайта. Когда я думаю о сайте или приложении React, я больше думаю об одностраничном интерфейсе, когда React создает интерфейсы на лету. Итак, вы говорите, что Гэтсби делает и то, и другое? Он создает все страницы, а также улучшает их с помощью JavaScript?

Марси: Это да. Gatsby будет использовать Node.js во время сборки, он будет просматривать ваши компоненты React и компилировать их в HTML-файлы. Честно говоря, когда я впервые посмотрел на Гэтсби, я не стал отключать JavaScript и подумал: «Хорошо, здесь есть другие страницы, что это?» И я был так счастлив, что Гэтсби работает именно так по умолчанию. Он создаст встроенные файлы из ваших реагирующих компонентов, и это здорово.

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

Марси: Но я была приятно удивлена ​​тем, как Гэтсби делает это по умолчанию. Таким образом, они сделали выбор в пользу создания сайтов таким образом, и мы всегда оцениваем его. Это все еще лучший способ? Что нам нужно сделать, чтобы дать нашим пользователям то, что они просят? Итак, мы проводим некоторые внутренние исследования, продолжающиеся только для того, чтобы убедиться, что Gatsby делает все возможное при создании веб-сайта.

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

Дрю: Вы упомянули производительность, а производительности уделяется большое внимание. Это определенно видно из того, как Гэтсби представляет себя. Является ли это истинной особенностью Gatsby или это просто характер веб-сайтов JAMstack?

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

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

Марси: Но это работает очень хорошо, многим людям очень нравятся их сайты с Гэтсби. Так что было интересно поработать над этим полный рабочий день и изучить все тонкости JavaScript-фреймворка, такого как Gatsby.

Дрю: Какие функции повышения производительности на самом деле использует Гэтсби для ускорения работы ваших сайтов?

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

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

Дрю: Так вот где сайт на самом деле предвидит, куда пойдет пользователь. Является ли он таким же умным, или он заранее выбирает все на странице или?

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

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

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

Дрю: Это предварительная загрузка того, что пользователи просто получают бесплатно на своем сайте. Так должны ли они делать какую-либо работу, чтобы реализовать это?

Марси: Вы получаете его бесплатно по ссылке Gatsby. Так что это компонент, который поставляется с Gatsby, и когда вы его используете, он выводит теги привязки. Итак, ваш HTML — это настоящий HTML, и таким образом вы использовали веб-платформу. Но в ваших компонентах React вы работаете напрямую с компонентом ссылки Gatsby. И у него есть все эти механизмы для… Он смотрит на то, каким будет ваш будущий HREF, на ту ссылку, куда вы хотите перейти, и он пойдет и захватит ресурсы из этой ссылки и предварительно загрузит их.

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

Дрю: Насколько тесно вы должны работать в экосистеме Гэтсби с точки зрения того, хочу ли я иметь свой собственный компонент ссылок? Это было бы совершенно нормально, я бы не стал бороться против Гэтсби, чтобы делать такие вещи?

Марси: Нет, вы можете вставлять любые компоненты, которые хотите, если они работают со средой выполнения React. Это действительно красота этого. Все, что вы можете поместить в приложение React, вы можете поместить в приложение Gatsby. Есть даже плагин pre-React. Итак, есть несколько альтернатив работе с Гэтсби. Но мне нравится, как вы можете использовать любые готовые компоненты, которые хотите использовать, или написать свои собственные.

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

Дрю: А как проходит процесс создания сайта Гэтсби, который, предположительно, представляет собой модуль узла, который можно просто установить и выполнить сборку, как с любым другим генератором статических сайтов?

Марси: Да. Существует CLI, который вы устанавливаете глобально. И я предполагаю, что вы хотите установить его глобально. Это то, что мы рекомендуем, потому что тогда вы сможете запустить его из любого каталога на вашем компьютере, но он вытащит все, что вам нужно для создания сайта Gatsby. И затем вы можете добавить, скажем, вы хотите использовать WordPress в качестве автономной CMS или какого-либо другого источника контента.

Марси: Вы можете установить пакеты, плагины, чтобы это работало, а затем интегрировать их со своим сайтом. Есть также несколько стартеров и тем, которые вы можете использовать, чтобы быстрее приступить к работе. Я использовал их, если хотел что-то протестировать или быстро запустить сайт для конкретной интеграции, такой как Drupal или prismic, или любое другое решение CMS или электронной коммерции, или что-то, что я хочу использовать.

Марси: Примеров много. Таким образом, вы не всегда работаете методом проб и ошибок, пытаясь понять это, но это своего рода строительные блоки, которые вы можете собрать и создать… Это то, что мы называем сеткой контента. Итак, вы можете использовать эти лучшие в своем роде интеграции для создания сайта вместо того, чтобы, если бы у меня был классический сайт WordPress, опыт разработки и работы с командами был бы действительно замечательным.

Марси: Но были недостатки во внешнем интерфейсе, например, как он будет работать на мобильном устройстве. Что еще? Если бы я хотел решение для электронной коммерции? Я думаю, что есть некоторые вещи, которые проще сделать в наши дни, но имея возможность выбрать любое лучшее решение, которое вы хотите для аутентификации, или что-то в этом роде, вы думаете: «Хотел бы я использовать это. ” С Gatsby вы можете объединить многие из этих вещей и сделать этот способ построения сетки контента довольно освежающим.

Марси: Особенно, когда вы все еще можете использовать такие интеграции, как WordPress, и по-прежнему работать с командами. Итак, мы очень рады этому новому способу работы, когда вы можете выбрать все технологии, которые вам нравятся или которые подходят для вашей команды.

Дрю: Одной из важных функций, которую Гэтсби активно рекламирует, является возможность извлекать данные или контент из множества различных источников. Вы упомянули такие вещи, как WordPress и Drupal, и что у вас есть. Традиционно, если бы я использовал что-то вроде Jekyll или Eleventy или что-то в этом роде, мне нужно было бы подключить это самому, чтобы взаимодействовать с API, возможно, вытащить содержимое и записать его в файлы уценки или файлы JSON, а затем заставить работать генератор. с этими файлами.

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

Марси: Я думаю, что Gatsby действительно силен в этой области, так это уровень данных GraphQL и экосистема плагинов. Итак, есть вероятность, что кто-то уже написал плагин для любого источника данных, который вы хотите создать. А если нет, то, вероятно, есть что-то близкое. Но использование GraphQL — это своего рода подработка. Слой, который делает возможными все эти интеграции, — это использование GraphQL.

Марси: Итак, есть много возможностей для того, что вы можете использовать, и мы также пытаемся упростить написание плагинов. Так что было очень приятно узнать, как написать плагин, и AST или абстрактное синтаксическое дерево, которое он создает, и как бы узнать, как все это работает, было действительно здорово. Но да, я бы сказал, есть много готовых вещей, которые вы можете взять без необходимости писать все это самостоятельно, что довольно круто.

Марси: И приятно иметь возможность использовать уценку. Скажем, ваши разработчики хотят написать уценку контента своего блога, но маркетинговая команда действительно недовольна этим, вы можете комбинировать источники контента и получать их из нескольких мест. Я видел, как люди берут что-то из других репозиториев GitHub, и они используют плагин get, чтобы таким образом извлекать контент уценки. Много гибкости.

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

Марси: Можешь, да. Итак, плагины позволяют это. А еще есть эта абстракция поверх этого, которую мы называем темами Гэтсби. И это не только код пользовательского интерфейса, это могут быть запросы GraphQL, конфигурации, которые настраивают плагин, так что это похоже на плагин с использованием, связанный вместе. И вы можете распространять эти темы через NPM.

Марси: И затем, их версия, и вы можете их получить. И весь этот API также действительно интересен для команд, которые говорят, что у вас есть несколько репозиториев, и вы хотите извлекать данные в них, было бы очень повторяться, если бы были одни и те же запросы. во всех этих репозиториях в одном и том же коде. Итак, чтобы немного подсушить и не повторяться так много. Вы можете использовать эти абстракции, называемые темами, для своего рода распространения вокруг этой логики или кода, который активирует этот исходный плагин. Итак, есть такие слои абстракций, которые вы можете построить поверх этого, и, как мы слышали, команды действительно получают много пользы прямо сейчас.

Дрю: Таким образом, тема в мире Гэтсби выглядит не так, как в случае с CMS, такой как WordPress.

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

Дрю: Да, я могу себе представить, что это приведет к довольно новаторскому использованию Гэтсби. Вы видели что-нибудь, что было, в частности, что привлекло ваше внимание, что клиенты делают это особенно творчески?

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

Марси: Я бы сказала, что это самое интересное для меня просто из-за того, что я могу себе представить, например, прошлые команды, в которых я был, где мы должны были получать контент, мы были настолько ограничены, и где этот код мог жить и насколько воспроизводимым. возможно. Итак, увидев решение, команды говорят: «О, это отлично работает». И это было даже прошлым летом, или как это было некоторое исследование некоторое время назад.

Марси: С тех пор API совершенствуется, и над темами Гэтсби работает целая команда. И я знаю, что в ближайшие несколько недель они выпустят несколько больших улучшений. Итак, я не хочу красть их славу, но есть кое-что интересное с темами. Они переработали некоторые темы блога, такие как основные темы, которые мы предлагаем от Gatsby.

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

Дрю: Вокруг Гэтсби возникает своего рода рынок.

Марси: Есть, да.

Дрю: Есть ли какое-то онлайн-обучение и тому подобное, если кто-то захочет… Если кто-то решит, что он действительно собирается попасть в Гэтсби, и ему нужно быстро этому научиться? Есть ли места, куда они могут пойти с такой информацией?

Марси: Много? да. Определенно есть сайт Gatsby Doc, gatsbyjs.org/doc. И у нас есть обучающие программы, и почти каждую неделю я провожу прямые трансляции для вещей Гэтсби. Есть множество педагогов, у которых есть материалы о Гэтсби на YouTube и различных обучающих платформах. Яйцеголовый, я думаю, что у некоторых моих товарищей по команде из Гэтсби тоже есть видео яйцеголового.

Марси: Итак, там куча всего. Я бы сказал, проверьте даты на нем, если вы найдете что-то. Мы всегда активно обновляем Gatsby Doc, некоторые из старых сторонних видео и другие вещи, которые могут проверять даты на них, потому что мы не можем отслеживать обновления каждого отдельного учебного ресурса. Трудно угнаться за собственным персоналом.

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

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

Марси: А поскольку у Гэтсби много материалов, он использует React. Таким образом, это довольно большой скачок, чтобы начать с этого. Итак, я действительно хотел вернуться и предпринять шаги, чтобы пройти весь путь создания вещей с помощью React и Gatsby. Так что это было действительно здорово. И я рад продолжить этот путь, чтобы было больше материалов для начинающих и больше вещей, которые помогут людям понять, как создавать сайт с помощью Gatsby, потому что многие из этих навыков переносятся на другие платформы.

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

Марси: Да, я бы сказала, что наличие CMS или чего-то подобного может значительно улучшить отношения в команде. Я был в тех случаях использования, когда команды разработчиков говорили: «Просто изучите HTML». И вы видите этот глазурь со стороны клиента типа: «Нет, я не могу поверить, что вы только что это сказали». Поэтому наличие системы, в которой люди могут делать свою работу наилучшим образом любыми удобными для них способами, очень, очень важно.

Марси: Как будто вы просто не можете работать с маркетологом GitHub и можете работать какое-то время, но не все время. Таким образом, наличие инфраструктуры предварительного просмотра и сборки делает это лучше, и именно здесь пространство облачных продуктов Gatsby вступает в борьбу. Есть способы сделать предварительный просмотр. Без платной облачной стороны, а в облаке Gatsby есть бесплатный уровень для личных проектов, поэтому не все платное.

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

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

Марси: Да, я бы сказала, что вам нужен какой-то способ предварительного просмотра изменений вашей CMS, потому что это похоже на мгновенное удовлетворение. Вы не хотите ждать час, пока сборка увидит какой-то контент.

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

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

Марси: Итак, вот где предварительный просмотр Gatsby, сборки Gatsby вступают в действие, чтобы вернуть этот интерфейс командам, чтобы они могли сотрудничать, они могли принимать решения, получать что-то. Так что это появилось в прошлом году, постоянно получая больше функций и улучшений, и мы слышали от некоторых команд, которые действительно начинают видеть увеличение скорости.

Марси: И когда мы выясняем: «Хорошо, если эта сборка идет медленно, почему это так?» Обычно это происходит потому, что сайт очень, очень большой. Поэтому мы много внимания уделяли улучшениям для крупных сайтов и действительно совершенствованию командных процессов совместной работы. Сейчас это большое внимание команды.

Дрю: Итак, облако Gatsby, я думаю, в основе его лежит услуга хостинга. Является ли это CDN для развертывания ваших сайтов Gatsby с множеством специфических функций и функций Gatsby?

Марси: Я бы назвала это скорее продуктом непрерывной доставки, потому что это не настоящий CDN. Он интегрируется с CDN, такими как Fastly, Netlify. Есть много разных провайдеров, которых вы можете подключить, и некоторые из них бесплатно. Вы можете многое сделать бесплатно, что довольно круто. Я только что сделал это на днях на нашем последнем сеансе веб-создателей Gatsby, мы используем облако Gatsby и Netlify для создания нашего сайта.

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

Марси: Но что касается Гэтсби, если это все, что вы строите, и есть довольно много агентств, которые все заинтересованы в Гэтсби, и они хотят сделать это как можно быстрее. Итак, именно здесь облако Gatsby может улучшить производительность специально для Gatsby, потому что ему не нужно беспокоиться о каких-либо других платформах.

Дрю: Итак, облако Gatsby сделает вашу сборку, а затем просто развернет ее в чем-то вроде Netlify или, предположительно, в целом ряде других мест.

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

Марси: Но да, кажется, командам действительно нравится эта способность видеть. Я имею в виду, это функциональность, которую вы бы пропустили. Итак, это необходимая вещь, которую нужно добавить обратно, чтобы иметь возможность делать эти совместные предварительные просмотры, получать подписи и все такое.

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

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

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

Марси: В целом, это множество нишевых вариантов использования. Итак, мы пытаемся жонглировать, расставлять приоритеты и действительно прислушиваться к нашему сообществу о том, что сейчас болит, что болезненно, что идет хорошо. И так, это было интересное путешествие лично для меня, чтобы вернуться в devREL и действительно слушать сообщество о том, как мы можем сделать нас еще лучше?

Дрю: И есть ли вокруг Gatsby большое сообщество, которое использует его?

Марси: Есть много людей, использующих его, много участников. Так что для многих людей это может быть первый раз, когда они вносят свой вклад в открытый исходный код, например, приходят к нам в доки и присоединяются к нам на Hacktoberfest и тому подобное. Итак, было очень приятно увидеть, что есть у большого сообщества Гэтсби, особенно с такими вещами, как доступность и попытки убедиться, что фреймворки делают все, что могут, из коробки бесплатно.

Марси: Итак, вот это, я не знаю, подмножество или пересечение доступности и Гэтсби, и это мое счастливое место. Но в более широком сообществе многие люди изучают React или изучают веб-разработку через Gatsby. Итак, это действительно приятно видеть прогресс в нашем сообществе, и, надеюсь, мы привлечем людей, чтобы они внесли свой вклад, даже если это проблема или что-то вроде: «Эй, эта ссылка была сломана или эта часть доков сбила меня с толку. или он устарел».

Марси: Даже просто сказать фреймворку или проекту, который вы используете, о том, что что-то может быть лучше, — это отличный способ внести свой вклад, потому что вы можете помочь нам понять, что нужно улучшить. Так что это отличный способ внести свой вклад.

Дрю: Вы упомянули доступность, и, конечно же, люди знают вас как эксперта по доступности. And they might be surprised to see you working with sort of fully featured front end framework like React, thinking that perhaps the two don't really go together. Is that always the case at JavaScript heavy front ends are worth less accessible?

Marcy: Well, I wish it weren't the case. But I think the data has shown that a lot of websites that do use front end frameworks are less accessible than those that don't. A project that comes to mind is the Web a Million. And actually, I have a blog post, I'm refreshing the Gatsby site to see if my blog post has launched yet. But webbing through the web a million this project, they used their automated wave tool to crawl the top 1 million home pages and evaluate them for some accessibility violations.

Marcy: And it was really depressing results. Like they've run it twice now I think, and I think it got worse. So, it's not great, but I don't think you can really point to any one framework because there's plenty of sites that don't use frameworks that have lots of accessibility problems. So, it's kind of a broader industry issue, a really society.

Marcy: And so, for me working on a full featured web framework, I saw as an opportunity to try and get more accessibility awareness in the mainstream. And so, that was an intentional move on my part to go and try to make an impact on a lot of sites like working on one site is cool. You can solve some really interesting problems. For me, I wanted to advocate accessibility much more broadly and try to make frameworks the best they can be from the inside.

Marcy: So even if something is rough right now, trying to play that long game of like, “Okay, what web standards things can we talk about? What framework improvements can we make so that if this is kind of rough, like not just give up on it.” So, even if I know it's… I don't know, JavaScript is some folks enemy I feel like I like it. You need some JavaScript to make accessible user interfaces, you just do.

Marcy: So, I am trying to like straddle those viewpoints and do the right thing while listening to my activist colleagues and friends kind of out there like pushing us forward as an industry. And then on the inside, I can be the messenger and the person that could try and reconcile some of those huge trade offs and ethical questions about What are we building?

Marcy: So, it's challenging, but I really like it, because I have an impact to make on the web. And so, web framework. Lots of people are building Gatsby sites. So, seems like a good place to try and make an impact.

Drew: You mentioned briefly that Gatsby uses React at the moment. Is there a possible future where Gatsby might work with other frameworks, might receive a view version of Gatsby?

Marcy: I would love that. I've certainly talked about it. There is a pre React plug in, as I mentioned earlier. So you can swap that out. I think a big part of what we are talking about is sustainability of projects, trying to make the right call, these aren't easy choices to make. It's not just like rip it out and start over. There's a lot of concerns that go along with that. It goes deep.

Marcy: So, it's something we're actively talking about. And I don't really have anything specific to share right now. But we do have some internal meetings coming up soon to talk about that sort of thing. So, it's being discussed, and I would love to have a view flavor, that'd be amazing. But as you can imagine there's some interesting challenges that come along with that, and we want to make sure it's the right move so that we're not like, I don't know, going down a path and having it not work for whatever reason, then we're maintaining two frameworks, like how do we make that actually realistic in terms of what we can maintain and make succeed for an open source community?

Drew: So I've been learning all about Gatsby. What have you been learning about lately Marcy?

Marcy: Well, I wish it was better but work life balance. I've been learning about, for me, unfortunately, I'm in like a burnout cycle. And so, I feel like I'm continually learning the lesson of how to be productive, especially this year in 2020. There's just like one thing after another. So, trying to get really clear focus on where I want to go in my career, what makes me happy?

Marcy: How can I sustain, and we're talking about sustainability. Like how can I sustain my own life after a career of really pushing hard on accessibility in particular like, “Okay, how can I kind of take a little step back and make sure that what I am putting out there, what I am doing is meaningful, worth the energy.” See, a lot of my lessons have been kind of that intersection of work and life and trying to make the most of the time that's been… I don't know about you, but it's been pretty stressful for a lot of people including me.

Drew: It's been very, very stressful. We are at very difficult times, isn't it?

Marcy: Yeah, yeah. I mean, we have so much to be thankful for in this industry, having opportunities and skills that you can apply. Seeing a lot of layoffs in our industry, really trying to make decisions that reflect where we're at and not just going through the motions. So that was a big motivator for Gatsby web creators was, “Wow, there's a lot of school age kids not in school this year, it would be really cool to see an outcome of turning some kids' eyes onto web development.”

Marcy: Like when I was in seventh grade, and someone came to a class of mine to talk about photojournalism. I was like, “I want to be a photojournalist.” So that actually did work. I got some feedback from someone that said, “My seventh grader's learning from you, and now they're really excited about code.” So, that was a really good thing to spend some energy on, in a time where like, that wasn't something I would have necessarily thought of before being in these circumstances in 2020.

Marcy: So, really trying to be like nimble and make choices that kind of reflect where I want to go and what's happening.

Drew: If you the listener would like to hear more from Marcy, you can find her on Twitter where she's @marcysutton and find all her latest goings on, on her personal website, marcysutton.com. And of course you can find out how to get started with Gatsby from Gatsbyjs.org. Thanks for joining us today Marcy, do you have any parting words?

Marcy: Make the most of it wherever that might be.