Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebフロントエンジニアはOSの夢を見る
Search
uzimaru0000
July 18, 2020
Programming
0
340
WebフロントエンジニアはOSの夢を見る
Zli x DMM 合同LTで発表した資料です。
https://www.youtube.com/watch?v=BjFDjxSTR78
uzimaru0000
July 18, 2020
Tweet
Share
More Decks by uzimaru0000
See All by uzimaru0000
OGPを使いたい
uzimaru0000
0
150
git入門
uzimaru0000
1
290
Webフロントエンド入門
uzimaru0000
1
410
BrainFuckをつくった
uzimaru0000
0
350
Elmで作るCLI
uzimaru0000
0
120
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
160
Compression Vue App
uzimaru0000
0
110
好きなライブラリ_OSS
uzimaru0000
0
200
Other Decks in Programming
See All in Programming
Honoとhtmx
yusukebe
6
1.1k
mandaRa: R言語ユーザのための新しい知識共有の場 / mandara_tokyor111
s_uryu
2
410
上手な探索的テストとその上達方法について
matsu802
1
430
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
980
PHPアプリケーションのスケーラビリティと 信頼性を革新する nginx+ngx_mrubyとGoの融合
pyama86
2
220
LPIXEL×CADDi_kaerururu
kaerururu
3
270
Laravel標準バリデーションでできること
hmb_ok
1
330
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.2k
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2k
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
1
480
Cloudflare Workersの環境を再現することについて
yusukebe
5
730
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
0
270
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Producing Creativity
orderedlist
PRO
335
39k
GraphQLとの向き合い方2022年版
quramy
28
12k
Making the Leap to Tech Lead
cromwellryan
122
8.4k
Code Reviewing Like a Champion
maltzj
512
39k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Embracing the Ebb and Flow
colly
78
4.1k
Statistics for Hackers
jakevdp
789
220k
BBQ
matthewcrist
78
8.7k
Transcript
WebフロントエンジニアはOS の夢を見る うじまる
自己紹介 - B4 - うじまる - Webフロントエンド - TypeScript -
Elm - 最近Rustをやってます。 - Twitter - @uzimaru0000 - GitHub - @uzimaru0000
今回話すこと
None
え、OS作ったんですか!?
いいえ
ポートフォリオサイトです https://uzimaru.dev
使った技術
None
わかる
まぁわかる
????
Webキメラ
仕組み - いわゆるWebアプリケーション - ReactやVueやElmといった フレームワークで出来てる - 大体のWebアプリケーションの フレームワークは1つ -
Twitter ---> React - note ---> Vue
仕組み - 一般的なアプリケーション - Windowという共通のフレームの 中にアプリが動いている - アプリがどのように動いているかは自由
仕組み - OS - 複数のアプリが起動している - Systemはそれの管理をしている - それぞれのアプリは(ry
仕組み - ベースとしてWebComponentsを利用している(TypeScript) - その中のアプリケーションという形で様々な言語・フレームワークを利用 - React - Elm -
Vue - Unity
None
WebComponents Web Components(ウェブコンポーネンツ)はHTML要素をコンポーネント化する技術群の 総称、またそれらを用いて作成されたコンポーネントである。 ― wikipediaより - CustomElement - ShadowDOM
- HTMLTemplate YouTubeでもつかわれている!!
LitElement - 簡単にWebComponentsを作るための フレームワーク - 右のコードのような感じでWebComponentsを 作ることができる - lit-htmlというライブラリを使って宣言的なUI
を書ける
構成 - `x-system` - 全体を管理する役割、前のスライドのOSに当たる部分 - `x-window` - windowを管理する役割
アプリの削除・最小化・サイズ調整をしている - `x-hoge` - アプリケーションをmountする役割 一般的なSPAのWebアプリのエントリーポイント 余談 CustomElementは `(.+)-(.+)` の形式になってないとダメ!
辛かったところ
ShadowDOMとCSS in JS の相性の悪さ
ShadowDOM と CSS in JSの相性が悪い! 三行で - 一般的なCSS in JSのライブラリは
<head>の中に<style>を作る - ShadowDOMはそのDOMの中で 閉じたCSSを使える(便利!) - <head>で定義されたStyleは貫通しない
Reactの場合
を使いたかった
が、使えなかったので
free-style
free-style - CSS in JSをするためのライブラリ - ”””自分でstyleタグを作る必要がある””” ShadowDOMの中に<style>を作れる!!
Vueの場合
単一コンポーネントファイル!
が、使えなかったので
lit-elementのstyleに書く
Vueの場合 WebComponents用にビルドもできるらしいがめんどくさそうだった そもそもビルドにparcelを使ってるからどうやるか分からなかった
Elmの場合
rtfeldman/elm-css を使いたい!
使えます
Elmの場合 なんで使えたのか - rtfeldman/elm-css は純Elm製のパッケージ - ElmはDOMを直接操作するAPIを提供していない - 結果的にアプリケーションのDOMに <style>
を作っていたので ShadowDOMでもStyleを当てることができた
まとめ - 自分の使える技術を1つのページに集めることができる! - 各アプリケーションを小さいアプリにできるので作ってて楽しい! - 情報が少ない - やってる人がいなすぎる
- Reactのイベント周りの処理でも不具合があった - 日本語記事は無かった(気がする) 今後 - Rustを勉強中なのでWASMを使いたい - もうちょっとリッチなアプリも実装したい
最後に
Webキメラなんて誰がつかうんや
マイクロフロントエンドという 考え方
マイクロフロントエンド マイクロサービスを更に拡張した考え方
ありがとうございました! https://uzimaru.dev