WebフロントエンジニアはOSの夢を見る

Zli x DMM 合同LTで発表した資料です。

https://www.youtube.com/watch?v=BjFDjxSTR78

Transcript

1. WebフロントエンジニアはOS の夢を見る
 うじまる

2. 自己紹介
 - B4
 - うじまる
 - Webフロントエンド
 - TypeScript
 - Elm
 - 最近Rustをやってます。
 - Twitter
 - @uzimaru0000
 - GitHub
 - @uzimaru0000

3. 今回話すこと

5. え、OS作ったんですか！？

6. いいえ

7. ポートフォリオサイトです
 https://uzimaru.dev

8. 使った技術

10. わかる

11. まぁわかる

12. ????

13. Webキメラ

14. 仕組み
 - いわゆるWebアプリケーション
 - ReactやVueやElmといった
 フレームワークで出来てる
 - 大体のWebアプリケーションの
 フレームワークは1つ
 - Twitter ---> React
 - note ---> Vue

15. 仕組み
 - 一般的なアプリケーション
 - Windowという共通のフレームの
 中にアプリが動いている
 - アプリがどのように動いているかは自由 

16. 仕組み
 - OS
 - 複数のアプリが起動している
 - Systemはそれの管理をしている 
 - それぞれのアプリは（ry

17. 仕組み
 - ベースとしてWebComponentsを利用している（TypeScript）
 - その中のアプリケーションという形で様々な言語・フレームワークを利用
 - React
 - Elm
 - Vue
 - Unity

19. WebComponents
 Web Components（ウェブコンポーネンツ）はHTML要素をコンポーネント化する技術群の 総称、またそれらを用いて作成されたコンポーネントである。
 ― wikipediaより
 - CustomElement
 - ShadowDOM
 - HTMLTemplate
 YouTubeでもつかわれている！！ 

20. LitElement
 - 簡単にWebComponentsを作るための 
 フレームワーク
 - 右のコードのような感じでWebComponentsを 作ることができる
 - lit-htmlというライブラリを使って宣言的なUI を書ける

21. 構成
 - `x-system`
 - 全体を管理する役割、前のスライドのOSに当たる部分 
 - `x-window`
 - windowを管理する役割
 アプリの削除・最小化・サイズ調整をしている 
 - `x-hoge`
 - アプリケーションをmountする役割 
 一般的なSPAのWebアプリのエントリーポイント 
 余談
 CustomElementは `(.+)-(.+)` の形式になってないとダメ！ 

22. 辛かったところ

23. ShadowDOMとCSS in JS
 の相性の悪さ

24. ShadowDOM と CSS in JSの相性が悪い！
 三行で
 - 一般的なCSS in JSのライブラリは
 <head>の中に<style>を作る
 - ShadowDOMはそのDOMの中で
 閉じたCSSを使える（便利！）
 - <head>で定義されたStyleは貫通しない

25. Reactの場合

26. を使いたかった

27. が、使えなかったので

28. free-style

29. free-style
 - CSS in JSをするためのライブラリ
 - ”””自分でstyleタグを作る必要がある”””
 ShadowDOMの中に<style>を作れる！！

30. Vueの場合

31. 単一コンポーネントファイル！

32. が、使えなかったので

33. lit-elementのstyleに書く

34. Vueの場合
 WebComponents用にビルドもできるらしいがめんどくさそうだった
 そもそもビルドにparcelを使ってるからどうやるか分からなかった

35. Elmの場合

36. rtfeldman/elm-css を使いたい！

37. 使えます

38. Elmの場合
 なんで使えたのか
 - rtfeldman/elm-css は純Elm製のパッケージ
 - ElmはDOMを直接操作するAPIを提供していない
 - 結果的にアプリケーションのDOMに <style> を作っていたので
 ShadowDOMでもStyleを当てることができた

39. まとめ
 - 自分の使える技術を1つのページに集めることができる！
 - 各アプリケーションを小さいアプリにできるので作ってて楽しい！
 - 情報が少ない 
 - やってる人がいなすぎる
 - Reactのイベント周りの処理でも不具合があった 
 - 日本語記事は無かった（気がする） 
 今後
 - Rustを勉強中なのでWASMを使いたい
 - もうちょっとリッチなアプリも実装したい

40. 最後に

41. Webキメラなんて誰がつかうんや

42. マイクロフロントエンドという
 考え方

43. マイクロフロントエンド
 マイクロサービスを更に拡張した考え方

44. ありがとうございました！
 https://uzimaru.dev