JAMstackの謎を解き明かす:PhilHawskworthへのインタビュー

公開: 2022-03-10
簡単な要約↬ウェブは非常に多様で予測不可能です。これは、ウェブを形作る人々が非常に多様であるためです。 この新しい一連の短いインタビューでは、私たちの業界で興味深い仕事をし、彼らが学んだことを共有している興味深い人々と話をします。

JAMstackについて聞いたことがある方もいらっしゃるかもしれませんが、WordPressからHugoに切り替える方法についても聞いたことがあるかもしれませんが、JAMstackはあらゆる種類のプロジェクトで実行可能なオプションですか?

フロントエンドエンジニアのPhilHawksworthと話をしました。彼は、(代理店での9年間の勤務の後、スタンドアロン製品の開発に戻りました)現在、Webの構築をより簡単、高速、その他にするためのJAMstackテクノロジーの戦略の開発に注力しています。安全。 Philはまた、7月9〜10日に、ロンドンで静的サイトジェネレーター、サーバーレス、およびJAMstackに特化した会議であるJAM_stackldnを共同開催します。

Vitaly:こんにちは、SmashingConfの講演者や一般的に素晴らしい人々との会話へようこそ。 FTPが重要だった当時のことを覚えているかもしれませんが、実際には、FTPが完全に安全なスペースである理由をまだ展開しているので、それについて心配する必要はありません。 ただし、FTPを使用せず、代わりにGitベースのワークフローに移行し、おそらく継続的な展開を行うという大きな変化があります。 このすべての派手な笛と鐘。 そして今日、私は実際にNetlify、開発者関係[inaudible00:10:00]で働いているPhilHawksworthを歓迎することをとてもうれしく思います。 こんにちはフィル。 今日はどうですか?

フィル:私は素晴らしいです、あなたはヴィタリーをどのようにやっていますか? お会いできてうれしいです。

ヴィタリー:ああ、私は元気です。 お会いできて光栄です。 あなたは、NetlifyやJumpStackなどすべてをストリーミングするサンシャインのようなものです。

Phil:やってみます。 私はブランド化さえされていません、なんて機会を逃したのでしょう。

ヴィタリー:それは大丈夫です、それは大丈夫です。 しかし、あなたは私に言わなければなりません、それで、宝石またはジェンまたはジート、例えば、ジェム? ジェムですか?

フィル:ジャム。 ジャムです。 ジャムがすべてです。

ヴィタリー:それはすべてジャムです。 つまり、JAMstackです。 開発者やデザイナーにとって、実際にはこれまでこの用語を聞いたことがありません。 もしあなたがそれが何であるか、そしてなぜそれが良いのか、そしてそもそもそれの利点は何であるかを要約したいのなら。 従来の古き良きスタックからJAMstackに移行したいと思うのはなぜですか。 多分あなたはそれを簡単に要約することができます。

Phil: JAMstack、JAMはJavascript、API、モックアップの略であると言いたくなるので、試してみることができるかどうか見てみましょう。 しかし、それ自体は実際にはあまり説明されておらず、それが何を意味するのかを知っているだけです。 つまり、実際には、JAMstackは、オリジンサーバーに依存せず、アクティブなサーバーに常にヒットするリクエストに依存しないWebサイトをデプロイして提供する方法に関するものです。

Phil: Linux、Apache、MySQL、PHPなどのLAMPスタックのようなスタックに慣れているかもしれません。これは、そこでサイトにサービスを提供していた種類のスタックでした。 JAMstackでは、サーバーから離れてブラウザーに近づくようにレベルを上げたため、少し異なります。そのため、ブラウザーにできるだけ早くアクセスし、ブラウザーのテクノロジーを使用して、後でそれを強化および増強します。 つまり、JAMstackは、サイトを事前にレンダリングし、ブラウザーに取り込み、それを拡張し、拡張し、ブラウザーで実行されるJavascriptのエクスペリエンスを実現し、APIにリクエストを送信することなどを目的としています。

