Демистификация JAMstack: интервью с Филом Хоусквортом

Некоторые из вас, возможно, слышали о JAMstack и, возможно, даже о том, как перейти с WordPress на Hugo, но подходит ли JAMstack для любого проекта?

Я поговорил с Филом Хоксвортом, фронтенд-инженером, который (после 9 лет работы в агентствах вернулся к работе над самостоятельным продуктом) сейчас сосредоточен на разработке стратегий для технологий JAMstack, чтобы сделать веб-разработку проще, быстрее и эффективнее. безопасный. Фил также будет одним из организаторов конференции JAM_stack ldn, посвященной генераторам статических сайтов, бессерверным технологиям и JAMstack, которая пройдет в Лондоне с 9 по 10 июля.

Виталий: Итак, привет и добро пожаловать на одну из наших бесед с нашими спикерами на Smashing Conf и вообще приятными людьми. Возможно, вы помните те времена, когда FTP был большой вещью, и, возможно, вы все еще пытаетесь понять, почему FTP — это совершенно безопасное пространство, поэтому вам не нужно об этом беспокоиться. Но изменения таковы, что вы больше не используете FTP и вместо этого переходите к рабочим процессам на основе Git и, возможно, к непрерывному развертыванию. Все эти причудливые свистульки и колокольчики. И поэтому сегодня я очень рад приветствовать Фила Хоксворта, который на самом деле работает в Netlify, отдел по связям с разработчиками [неразборчиво 00:10:00]. Привет Фил. Как у тебя сегодня дела?

Фил: Все отлично, как дела, Виталий? Приятно видеть тебя.

Виталий: Ой, у меня все отлично. Всегда приятно видеть вас. Ты как солнечный свет, транслирующий Netlify, Jump Stack и все такое.

Фил: Я стараюсь. Я даже не заклеймен, какая упущенная возможность.

Виталий: Ничего, ничего. Но ты должен сказать мне, так что гем, или джен, или джит, типа, джем? Это джем?

Фил: Джем. Это варенье. Все дело в варенье.

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

Фил: Посмотрим, смогу ли я попробовать, потому что заманчиво просто сказать, JAMstack, JAM означает Javascript, API и макет. Но это само по себе мало что объясняет, просто зная, что это означает. Так что на самом деле JAMstack — это способ развертывания и обслуживания веб-сайтов, которые не полагаются на исходный сервер, они не полагаются на запросы, постоянно попадающие на активный сервер.

Фил: Итак, вы могли быть более знакомы со стеками, такими как стек LAMP, который представлял собой Linux, Apache, MySQL и PHP, это был тип стека, который обслуживал там ваш сайт. С JAMstack все немного по-другому, потому что мы как бы продвинулись на уровень выше, от сервера к браузеру, поэтому он много думает о том, чтобы войти в браузер как можно быстрее, а затем использовать технологии в браузере для улучшать и дополнять его позже. Итак, JAMstack — это все о предварительном рендеринге сайтов, загрузке его в браузер, а затем, возможно, его улучшении, дополнении, опыте работы с Javascript в вашем браузере, возможно, выполнении запросов к API и подобных вещах.

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

Виталий: Да, логично. Ну, на самом деле, мы перешли на JAMstack 2 года назад или около того.

Фил: Два года?

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

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

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

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

Фил: Одна из вещей, которую я начинаю замечать в различных генераторах статических сайтов, таких как, например, Gatsby или React Static, а также Hugo. Команды, стоящие за этими генераторами статических сайтов, начинают изучать способы прогрессивной генерации страниц, то есть, другими словами, вы не повторно развертываете весь сайт или заново создаете весь сайт каждый раз, когда что-то меняется, а пытаетесь найти способы делать инкрементные сборки. Это своего рода сложная проблема, которую нужно преодолеть, но в настоящее время над этим ведется работа, так что это поможет попытаться сломать и этот барьер. Но, безусловно, на данный момент поиск способов использования сайта JAMstack для веб-сайта, который содержит многие миллионы страниц или многие сотни тысяч страниц, может быть немного сложным прямо сейчас.

Виталий: О, это интересно. Так что на самом деле идея обслуживать div состояния, которое у вас есть, и, по сути, все, что вам нужно построить, например, новый портал, должно быть как бы вставлено в него, так что интересно посмотреть, как это происходит. Потому что вы также, совсем недавно, я думаю, две недели назад, появилась статья Джейсона Паменталя, в которой идея была на самом деле очень похожей, где вы фактически загружаете шрифты, а затем загружаете первую страницу, которая вам нужна, а затем вы загрузите второй, а затем вы фактически объедините их, чтобы создать новый шрифт, например, добавочную загрузку шрифта.

