Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=47 uzimaru0000
July 18, 2020
Programming
0
280

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

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

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

9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=128

uzimaru0000

July 18, 2020
Tweet

More Decks by uzimaru0000

See All by uzimaru0000
9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=48 uzimaru0000
0
94
9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=48 uzimaru0000
1
190
9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=48 uzimaru0000
1
360
9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=48 uzimaru0000
0
160
9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=48 uzimaru0000
0
98
9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=48 uzimaru0000
1
89
9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=48 uzimaru0000
0
83
9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=48 uzimaru0000
0
150

Other Decks in Programming

See All in Programming
10467e82d1ff23f3be6ec26723a09101?s=48 mokagio
0
130
C27317d1ebe4e4a01504acab9d87fe61?s=48 hellsquirrel
0
370
53c93eb80b5958590b18205dc5fd3634?s=48 smdmts
0
150
E7151ab8219e76672f7a7691dd2c88e6?s=48 seike460
3
500
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
310
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
920
21d5f61fba6b2d522dadc5888d403a21?s=48 fujisawaryohei
0
130
07fe43bbec550b3230b3a7f9a81de7cc?s=48 nishigori
2
1.5k
3187acdb47cb44678ad716c3228bf91b?s=48 keeeeen
0
250
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
1
530
8e8410eb785755ae2cb485f85dbab6e8?s=48 hiroga
1
250
87137598c23e3e90755e5d7476d21405?s=48 bastnic
1
440

Featured

See All Featured
B47b288784fda77a94aeb234ca743c24?s=48 keavy
108
15k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
103
5.2k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
322
54k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
37
1.8k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
30
3.6k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
188
14k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k
245cee81a9c424266e5e401d844ea881?s=48 lara
591
61k
78b475797a14c84799063c7cd073962f?s=48 holman
462
280k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
293
28k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
298
40k

Transcript

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


  2. 自己紹介
 - B4
 - うじまる
 - Webフロントエンド
 - TypeScript
 -

    Elm
 - 最近Rustをやってます。
 - Twitter
 - @uzimaru0000
 - GitHub
 - @uzimaru0000


  3. 今回話すこと


  4. None

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


  6. いいえ


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


  8. 使った技術


  9. None

  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

  18. None

  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