Phil:それがモデルです。サーバーの保守は難しいことを私は知っているので、保守が必要なサーバーを持たないようにしようとしています。 あなたのことはわかりませんが、数年前に背を向けただけで、そのようなサイトがなくなってしまったサイトがたくさんあります。 PHPをアップグレードする必要がありました。つまり、ブルームーンで一度行ったLinuxのバージョンをアップグレードする必要がありました。 したがって、サーバーの保守は難しいため、JAMstackのアイデアは、サイトを静的アセットとして提供することを可能な限り簡単にし、ブラウザーのすべてのAPIと機能を最大限に活用して、拡張を実行し、より多くのことを実行することです。そこにあります。

ヴィタリー:そうですね、理にかなっています。 実は、2年ほど前にJAMstackに移行しました。

フィル: 2年?

ヴィタリー:ええ、それは私たちにとってかなりの旅でした。 そしてもちろん、その過程でいくつかの教訓を学びました。 しかし、私は疑問に思っています。本質的にすべてのプロジェクトは、プロジェクトの一部をJAMstackなどに移動または移動することで、何らかの形で利益を得ることができると思いますか。その制限はどこにありますか。 それは潜在的にすべての開発者がプロ​​ジェクトで使用できるものですか、それとも特定のWebサイトのグループまたはプロジェクトのグループに専用のようなものですか?

Phil:ええ、つまり、言いたくなります。そうそう、すべてに使用できますが、どのテクノロジーについても注意深く言う必要があると思います。 ご存知のとおり、ユースケースを選択して、適切に調整されていることを確認する必要があります。 JAMstackサイトについて考え、おそらくCDNから直接、静的アセットとして提供されるものについて考えるときの最初の本能と言えます。 あなたは、まあ、それはあまり頻繁に変更されないサイトにのみ良いと思うかもしれません、彼らは引用で引用され、静的であり、彼らは変更されません。 しかし実際には、実際にはそうではありません。これは、物事を展開する際の摩擦を減らすことができるツールが現在非常に多く存在するためです。

Phil:必要に応じて、1日に何度も、または1時間に何回もデプロイして、実際に以前よりもはるかにダイナミックに感じさせることができます。 したがって、これらのユースケースの中には、適切ではないと思われるものもあります。 それらも実際にフォールドに入ります。 しかし、それが困難になるのは、おそらく、JAMstackモデルがサイトを事前に生成できるときに非常に理にかなっているため、多くのページ、数十万、または数百万のページを持つサイトを作成しているときです。したがって、静的サイトジェネレーターを使用している可能性があります。 それらは現在本当に流行しています。 それらは本当に人気があります。

Phil:もちろん、更新をデプロイするたびに作業を行う必要があるため、新聞サイトのように数百万ページあるサイトがある場合は、それを再生成するために必要な作業が必要です。 JAMstackを使用できる場所の制限のいくつかにぶつかり始めると、かなり時間がかかる可能性があります。 あなたが少し狡猾になり始めて、あなたが知っているなら、あなたが非常に狡猾であるならば、それを回避し始めることができます、しかしそれは確かにいくつかの挑戦をもたらします。

Phil:たとえばGatsbyやReact Static、Hugoなどのさまざまな静的サイトジェネレーターから私が見始めているものの1つです。 これらの静的サイトジェネレーターの背後にあるチームは、ページのプログレッシブ生成を実行できる方法を模索し始めています。つまり、何かが変更されるたびにサイト全体を再デプロイしたり、サイト全体を再生成したりするのではなく、方法を見つけてください。インクリメンタルビルドを実行します。 克服するのは難しい問題のようなものですが、現在その問題に取り組んでいるので、その障壁を打ち破るのにも役立ちます。 しかし、確かに現時点では、数百万ページまたは数十万ページのWebサイトでJAMstackサイトを使用する方法を見つけることは、今のところ少し難しいかもしれません。