Фил: Интересно.

Виталий: Было бы очень интересно изучить это.

Фил: Да, и дело не столько в загрузке, сколько в генерации…

Виталий: Генерация, наращивание.

Фил: Да, точно.

Виталий: Я понимаю. Но как вы думаете, какие общие проблемы возникают у большинства разработчиков? Ну, я имею в виду, позвольте мне вернуться сначала. Если вы никогда раньше не работали с JAMstack, и вам очень комфортно и нравится ваш стек LAMP, и вы, возможно, хотели изучить возможности и преимущества, такие как безопасность и производительность JAMstack. Как бы вы на самом деле начали? Что бы вы перенесли, что значит изменить рабочий процесс?

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

Фил: Если вы думаете о том, как построить что-то в стеке LAMP, скорее всего, у вас есть PHP, вы делаете такие вещи, как написание шаблона, который получает данные из источника данных, в данном случае из базы данных MySQL или чего-то еще. базы данных, визуализируя эти вещи, а затем обслуживая их. И это похоже на то, как работают генераторы статических сайтов. У них есть шаблоны, они откуда-то берут данные, которые могут быть структурированными данными в файлах или могут попадать в какую-то базу данных или API контента. В любом случае, он собирает данные, объединяет эти данные с шаблонами, генерирует представления, и единственная разница в том, что он делает это не по запросу, а заранее. Таким образом, некоторые из логических шагов такого рода когнитивных шагов для разработчика на самом деле могут быть не такими уж огромными.

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

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

Виталий: М-м-м (утвердительно); А еще инфраструктура, когда мы смотрим, например, на то, как мы строим сингл [неразборчиво 00:10:07], и там огромное количество вариантов того, что можно было бы сделать. Для сервера, для клиента и всего, что между ними.

Фил: Да.

Виталий: И так, я думаю, в нашем случае, потому что мы как бы строим скелет, и он работает прямо через CDI с контентом и всем остальным, а также улучшается с помощью Javascript. На самом деле это было вполне разумно и довольно, я бы не сказал, легко, но имело смысл перейти к такому сетапу. Потому что, в конце концов, на странице остается только контент. Это просто HTML с несколькими областями комментариев, окном поиска и некоторыми другими вещами. Но если вы движетесь к действительно автономному приложению, может быть, даже к финансовому приложению, онлайн-банкингу и тому подобному. Вы все еще думаете, что JAMstack будет хорошим вариантом для рассмотрения, если у вас есть что-то, что требует много логики? Нужен сервер или нет?

Фил: Ну, я ненавижу повторять старую фразу «это зависит». Но это немного зависит. С учетом сказанного существует множество приложений, которые работают так же хорошо, как приложение Javascript, так как на самом деле имеют компонент на стороне службы. Я говорю это с определенной долей осторожности, потому что я немного старомоден, когда дело доходит до веб-разработки, и мне действительно нравится как можно больше помещать вещи в браузер как HTML, а затем иметь действительно высокий водяной знак, с которого вы постепенно улучшаете от. Поэтому мне лично не нравится делать все на Javascript и просто отправлять пустой тег body, а затем запускать все через Javascript.

Фил: С учетом сказанного, иногда это вполне приемлемо. Если вы думаете об определенном типе приложения, которое, конечно, сильно зависит от Javascript, и вы знаете свою аудиторию. Это может быть вполне разумно. Есть вещи, которые были отправлены недавно. На самом деле я думаю о чем-то, что было отправлено в Google IO, например, команда Chrome собрала игру, которая была очень сильно написана на Javascript и которая прекрасно работала в статике. Есть много вариантов использования, где это может сработать.

Фил: Возвращаясь к вашему финансовому примеру, я раньше работал, моя самая первая работа заключалась в том, чтобы выводить цифры на экраны, чтобы трейдеры могли торговать с использованием веб-технологий, и это было до веб-сокетов, это было до Ajax, это было до чего-либо по-настоящему это было полезно, чтобы помочь вам сделать это, и это довольно сложно, но в последнее время вы будете делать много подобных вещей в Javascript, и это имеет смысл. Вы можете начать делать безопасные запросы к API прямо из браузера. Сейчас существует множество моделей для аутентификации и авторизации прямо из вашего браузера. Таким образом, во многих отношениях это может упростить стек для финансовых учреждений, которые хотят создать некоторые из этих вещей, потому что то, как они могут отделить некоторые из этих вещей, может сделать их гораздо более управляемыми. Так что я определенно думаю, что модель JAMstack может прекрасно работать и в этом сценарии.

