Svelte触ってみた

Transcript

1. Svelte触ってみた
2. ある日の投稿
3. なんでSvelte触ったんだっけ？
4. 2019年からずっと満足度高い
5. 概要っぽい話 Rich Harries(@Rich_Harris) ・First release 2016 ・v2: The magical disappearing framework 2018 ・v3: Cybernetically enhanced web apps 2019 ・TypeScript Support 2020 ・SvelteKit beta / Japanese Document 2021 ・SvelteKit 1.0 2022
6. 触ってみた感想
7. とにかく速い
8. なぜこんなに速いのか
9. No virtual DOM
10. 総当たりで変更点を見つけるのではなく、 コードから変更されうるものを見つけて挙動を変えている
11. No virtual DOM 仮想DOMは速いという神話を 完全に終わりにしよう （思想強め）
12. Library Size
13. 内部で何をやってるか見てみる
14. Svelte compiler ・Javascript + HTMT + CSS → plain Javascript + scoped CSS ・No virtual DOM
15. Parse後の戻り値をとりあえず見る
16. No virtual DOM https://svelte.dev/tutorial/basics ・コンパイル時にcreate_fragmentという要素が作成され、その中に DOM情報が書き込まれる ・scriptタグ内の全ての変数について、リアクティブに変更される部 分とされない部分を判断してコンパイル時に分けるようにしている ・変わりうるのであれば、それを$$invalidateとctxで繋げられるよう にしている
17. 個人的に思ったこと ・HTMLライクに書けるので非エンジニアでもコーディングできそう ・画期的だけどまだまだ実績の少ない言語 ・LP、リッチなWebサイト、小〜中規模くらいまでのサービス・プロ ジェクトなら使いやすそう ・コミュニティあったり盛り上がってはいるので今後も追っていく