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
110
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
350
趣味プロジェクトをリードする技術 / Technology to lead hobby projects
p1ass
21
8.7k
vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image
p1ass
2
1.2k
Webアプリケーションにおける並行処理の難しさ / #Gocon_Sendai
p1ass
4
2.5k
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.4k
Kubernetesのイメージタグの更新を楽にするツールを作った / p1ass/mikku - make updating Kubernetes image tags easier
p1ass
1
54
ドメインロジックと 永続化処理を分離する設計改善 を行って得られた知見 / Design improvements that separate domain logic and persistence function
p1ass
1
2k
Other Decks in Programming
See All in Programming
qmuntal/stateless のススメ
sgash708
0
120
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
400
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
現場で役立つモデリング 超入門
masuda220
PRO
13
2.9k
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
23k
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
Java ジェネリクス入門 2024
nagise
0
610
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
880
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Vue.js学習の振り返り
hiro_xre
2
130
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
For a Future-Friendly Web
brad_frost
175
9.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Navigating Team Friction
lara
183
14k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
4 Signs Your Business is Dying
shpigford
180
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Code Review Best Practice
trishagee
64
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Optimizing for Happiness
mojombo
376
69k
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