JAMstackって

なんなのか問題

に立ち向かう

聞いたことある人?

わかる人?

説明できる人?

Netlifyの人がしょっちゅう言っている、

わりにあまり語られていない(日本では)

Matt Biilman

CEO and Co-founder of Netlify

JAMStack Best Practices

 

  • Entire Project on a CDN

  • Everything Lives in Git

  • Modern Build Tools

  • Automated Builds

  • Atomic Deploys

  • Instant Cache Invalidation

これらは全部Netlifyのこと

JAMstackに最適化されたホスティングサービスがNetlify

JAMstack: noun \’jam-stak’\

 

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

JavaScript

わかる

API

わかる

Markup

わかる

JavaScript

+API

+Markup

JavaScript

+API

+Markup

(当たり前過ぎて)

だから何?

その言葉の意味する

定義を知りたい

我々は謎を探るべく、

アマゾンの奥地へと向かった・・・

2015年

Static Web-Tech

「静的サイトは、速い、安い、美味い」

Staticサイトを作る技術!

WAKARU 😲

2016年

Staticとは呼ばず

JAMstackと呼び始める

They were single-page apps or they were big, content-driven sites that just used content APIs instead of a traditional monolithic dynamic CMS.

 

We kept running into the problem of

how to actually talk about those projects with a word that actually meant something.

「我々の作ってる静的サイト技術をどう言えば正しく伝えられるのかが問題だった」

 "Oh, that's a static website,"

"But that's really like a new stack, right? Before it was the LAMP stack. You should have like a name for that, like what about..."

 

And he thought a bit, and then he said JAM.

I can't remember what it stood for when he said it.

「LAMP stackみたいに名前が必要。 たとえばJAMとか?」

Oh, it wasn't JavaScript?

It was something else, right?

It was a bit of name-driven development.

「JavaScriptじゃ無かったわけ?」

「たしかそう」

MATOME

  • 一言で言えば、事前ビルドで静的化したSPAをCDNで配信する技術(事前SSRみたいな)

  • でも機能的にはいわゆるStaticじゃない。動的なデータを扱うHyperDynamicなサイトを作ってる

  • Staticって言うと手書きHTMLみたいな語弊があるので新しい言葉を作らなければならなかった

  • JAMって語感から決めたからそんなに意味無いっちゃ無い

  • 要はGatsby + Contentful + Netlifyが黄金パターン

JAMstack is...

  • 定義には無いけど「APIレスポンスの静的化」もJAMstackには必要じゃないですか?
  • Gatsbyだと静的化してくれるけど、Nuxtでgenerateだとそういう仕組みは無い
  • asyncDataにAPIと接続する処理を書いてしまうと、クライアントルーティングで遷移するときにAPI通信が発生してしまう(awaitが終わらないとページ遷移できないし、先読みもしないのでblazing fastから遠い)
  • Gatsbyみたいに予めデータソースをシステムとして考慮して扱うのがスマート。JAMstackの理念にマッチする

PERFECT JAMstack (blazing fast)

余談

PSA: @gatsbyjs is not just for "sites".

It produces static HTML and then rehydrates into a React app.

Think of it as an opinionated CRA with built-in SSR and nice integrations w/ CMSs.

Please use Gatsby to build apps. Thanks for listening. Happy Friday and happy developing.

「Gatsbyはただの静的サイトジェネレーターじゃない。

アプリなんだよ!」

I'm surprised nobody mentioned this but this website and the whole JAMstack thingy is basically a PR stunt from Netlify.

Static sites generators and the JAMstack are inherently crippled.

With a JAMstack, by design, everything needs to be rendered on the client. This means poor performance on mobile, loss of control over SEO, and virtually no SMO for dynamic content.

Kinda funny to promote a crippled stack that hard...

Top Open-Source Static Site Generators | Hacker News

「JAMstackなんて不自由な代物。Netlifyが煽ってるだけ」

JAMStack Tokyo?

CM

技術書典5

JAMStack

完全入門書

 

JAMキャラが

大暴れ!

おわり

Made with Slides.com