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

Svelte Society Day 2020: Rich Harris: Frequently Asked Questions の要点まとめ

Svelte


Svelte Society Day 2020: Rich Harris: Frequently Asked Questions

わかりみしかなかった。

リッチ氏、本職はNYTのデザイナーなんですよね・・エンジニアじゃないんですよね・・まじすげーわ・・。

Svelte Society Day 2020

  • はじめましてRichです
    • SvelteのAuthorです
  • Svelte Societyというコミュニティをやってます
    • 定期的にミートアップやってるよ
    • これが初リモート開催で、願わくば最後のリモート開催になりますように
  • 今日はFAQに答えていきます

What is Svelte?

How can I learn Svlete?

  • 公式のチュートリアルがおすすめ
  • 動画がいいなら、EggheadとかUdemyとかにもあるよ
  • 本もあるよ
    • Svelte and Sapper in Action
  • まあ自分のプロジェクトで手を動かすのが一番良いけど

Is svelte.dev down?

  • そんなこともあったが今は大丈夫
    • 昔サイトが落ちてたらしい-

How can I get my editor to understand `.svelte` files?

  • エディタでどうやってシンタックスハイライトするの
  • `html`にすればだいたい大丈夫なはずだよ
  • VSCodeなら、専用の拡張があるよ

Is there an UI component library for Svelte?

Will there ever be an official router?

  • すごいよく聞かれる
  • さっきのコード集でも検索すると出てくる
    • この時点で19くらいある
  • Vueは公式のを持ってるのは知ってる
    • それで安心する層が一定いるのもわかる
  • けど、ルーティングって思ってる以上に複雑で、今のところ公式解は出せない
    • 期待せずに待ってて

TypeScript?

  • TSはいいよね
    • SvelteのコアもコードはTSで書いてる
  • 型があると、コード補完も効くしいいよね
  • SvelteのASTからJSXを出力して、それで型チェックしたりできるように
  • 今まさに着手中で、数ヶ月以内にいいニュースを知らせるつもり

Does Svelte scale?

  • この質問されるのは割と嬉しい
    • なぜなら、Svelteの仕組みおよびトレードオフを理解しようとしているから
  • この問に対しては、基本的にはYesと答えてる
  • イメージとして、X軸にコンポーネント数、Y軸にバンドルサイズを取るグラフを想像してみて
  • というわけで、どこかの時点でSvelteのほうがサイズが大きくなるポイントはあるはず
    • どれくらいかを説明するのは難しい
  • 問題はどれくらいのJavaScriptを書くことになるか次第
  • ともあれ、他のフレームワークよりも最初に読み込む必要があるランタイムのサイズは小さくなると思う
    • 必要あればLazyにロードするなどするとよい
    • もちろんリンク先をプリロードしておくこともできる
  • そもそもTreeShakingなどのテクニックも活用してこ
  • Svelteはコンパイラなので、将来的に問題が起きてもいろんな手が打てるはず
  • そういうわけで、今の時点でそういう問題は起こってない
    • なので、この質問の答えはYes

What is the recommended way to test components?

How do you structure larger projects in Svelte?

  • SvelteはただのUIライブラリ
  • 大きなプロジェクトでは、もっといろいろ扱うものがあるよね
  • なのでSapperを作った
    • SSRやCodeSplittingやRoutingやいろいろなことをやってくれる
  • Sapperについてもよく聞かれることがあるのでその話をする

What's on the roadmap for Sapper?

  • まずはロードマップについて
  • 現状のソリューションとして多いのは、SSRするか、SSGするかの2択
  • このあたりの自由度を上げたかったのでSapperを作った
    • Sapperは特定のページはSSRのしつつ、あとはSSGするみたいな設定ができる
  • ほかにはi18nにも注目してる
    • コンパイラであることを活かした解決方法がないか探してる
  • SPAモードもよく聞かれる
    • 一切SSRしないでいいという場合も多いみたいね

Is Sapper dead?

  • 死んではないよ
  • けど、いい状態でもないと自覚してる
    • それは申し訳ない
  • 今年は少しOSSから離れていて、戻ろうかなと思った頃にコロナがきた
    • なので時間がなくて、権限を移譲していってるところ
  • Sapper自体の筋は悪くないと思ってるし、個人的にも使ってる
    • Svelte3から多くを学び、取り入れてる
  • もしそんなSapperを待ちきれないなら、Routifyとかもあるよ

How do you do server-side rendering with Svelte?

  • Sapperがやってるのを参考にしてもいい
  • ちょっとデモをする
    • `require("svelte/compiler")`する
    • そして`compile(source, { generate: "ssr" })`とすればいい
  • 同じようなことは、NYTのサイトでもやってる
  • 従来のやり方なら、Ajaxでデータを取ってきて、クライアント側で描画するはず
  • でもこのサイトでは、事前にビルドしてあるのでそのためのJavaScriptは実行しない
    • グラフのところはSVG
  • ちなみにコードはなんとGoogleDocsで管理してて、ArchieMLで書いてる
  • ほかにはSSRして、クライアント側で`hydrate`してる例もある

What is the goal of Svelte?

  • 元々は単に自分が使いたいものを作っただけ
  • ただAppleやSpotifyが使ってくれるようになって、意識が変わってきたところもある
    • Webを作っていくという動きを実感する機会を得られた
  • Svelteを使ってくれてる・選んでくれるのを見るとやはり嬉しい
  • そこがゴールだったと思う

Can I give you money?

  • うれしいけど難しい話題
  • OSSでそれをやると、プロジェクト本来の目的が変わってしまったりする
    • 優先度とか
  • いま何より足りないと思っているのは時間
    • それはお金では買えない
  • ただ一定の規模のOSSを運営していくのにいくらかのお金がかかるのも事実

Where else are we trapped in local maxima?

  • 「VirtualDOMに代わる何かが必要だと感じたから、時間と労力をかけてSvelteを作ったとお見受けする」
    • 「その他にもここ最近で、局所的最大値に囚われていると考えてるものはある？」というツイートに対して
  • あると思う
  • Webそれ自体がそうだと思ってる
    • 元々はテキストを公開するプラットフォームだったはず
    • 最初から今日みたいな使われ方するとわかってたら、もっと違う形になっていたはず
  • あとはUIデザインも
    • テレビや映画のインタラクションデザイナーと仕事をすると特に感じる
  • ソフトウェア開発もそう
    • なぜCLIやエディタに向かってテキストを打ち込んでいるんだろうと思うことがある
    • これも惰性かなと思ってる
  • こういう見方をすると、社会に対しても見え方が変わってくるはず
  • 資本主義についてもそう思う
    • 個人的にマルクス主義だからというのもあると思うけど
    • 解決する問題よりも、問題のほうが多くなってるように感じる
    • GCPでしか人類の進歩を測れないことが局所的最大値
  • ずっと話せちゃうので最後に一言だけ
  • 今の自分が局所的最大値にいるとして、より高いところに行きたいなら、一度下がってそこから駆け上がるしかない

Is Svelte ready for prime time?

  • 「「あーSvelteね、でもプロダクションで使われてないでしょ？」って言われるのなんとかして」というツイートに対して
  • 気持ちはわかる
  • 個人的になんやかんや言えるけど、そうすべきではないと思うし、コアチームとしても同じ
  • それをなんとかできるのは、その境遇にあるあなただけ