Svelte Summit 2020 気になったトークのまとめ

The Zen of Svelte (Morgan Williams)

https://www.youtube.com/watch?v=vHHLLJA0b70&t=683s

• Svelteはフレームワークである
  • そして学びやすいのが特徴
• Pythonのように、Zenの心得がある
  • https://github.com/feltcoop/why-svelte#easy-to-learn
• 作者のRich氏もこう言ってる
  • Frameworks are not tools for organizing your code,
  • They are tools for organizing your mind.
• コアなプログラマーでなくても、そんな知識がなくても、扱える
• HTMLが書けるなら、Svelteは書ける
  • 好きなテンプレートエンジンも使える（preprocessorで）
• REPLつきのTutorialも学びやすい
  • https://svelte.dev/tutorial/basics
• PythonやjQueryがそうだったように、本来の仕事にフォーカスできる
  • よりクリエイティブに、日々の仕事に取り組めるということ

Svelte at the Edge: Powering Svelte Apps with Cloudflare Workers (Luke Edwards)

https://www.youtube.com/watch?v=vHHLLJA0b70&t=7168s

• Workerとは
  • いろんな種類がある
• Web Workers
  • メインスレッドから処理を逃がすためのもの
  • 最も扱いやすい
• Worklets
  • 特定分野にフォーカスしたもの
  • Audio, Paint, ...etc
• Service Workers
  • ネットワーク、キャッシュ境界とのProxy
  • HTTPコールにたいして、その挙動を変えることもできる
• Cloudflare Workers
  • 本日のテーマ
  • Service Workerと同じ立ち位置
• 違い: 参照するキャッシュは、CloudflareのCDNにできる
  • エッジは世界中にある
• 違い: Workers KVが使える
  • https://developers.cloudflare.com/workers/learning/how-kv-works
  • グローバルなKeyValueストア
• Worker Sites
  • Cloudflareの`wrangler`を使う
    • https://github.com/cloudflare/wrangler
  • Workers KVに静的なアセットをアップロードして、Workerから読み出す
  • そうやってサイトを作るアプローチ
• この仕組みを使って、SvelteをWorkerでSSRする
• デモ: https://github.com/lukeed/svelte-ssr-worker
• このアプローチのメリット
  • より柔軟な設定ができる
  • `Cache-Control`ヘッダも自在にできる
  • 裏側のバケットを自由にできる
• このアプローチのデメリット
  • ルーティング部分を実装する必要がある
  • 扱うパスも列挙しないといけない
  • Workerと、アセットを別々にデプロイする必要がある
• ただこのデプロイ部分はツール化できる
• [WIP] https://github.com/lukeed/freshie
  • SvelteではなくReactでもVueでもなんでも使える
  • デプロイ先を、Cloudflare Workerにするか、従来のNode.jsでのSSRにするかも選べる

Futuristic Web Development (Rich Harris)

https://www.youtube.com/watch?v=vHHLLJA0b70&t=24060s

• Svelteのこれからについて
  • 最近やってることについてお知らせするだけ
  • なにかを保証するわけではない
• 特によく聞かれるのが、環境構築に関すること
  • なにかしらのガイドを示したいとは思ってる
  • Svelteを使ったWeb開発という広いスコープで
• そして、Sapperのv1.0.0は、永遠に出ない
  • ジョークじゃないよ
• 代わりに、これからのSvelteをデモで紹介する
  • `npm init svelte@next`でセットアップ
    • Sapperのように、`app.html`や`routes`ディレクトリなど一式が生成される
    • `@sveltejs/kit`が基本のツールキット
    • `svelte.config.js`で設定
  • 書き味
    • `routes`に`*.svelte`を置けば、それがURLになる
    • `$layout.svelte`を置けば、それがレイアウトになる
  • `snowpack`をベースにしてる
    • なので速い
    • HMRもあるよ
  • ビルドコマンド
    • 3段階の仕事をする
    • まずはunoptimizedなビルド
    • つぎにoptimizedなビルド
    • 最後にアプリの生成
  • アプリの生成とは
    • `adapter`と呼ばれるものを使う
    • Node.jsでSSRしたいのか、静的に出力したいのかなどを選ぶ
    • Serverless First Frameworkとして、各種FaaSやWorkerでも使えるようにする
  • StaticなページとDynamicなページを同居できる
    • Nextとかと一緒
    • `script type=context`で、`prerender = true`する
• ここから想定FAQコーナー
• 簡単に移行できるの？
  • もちろん手間はかかるが、Sapperのそれとそこまで大きな変更はない
• これを使うべきなのか？
  • 「べき」とかではない
  • ただサイトでもアプリでも、広く使えるようにしたい
• TypeScriptは使えるのか？
  • そうするつもり
• Contributeできる？
  • まだ準備中
  • フィードバックを募集してる段階

感想