ヴィタリー:ああ、それは面白い。 したがって、実際には、現在の状態のdivにサービスを提供するという考えと、基本的に、新しいポータルのように構築する必要があるものはすべて、その中にページングする必要があるため、これが発生するのを見るのは興味深いことです。 あなたも、つい最近、2週間前に、Jason Pamentalによる記事が出てきたので、実際にフォントをロードするというアイデアは実際には非常に似ていて、次に必要な最初のページをロードしてから、 2番目をロードしてから、インクリメンタルフォントのロードなど、新しいフォントを作成する方法で実際にそれらをマージします。

Phil:おもしろい。

ヴィタリー:それを探求するのは本当に面白いでしょう。

Phil:ええ、それは負荷の多くだけではなく、世代です-

Vitaly:世代、構築。

Phil:そうだね。

ヴィタリー:わかりました。 しかし、ほとんどの開発者が抱える一般的な課題は何だと思いますか? ええと、つまり、最初に戻りましょう。 これまでJAMstackに取り組んだことがなく、LAMPスタックに非常に満足していて、JAMstackのセキュリティやパフォーマンスなどの可能性と利点を探求したい場合。 実際にどのように始めますか? 何を動かしますか、ワークフローの変更とはどういう意味ですか?

Phil:つまり、ワークフローへの変更は実際には非常に大きなものになる可能性があります。これは、通常依存するインフラストラクチャの多くを取り除いており、実際にはそれを取り除いてCDNに直接展開できると言っているからです。 しかし、誰かがこれをどのように実験し始めるかという点では、彼らはすでにこれのいくつかの側面を使用している可能性があります。 あなたは知っている、ウェブのために物事を構築する一種の伝統的な方法でさえ。

Phil: LAMPスタックで何かを構築する方法を考えると、PHPがそこにある可能性があります。データソース(この場合はMySQLデータベースなど)からデータを取得するテンプレートを作成するようなことをしています。データベースの、それらのものをビューにレンダリングし、次にそれらを提供します。 これは、静的サイトジェネレーターの動作と似ています。 テンプレートがあり、ファイル内のある種の構造化データである可能性がある場所からデータを取得するか、ある種のデータベースまたはコンテンツAPIにヒットする可能性があります。 いずれにせよ、データを取得し、そのデータをテンプレートと組み合わせてビューを生成します。唯一の違いは、オンデマンドで実行するのではなく、事前に実行することです。 したがって、開発者にとってのその種の認知ステップの論理的なステップのいくつかは、実際にはそれほど大きくないかもしれません。

Phil:最大の変化は、物事をどのように展開するかを考えることです。 実際にデプロイしているのは、デプロイを実行するたびに構築され、レンダリングされたアセット全体であるためです。 これにより、コンテンツの管理やコードの管理などがすべて同じ場所にまとめられ、ビジョンのようなものがそれらすべてをまとめて制御できるようになります。 そのため、サイトとその中のコンテンツをどのように開発および管理するかについては、少し異なる考え方になり始めています。 したがって、そこにはいくつかの変更があります。 しかし、良いことは、多くの静的サイトジェネレーターが実験を開始するのに非常に簡単である可能性があることです。そして、これを行うために大量のインフラストラクチャを必要としないことです。 ですから、良いことは、ローカルマシン上で実際に物事を構築し始めることができるということです。 静的サイトジェネレーターをマシン上で実行しているので、他の多くのインフラストラクチャに頼る必要なしに、結果がどうなるかを非常によく理解できます。

Phil:そのような最初のステップであるオンランプは、あなたが「まあ、この特定のツールのセットを試してみます。 ローカルで実行できます。」 そして、その出力をどこかにデプロイすると、ローカルでデプロイする場合とまったく同じになるという確信が持てます。 これは、静的なものをレンダリングすることについて私が気に入っていることの1つです。なぜなら、それらを提供するために多くのインフラストラクチャや可動部品に依存していないからです。 自分のマシンの静的サーバーでそれらを見て、「ええ、これがCDNに移行したときにどのように機能するか」と考えることができます。

