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
360
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
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.1k
Goのエラースタックトレースの歴史と今後
sonatard
9
1.6k
Hanami and htmx
bkuhlmann
0
210
2 週間で Twitter Bot を作ってみた
contour_gara
0
610
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
350
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
Git Lint
bkuhlmann
4
750
使ってみよう Azure AI Document Intelligence
kosmosebi
2
330
AmperとFleetを使ったAndroidアプリ
yoppie
0
180
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
450
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
990
Featured
See All Featured
Docker and Python
trallard
34
2.7k
Designing for Performance
lara
601
67k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
Embracing the Ebb and Flow
colly
80
4.1k
Done Done
chrislema
178
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
A Philosophy of Restraint
colly
197
16k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
KATA
mclloyd
15
12k
Documentation Writing (for coders)
carmenintech
60
3.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Happy Clients
brianwarren
92
6.4k
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