JAMstackって
なんなのか問題
に立ち向かう
2018-09-26
聞いたことある人？
わかる人？
説明できる人？
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と呼び始める
Ep. #2, The JAMstack Origin Story
https://www.heavybit.com/library/podcasts/jamstack-radio/ep-2-the-jamstack-origin-story/
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から遠い）
- Nuxtならビルド前フックでAPIレスポンスを静的化する
- Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作る - Qiita
- 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.
Kyle Mathews
Founder @gatsbyjs
「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キャラが
大暴れ！
おわり