Виталий: Хорошо, так что, может быть, вернемся сейчас, чтобы исследовать этот мир JAMstack и внешнего интерфейса. Что тебя больше всего волнует в эти дни, Фил? Если вы посмотрите на JAMstack и внешний интерфейс в целом, это то, что действительно не дает вам спать по ночам, когда вы просыпаетесь утром в надежде, что да, я собираюсь поработать над этим когда-нибудь. Однажды я это сделаю. У вас есть [перекрестные помехи 00:13:33]

Фил: Да, и это тот случай, когда ваш ответ может меняться день ото дня, потому что кажется, что этот мир движется так быстро. И это само по себе является одной из вещей, которые меня так волнуют. Теперь, когда мы начинаем видеть, что API-интерфейсы браузера начинают действительно развиваться, и мы можем делать вещи прямо в браузере без необходимости реализовывать их самостоятельно. Меня это очень волнует. Я все еще очень тупой, когда дело доходит до SVG. Я должен объяснить слово duffer, если кто-то, кто не английский и смотрит это, это означает дурак. Это значит, что я сильно отстаю.

Фил: Но я обнаружил, что действительно хочу сделать больше с SVG, а анимация — это то, в чем я сильно отстал, и я хочу поиграть с этим. Но такие вещи, как API-интерфейсы браузера, независимо от того, предназначены ли они для работы в автономном режиме или для повышения производительности, и особенно в настоящий момент способ загрузки шрифтов становится все более и более доступным, так что мы можем начать создавать вещи, которые визуально очень богаты и ближе к что мы можем захотеть сделать с типографикой. Я немного помешан на таких вещах, мне нравятся такие вещи, поэтому я хочу играть с ними все больше и больше.

Виталий: Итак, Фил, рассказ о конференции JAMstack в Лондоне. Можете ли вы также объяснить в нескольких словах, например, о чем он будет, на чем он будет сосредоточен, для кого он предназначен и какова ваша роль в нем? Просто за кулисами, заботясь о содержании и все такое. Какова твоя роль там?

Фил: Итак, у меня была интересная часть работы. Так что у меня была возможность пойти и найти спикеров и найти интересный контент, поэтому я очень взволнован тем, как программы объединяются. У нас есть такие люди, как Крис Койя, который расскажет о расширении возможностей разработчиков переднего плана и о том, как много мы можем сделать с технологиями переднего плана, которые теперь основаны на этой модели JAMstack. У нас есть такие люди, как Джейк Арчибальд и Сурма из команды Google Chrome, которые расскажут о таких вещах, как производительность во внешнем интерфейсе, и о том, как мы можем действительно повысить производительность либо со статическим хостингом, либо с инфраструктурой, либо с кодом, который работает прямо в браузер.

Фил: Мы также хотим, чтобы Юна Кравиц говорила о вещах, связанных с CSS и Houdini, и обо всех подобных вещах. И многое другое помимо этого. Мы также поговорим о том, что связано с культурными изменениями, которые модель JAMstack может иметь в вашей организации и в ваших проектах, чтобы она действительно распространялась повсюду. Так что я в некотором роде взволнован этим. У меня также будет возможность представить всех этих людей, потому что они позволили мне сходить с ума и стать ведущим, а это значит, что я могу поговорить с этими людьми и задать несколько вопросов и тому подобное. Поэтому я думаю, что это должно быть очень интересно для всех, кто интересуется фронтенд-разработкой, а также новыми моделями реализации проектов в Интернете действительно эффективным способом.

Виталий: О, так тебе нравится быть в центре внимания на сцене, да?

Фил: Я ищу внимания. Ты уже должен это знать, Виталий.

Виталий: О, вообще-то я всегда думал, что ты очень скромный и милый и добрый человек, видимо я был-

Фил: Это игра, это игра.

Виталий: Хорошо, все в порядке. Фил, мы встретимся через несколько минут, на самом деле, завтра.

Фил: Скоро увидимся на другом мероприятии, но в остальном увидимся в июле, девятого и десятого июля.

Виталий: [неразборчиво 00:16:52] Имея это в виду, спасибо, Фил, и заканчиваю. До свидания всем.

Фил: До скорой встречи.

Это упаковка!

Мы с нетерпением ждем возможности приветствовать Фила на SmashingConf Toronto 2019 с прямой трансляцией на JAMstack. Мы тоже будем рады видеть вас там!

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