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
150
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
430
趣味プロジェクトをリードする技術 / Technology to lead hobby projects
p1ass
21
8.9k
vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image
p1ass
2
1.3k
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.7k
Kubernetesのイメージタグの更新を楽にするツールを作った / p1ass/mikku - make updating Kubernetes image tags easier
p1ass
1
80
ドメインロジックと 永続化処理を分離する設計改善 を行って得られた知見 / Design improvements that separate domain logic and persistence function
p1ass
1
2.1k
Other Decks in Programming
See All in Programming
20250708_JAWS_opscdk
takuyay0ne
2
150
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
220
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
270
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
2
440
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.2k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
290
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
Navigating Team Friction
lara
187
15k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Making Projects Easy
brettharned
116
6.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Music & Morning Musume
bryan
46
6.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
What's in a price? How to price your products and services
michaelherold
246
12k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Agile that works and the tools we love
rasmusluckow
329
21k
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