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
Micro Frontends × gRPC-Web の挑戦 / The challenge...
Search
ぷらす
May 12, 2019
Programming
0
160
Micro Frontends × gRPC-Web の挑戦 / The challenge of micro frontends and gRPC-Web
CAMPHOR- の定例LTの資料です。
Twitter:
https://twitter.com/p1ass
GitHub:
https://github.com/p1ass
ぷらす
May 12, 2019
Tweet
Share
More Decks by ぷらす
See All by ぷらす
AWSの認定資格を受けた話
p1ass
1
460
趣味プロジェクトをリードする技術 / Technology to lead hobby projects
p1ass
21
8.9k
vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image
p1ass
2
1.4k
Webアプリケーションにおける並行処理の難しさ / #Gocon_Sendai
p1ass
4
2.6k
RSSフィードをもっと便利に / Make RSS feeds more convenient #camphor_lt
p1ass
1
15k
うじまる君の生活習慣の乱れを可視化したい! / uzimaru birthday LT
p1ass
2
16k
複数サービスを運用しやすい理想のコンテナ環境をVPS上に構築する #camphor_day / Building ideal container environment on VPS
p1ass
1
8.8k
Kubernetesのイメージタグの更新を楽にするツールを作った / p1ass/mikku - make updating Kubernetes image tags easier
p1ass
1
85
ドメインロジックと 永続化処理を分離する設計改善 を行って得られた知見 / Design improvements that separate domain logic and persistence function
p1ass
1
2.2k
Other Decks in Programming
See All in Programming
Introduce Hono CLI
yusukebe
6
3.1k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
490
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
Pythonに漸進的に型をつける
nealle
1
130
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
EMこそClaude Codeでコード調査しよう
shibayu36
0
430
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
980
Cursorハンズオン実践!
eltociear
2
1.2k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
340
contribution to astral-sh/uv
shunsock
0
540
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
130
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
We Have a Design System, Now What?
morganepeng
53
7.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Docker and Python
trallard
46
3.6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Cult of Friendly URLs
andyhume
79
6.6k
Transcript
.JDSP'SPOUFOETº H31$8FCͷઓ $".1)03 ఆྫ-5 Β͢ !QBTT ʙ ,JUBEF8JEHFUฤ ʙ
l,JUBEFzͱʁ l,JUBEF8JEHFUzͷհ ઃܭࢥ ࣮ɾ։ൃϑϩʔ ·ͱΊ
l,JUBEFzͱʁ
l,JUBEFzͱʁ ˔ $".1)03 ͷग़੮ཧγεςϜ ˓ 4MBDLͰ CPULJUBEFͱଧͭ͜ͱͰྃ ˓ IPVTF@BUUFOEBODF νϟϯωϧʹ
)064&ͷ༷ࢠ͕ߘ͞ΕΔ ˓ )064&ʹਓ͕͍Δ͜ͱΛΞϐʔϧ
l,JUBEFzͱʁ ˔ $".1)03 "DDPVOU ҎԼ"DDPVOUXFC ˓ <ͱ͋Δ63-> ˓ લ͔Β ,JUBEF༻ͷ
6*ଘࡏ ˓ l։ൃதzͷ··ͣͬͱ์ஔ ໓ଟʹ։͔ͳ͍ϖʔδͱԽ͍ͯͨ͠
l,JUBEF8JEHFUzͷհ
l,JUBEF8JEHFUzͷհ ˔ ػೳ ˓ 8FC͔Β LJUBEF ˓ ݱࡏͷग़੮ਓͷ֬ೝ ˓ ग़੮ऀͷҰཡΛදࣔ
˔ ࣮͍ͨ͠ػೳ ˓ ࠓ·Ͱͷग़੮ճΛදࣔ
l,JUBEF8JEHFUzͷհ ˔ ٕज़ελοΫ ˓ 8FC$PNQPOFOUT ˓ H31$8FC ˓ 7VFKT .JDSP'SPOUFOETʹదͨ͠8JEHFU
ઃܭࢥ
શͷਆΛ࡞Βͳ͍ɻ ϝϯς͘͢͠ɻ
શͷਆΛ࡞Βͳ͍ ˔ "DDPVOUXFCμογϡϘʔυ ˓ ֤αʔϏεͷใ͕౷߹͞Εͯදࣔ͞ΕΔॴΛࢦ͢ ˔ ֤αʔϏεશ͘υϝΠϯ͕ҟͳΔผͷαʔϏε ˓ ͯ͢ͷαʔϏεʹؔ͢Δίʔυ͕ඞཁʹ ίʔυ͕ංେԽͯ͠ϝϯςͣ͠Β͘
શͷਆΛ࡞Βͳ͍
શͷਆΛ࡞Βͳ͍ ˔ 8JEHFUΛಡΈࠐΉ͚ͩͰɺ࣮Λ࣋ͨͳ͍Α͏ʹ͢Δ 8JEHFU֤αʔϏεଆ͕ཧ͢ΔͷͰίʔυ͕͖ͬ͢Γ
ϝϯς͘͢͠ ˔ $".1)03 ͷӡӦগਓͷֶੜͷΈ ˓ ΄΅ਓ͕֤αʔϏεͷϝΠϯͷ࣮Λߦ͏ ˓ ΘΕ͍ͯΔݴޠ͕όϥόϥ ˓ ӡӦϝϯόʔͷٕज़ελοΫ͋·Γඃͬͯͳ͍
࣮ऀ͕ଔۀ͢Δͱ୭࣮͕͔Βͳ͘ͳΔՄೳੑ
ϝϯς͘͢͠ ˔ ରԠࡦ ˓ ޙഐ͕͔ΔݴޠͰॻ͘ ˓ ޙഐʹڭ͢Δ FY(P͍͍ͧ ˓ υΩϡϝϯτΛඋͯ͠ɺʮޙͤͨʂʯঢ়ଶʹ͢Δ
˓ ֎෦ΠϯλϑΣʔε͚ͩʹґଘ͢ΔΑ͏ʹ͢Δʹͯ͠ɺ ؆୯ʹ࡞ΓͤΔΑ͏ʹ͢Δ ˡ࠾༻
ϝϯς͘͢͠ ˔ ࣮ͷৄࡉΛΔඞཁ͕͋Δͷಉ͡ϦϙʹೖΕΔ վम࣌ʹ"DDPVOUXFCͷमਖ਼Λগͳ͘͢Δ
ϝϯς͘͢͠ ˔ .JDSP'SPOUFOET https://micro-frontends.org/ ˓ ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ு ˓ ϞϊϦγοΫϑϩϯτΤϯυ͔Βͷ٫Λࢦ͢
ϝϯς͘͢͠ ˔ .JDSP'SPOUFOET https://micro-frontends.org/ ˓ ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ு ˓ ϞϊϦγοΫϑϩϯτΤϯυ͔Βͷ٫Λࢦ͢
࣮ɾ։ൃϑϩʔ
࣮ ˔ 8FC$PNQPOFOUT ˓ ҙͷ)5.-λάΛఆٛ͢Δ l$VTUPN&MFNFOUz ˓ ΧϓηϧԽ͞Εͨ%0.Λ࡞Δ z4IBEPX%0.z ˓
࠶ར༻Մೳͳ l)5.-5FNQMBUFz )5.- $44 +4Λ·ͱΊͨΦϦδφϧλάΛ࡞ΕΔ
࣮ class MyAppElement extends HTMLElement { constructor() { super() const
shadowRoot = this.attachShadow({ mode: 'open' }) shadowRoot.innerHTML = this.template() } template() { return ` <style> p { color: #f00; } </style> <p>This is a custom element!</p> ` } } customElements.define('my-app', MyAppElement) <my-app></my-app> ˔ ݺͼग़͢ଆλάΛࢦఆ͢Δ͚ͩ
࣮ ˔ 7VFKTˠ 8FC$PNQPOFOUT ˓ 8FC$PNQPOFOUTΛͦͷ··ॻ͘ͷ͠ΜͲ͍ ˓ 7VFKTͷίϯϙʔωϯτϑΝΠϧΛ8FC$PNQPOFOUTʹ vue-cli-service build
--target wc ¥ --name kitade-widget src/KitadeWidget.vue ֶशίετΛܰݮ ⾪
࣮ ˔ H31$8FC ˓ H31$ͷαʔϏεΛ ϒϥβ ͔ΒݺͿΈ ˓ QSPUPDͰ ΫϥΠΞϯτͱܕఆٛΛੜ
DMJFOUXFC ˓ &OWPZ͔ /HJOYʹΑΔϓϩΩγ͕ඞཁ &OWPZΛ༻ ˓ #''ΛݐͯΔΑΓҰ؏ੑΛ࣋ͬͨ։ൃΛߦ͑Δ
࣮ ˔ H31$8FCͷΫϥΠΞϯτίʔυΛ࡞ ˓ QSPUPͷ NBTUFSʹ QVTI͞Εͨ࣌Ͱɺ$*ʹΑͬͯ DBNQIPSDMJFOUXFC ͕ࣗಈੜ ˓
͍͍ͨαʔϏε OQN PSZBSOͰΫϥΠΞϯτίʔυΛ %FQFOEFODZʹՃ ,JUBEF8JEHFUࡁ ˓ جຊతͳ͍ํެࣜͷ HSQDHSQDXFCΛࢀর
։ൃϑϩʔ ˔ ੩తͳ8FC$PNQPOFOUTͷϑΝΠϧΛ࡞ ˓ ϩʔΧϧͰ ZBSOCVJMEDPNQPOFOU Ͱ EJTU ʹੜ ˓
NBTUFSʹ QVTI͞Εͨ࣌ɺDBNQIPSTUBUJDʹ Ϗϧυ ࡁΈϑΝΠϧ͕ QVTI͞ΕΔ ˔ ੩తϑΝΠϧΛ৴ ˓ TUBUJDNBTUFSʹQVTI͞Εͨ࣌ʹ EPDLFSJNBHFΛ࡞ ˓ 3VOEFDL ͷ KPCΛճ͢͜ͱͰ৴
։ൃϑϩʔ ˔ ൪ͷΈखಈͰߦ͏ඞཁ͕͋Δ
·ͱΊ
·ͱΊ ˔ ,JUBEF8JEHFUΛ࡞ͬͨ ˓ 8FC$PNQPOFOUTͱ H31$8FCͰ.JDSP'SPOUFOETԽ ˓ 7VFKTʹΑͬͯ 8FC$PNQPOFOUTͷ࣮ίετΛݮ ˓
H31$8FCͷͨΊͷ DMJFOUXFCϨϙδτϦΛ৽ͨʹ࡞ ˔ ੩తϑΝΠϧ৴ج൫Λ࡞ ˓ TUBUJDϨϙδτϦʹ QVTI͢Δ͚ͩͰ৴४උ͕͏
5IBOLZPV 5XJUUFS !QBTT (JU)VC QBTT
ࢀߟ
ࢀߟ ˓ https://developer.mozilla.org/ja/docs/Web/Web_Components ˓ https://micro-frontends.org/ ˓ https://cli.vuejs.org/ ˓ https://qiita.com/ka-miyata/items/63e41e4105d7aeb44d6c