Vitaly:うーん(肯定的);そして、たとえば、単一の[inaudible 00:10:07]を構築する方法を検討するときのインフラストラクチャもあり、実行できることには膨大な数のオプションがあります。 サーバー、クライアント、およびその間のすべて。

Phil:うん。

Vitaly:それで、私たちの場合、私たちはスケルトンを構築しているので、コンテンツとすべてを備えたCDIを介して直接提供され、Javascriptで強化されていると思います。 それは実際にはかなり合理的でかなり、簡単とは言えませんが、そのような設定に移行することは理にかなっています。 結局のところ、ページに残るのはコンテンツだけだからです。 これは、いくつかのコメント領域と検索ボックス、およびその他のいくつかのものを備えた単なるHTMLです。 しかし、本当にスタンドアロンのアプリケーション、おそらく金融アプリケーション、オンラインバンキング、この種のものに移行している場合。 多くのロジックを要求するものがある場合は、JAMstackを検討するのに適したオプションだと思いますか? サーバーが必要ですか?

Phil:ええと、私は古い言い回しを捨てるのは嫌いです。 しかし、それは少し依存します。 そうは言っても、実際にサービス側のコンポーネントを持っているのと同じようにJavascriptアプリケーションとして機能するアプリケーションはたくさんあります。 私はウェブ開発に関しては少し古い学校なので、ある程度の注意を払って言います。可能な限りHTMLとしてブラウザに取り込み、徐々に拡張するところから非常に高いウォーターマークを設定するのが本当に好きです。から。 ですから、私は個人的にJavascriptですべてを実行し、空のbodyタグを送信してから、すべてをJavascriptで実行するのは好きではありません。

Phil:そうは言っても、それが完全に受け入れられる場合もあります。 もちろん、Javascriptに大きく依存する特定の種類のアプリケーションについて考えていて、対象者を知っている場合。 それは完全に合理的です。 最近発送されたものがあります。 私は実際にGoogleIOに出荷されたものを考えています。たとえば、Chromeチームは、非常に重いJavascriptであり、静的に美しく機能するゲームをまとめました。 それが機能するユースケースはたくさんあります。

Phil:財務の例に戻ると、私は以前働いていました。実際、私の最初の仕事は、トレーダーがWebテクノロジーを使用してトレードオフするために画面に数字を表示することでした。これは、Webソケットの前、Ajaxの前、実際には何よりも前でした。それはあなたがそれをするのを助けるのに役立ちました、そしてそれは一種の挑戦的です、しかし最近では、あなたはJavascriptでその種のことをたくさんするでしょう、そしてそれは完全に理にかなっています。 ブラウザから直接APIへの安全なリクエストを開始できます。 ブラウザから直接認証と承認を行うためのモデルはたくさんあります。 したがって、多くの点で、これらのいくつかを切り離すことができる方法により、それらをはるかに管理しやすくすることができるため、これらのいくつかを構築したい金融機関のスタックを簡素化できます。 したがって、JAMstackモデルはそのシナリオでも完全に機能すると思います。

Vitaly:わかりました。では、JAMstackとフロントエンドの世界を探索するために今戻ってくるかもしれません。 フィル、最近最も興奮していることは何ですか? JAMstackとフロントエンド全般を見ると、それはあなたが夜に目を覚まし続けるものであり、そうだと期待して朝に目を覚ます、私はいつかそれに取り組むつもりです。 いつか私はそれを成し遂げます。 [クロストーク00:13:33]はありますか

