🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

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

Svelte

https://sveltesummit.com/
https://www.youtube.com/watch?v=vHHLLJA0b70

JST夜中スタートだとリアルタイムで見れない...😴

というわけで、気になるトークだけまとめました。

The Zen of Svelte (Morgan Williams)

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

  • Svelteはフレームワークである
    • そして学びやすいのが特徴
  • Pythonのように、Zenの心得がある
  • 作者のRich氏もこう言ってる
    • Frameworks are not tools for organizing your code,
    • They are tools for organizing your mind.
  • コアなプログラマーでなくても、そんな知識がなくても、扱える
  • HTMLが書けるなら、Svelteは書ける
    • 好きなテンプレートエンジンも使える（preprocessorで）
  • REPLつきのTutorialも学びやすい
  • 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が使える
  • Worker Sites
  • この仕組みを使って、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できる？
    • まだ準備中
    • フィードバックを募集してる段階

感想

The Zen of Svelte

そうそうそうなんですよ！って感じだった。

Svelteが提供できるのは、シュッと書いたらさっと動く、jQueryのそれと一緒なんよね。
書けば動く、それだけで自分のサイトが作れる、みたいなプログラミングのベースラインみたいな体験のやつ。

これは何回も言ってるけど、これからWeb開発はじめますって人こそ、最初に入門してほしい。

やればやるほどReactってほんとむずかしいなって最近思ってて、そういう意味でも、すべての人がReactをやる必要はない。

Svelte for Sites, React for Apps - DEV

個人的には、この記事の主張にもだいたい同意。

コンポーネント指向とか単方向データフローとか、Web開発のメンタルモデルを進化させたReact（もといFacebook）の功績はたしかにあるけど、あとはそれにどこまでついていくのかいつ離れるのか、みたいなことを最近は考えてる今日このごろ・・。

Svelte at the Edge

最近はやりのCDN Edge Worker！
Service Workerの活用方法、やっぱこっち方面なんかな？

使い方を模索してみたい気持ちもあるけど、いまいち運用コスパに見合わず食指が動かない・・。
（ちょうどいい社内案件などないかしら）

Service WorkerもEdge handlerも、ちょっとした用途にはいらんのよね・・。

Futuristic Web Development

さよならSapper 😲（まあなんとなくそんな予感はしてたけどｗ）

発表の主旨としては、「Svelteが、単なるUIライブラリから、一歩進んでUIキットになろうとしてる」ってこと。
それはそれで悪くないというか、正しい方向性なのかなと発表を見てて思った。

最初のトークの感想でも書いたけど、これからのWeb開発を、これからはじめる人にぜひ触ってほしいな〜と。

次なるリリースに期待。

この勢いで既存のSvelteアプリを`snowpack`化しようとしたけど、諦めたこともメモっておく。
https://github.com/leader22/mmss-client/pull/40