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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for uzimaru0000 uzimaru0000
July 18, 2020
Programming
370
0

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

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

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

Avatar for uzimaru0000

uzimaru0000

July 18, 2020

More Decks by uzimaru0000

See All by uzimaru0000
OGPを使いたい
Avatar for uzimaru0000 uzimaru0000
0
190
git入門
Avatar for uzimaru0000 uzimaru0000
1
370
Webフロントエンド入門
Avatar for uzimaru0000 uzimaru0000
1
460
BrainFuckをつくった
Avatar for uzimaru0000 uzimaru0000
0
580
Elmで作るCLI
Avatar for uzimaru0000 uzimaru0000
0
150
Blogを作った話 -Zli x DeNA-
Avatar for uzimaru0000 uzimaru0000
1
220
Compression Vue App
Avatar for uzimaru0000 uzimaru0000
0
140
好きなライブラリ_OSS
Avatar for uzimaru0000 uzimaru0000
0
240

Other Decks in Programming

See All in Programming
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
190
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
140
php-fpmのプロセスが枯渇した日-調査・対処・そして本当にやるべきだったこと-
Avatar for にわ shibuchaaaan
0
290
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
180
SlackアプリとLambdaの 連携を構築した話
Avatar for pawn pawn_4_s
1
120
今さら聞けない .NET CLI
Avatar for tkym htkym
0
190
リアルな遅延を測る仕様
Avatar for kota-yata kota_yata
1
110
AI時代のPHPer生存戦略 ～「言語、もうなんでもよくない？」に本気で向き合う～
Avatar for viviON vivion
0
500
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
Avatar for Ryo Tomidokoro hanhan1978
4
1.8k
言葉の格闘技のススメ～紙とペンと言葉から始める、キャリアの描き方～
Avatar for 進捗ゼミ progresscicada
2
150
Lean は証明の正しさを確認するためだけのツールって思ってませんか？
Avatar for 井上亜星 inoueasei
1
160
いまどきの Codex で開発する visionOS アプリの開発スタイルについて
Avatar for kazuhiro hara karad
0
140

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
890
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
280
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
2
3.8k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
340
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
300
It's Worth the Effort
Avatar for 3n 3n
188
29k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
370

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