Phil:ええ、これは、この世界がとても速く動いているように感じるので、あなたの答えが日々異なる可能性があるようなものです。 そして、それ自体が私をとても興奮させるものの1つです。 これで、ブラウザーAPIが実際に進歩し始め、自分で実装しなくてもブラウザーで直接実行できる種類のことがわかり始めました。 それは私にとってちょっとエキサイティングです。 SVGに関しては、私はまだ非常に苦手です。 ダッファーという言葉を説明する必要があります。英語を話さない人がこれを見ているとしたら、それはばかを意味します。 それは私がカーブのはるか後ろにいることを意味します。

Phil:でも、SVGでもっとやりたいと思っているのですが、アニメーションは私がかなり遅れているようなもので、それで遊んでみたいと思っています。 しかし、ブラウザAPIのようなものは、オフライン用であろうとパフォーマンスの向上用であろうと、特にフォントの読み込みがますますアクセスしやすくなっているように見えるので、視覚的に非常に豊かでより近いものを実際に作成し始めることができますタイポグラフィで作りたいもの。 私はそのようなものには少しオタクです、私はそのようなものが好きなので、それでもっともっと遊びたいです。

Vitaly: Phil、ロンドンでのJAMstackconfについて話しています。 また、それがどうなるのか、何に焦点を当てているのか、誰のためにあるのか、そこでのあなたの役割は何かなど、簡単に説明していただけますか? 舞台裏で、コンテンツとすべての世話をします。 そこでのあなたの役割は何ですか?

Phil:それで私は仕事の楽しい部分を持っていました。 それで、私は外に出てスピーカーを見つけ、興味深いコンテンツを見つける機会があったので、プログラムがどのように組み合わされるかについて本当に興奮しています。 Chris Coiaのような人々が、フロントエンド開発者のエンパワーメントと、このJAMstackモデルに基づいたフロントエンドテクノロジーでどれだけのことができるかについて話します。 GoogleChromeチームのJakeArchibaldやSurmaのような人々が、フロントエンドでのパフォーマンスや、静的ホスティング、インフラストラクチャ、またはで実行されるコードのいずれかを使用して非常にパフォーマンスの高いエクスペリエンスを実現する方法について話します。ブラウザ。

Phil: Yuna Kravitzに、CSSやHoudiniに関係すること、そしてそれらすべてのことについて話してもらう予定です。 そして、はるかに。 また、JAMstackモデルが組織やプロジェクトにもたらす可能性のある文化的変化に関係することについても話し合うので、それは実際に至る所に行き渡ります。 だから私はそれについてちょっと興奮しています。 また、私をワイルドにしてMCになってくれたので、これらの人々すべてを紹介する機会もあります。つまり、これらの人々と話をしたり、いくつかの質問をしたりすることができます。 したがって、フロントエンドの開発や、非常に効率的な方法でWeb上にプロジェクトを配信する新しいモデルに関心のある人にとっては非常に興味深いはずです。

ヴィタリー:ああ、あなたはステージのスポットライトが好きですか?

Phil:私は注目を集めています。 ヴィタリー、今ではそれを知っているはずです。

ヴィタリー:ああ、実は私はいつもあなたがとても謙虚で親切で親切な人だと思っていました、どうやら私は-

フィル:それは行為です、それは行為です。

ヴィタリー:わかりました、それで結構です。 フィル、明日、実際に会う予定です。

Phil:すぐに別のイベントでお会いしましょう。それ以外の場合は、7月、7月9日と10日に会いましょう。

Vitaly: [inaudible 00:16:52]それで、これを念頭に置いて、Philとサインオフに感謝します。 さようならみんな。

Phil:またね。

おしまいです!

JAMstackでのライブセッションで、SmashingConf Toronto2019でPhilを迎えることを楽しみにしています。 そちらでもお会いしましょう!

この一連のインタビューが役に立ったかどうか、誰にインタビューしてほしいか、またはどのトピックを取り上げてほしいかをお知らせください。すぐに対応します。

ジャンプした後もっと! 以下を読み続けてください↓