Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Web Components で 社内 UI ライブラリを作っている話
Yoshihide Jimbo
March 04, 2018
Programming
10
2.6k
Web Components で 社内 UI ライブラリを作っている話
WebComponents.kyoto Meetup #2 での発表資料です。
https://wc-kyoto.connpass.com/event/78690/
Yoshihide Jimbo
March 04, 2018
Tweet
Share
More Decks by Yoshihide Jimbo
See All by Yoshihide Jimbo
jmblog
29
20k
jmblog
8
3.9k
jmblog
20
4.9k
jmblog
3
610
jmblog
29
4.8k
jmblog
25
3.8k
jmblog
39
8.2k
jmblog
31
5.5k
jmblog
53
7.8k
Other Decks in Programming
See All in Programming
takutakahashi
3
310
xrdnk
0
210
kosugitti
1
350
kimyan
3
500
abeta
1
210
kanga333
0
110
nkjzm
1
210
deepflow
9
3.6k
manfredsteyer
PRO
0
240
oracle4engineer
0
120
tetsukick
0
180
dqneo
3
340
Featured
See All Featured
michaelherold
225
8.5k
jmmastey
10
630
jlugia
217
16k
cherdarchuk
71
260k
3n
163
22k
holman
288
130k
searls
204
36k
jrom
116
7.2k
edds
56
9.4k
afnizarnur
176
14k
tammielis
237
23k
dougneiner
55
5.4k
Transcript
Web Components Ͱࣾ UI ϥΠϒϥϦΛ࡞͍ͬͯΔ WebComponents.kyoto Meetup #2 | Mar
04, 2018
じんぼ よしひで ਆอ Յल @jmblog Front-end Engineer,
͓͢Δ͜ͱ ᶃ ࣾ UI ϥΠϒϥϦʮKaizen Custom Elementsʯͷհ ᶄ Web Components
Λ࠾༻ͨ͠എܠ ᶅ ࣮Ͱۤ࿑ͨ͠
ᶃ ࣾ UI ϥΠϒϥϦʮKaizen Custom Elementsʯͷհ
Kaizen Custom Elements app-elements icon-elements <kz-app-toolbar> <kz-app-title> <kz-app-nav-menu> <kz-avatar> <kz-button>
<kz-card> ""... <kz-icon-bookmark> <kz-icon-calendar> <kz-icon-chevron-down> <kz-icon-copy> <kz-icon-download> <kz-icon-edit> ""...
Kaizen Custom Elements ͷಛ • Web Components (Custom Elements +
Shadow DOM) Ͱ࣮ • ϓϦϛςΟϒͳίϯϙʔωϯτ͕த৺ • Atomic Design ͷ Atomsʢݪࢠʣ ͔Β Moleculesʢࢠʣ ͘Β͍ͷཻ • Storybook ΛͬͯΧλϩάԽ • ઈࢍ։ൃதʢਐḿ10%͘Β͍ʣ
Example
https://speakerdeck.com/mizchi/real-world-es201x-and-future?slide=39 ͜ͷੈք؍ΛΠϝʔδ
https://kaizen-custom-elements-preview.netlify.com/
ᶄ Web Components Λ࠾༻ͨ͠എܠ
͜ͷؒͰ 6 ͭͷ Single Page Application Λ։ൃ Angular apps React
apps 2 4 • ٕ͋͑ͯज़ελοΫݻఆԽͤͣଟ༷ੑΛͨͤΔ • খ͘͞࡞ࣺͬͯͯ͘͢͢Δ • ֤ϝϯόʔ͕࠷ͰՌΛग़͢͜ͱʹͩ͜ΘΔ
ҰํͰ Ϙλϯπʔϧόʔͱ͍ͬͨϓϦϛςΟϒͳίϯϙʔωϯτΛ ຖճ࣮͢Δͷ໘͍͘͞… ΞϓϦέʔγϣϯ͝ͱʹඍົʹσβΠϯ͕ҧͬͯ͠·͏…
Angular Ͱ React ͰʢԿͳΒ Vue Ͱ Preact Ͱʣ͑Δ ڞ௨ͷ UI
ϥΠϒϥϦ͕ཉ͍͠ɻ Web Components ͷग़൪Ͱʁʂ
https://custom-elements-everywhere.com/
None
Angular ͱ Custom Elements ͷซ༻ͳͦ͞͏ɻ React Basic Tests ͯ͢௨͍ͬͯΔͷͰɺϓϦϛςΟϒͳ
ίϯϙʔωϯτʹ༻్Λݶఆ͢ΕɺʹͳΔ͜ͱͳͦ͞͏ɻ
None
None
Chrome / Safari ͔ͳΓαϙʔτ͕ਐΜͰΔɻ Edge ͱ Firefox ະରԠ͕ͩɺ໘ Polyfill Ͱ྇͛ͦ͏ɻ
ʢएׯͷෆ҆͋Δ͚Ͳʣ Web Components ͦΖͦΖʮ͑ΔϨϕϧʯʹͳ͖ͬͯͨҹɻ ·ͣࢼͯ͠ΈΑ͏ʂ
ᶅ ࣮Ͱۤ࿑ͨ͠
Shadow DOM ͷελΠϧ
Shadow DOM ͷελΠϧ Firefox ͱ Edge Shadow DOM ʹ·ͩରԠ͍ͯ͠ͳ͍ͷ
ͰɺελΠϧ͕είʔϓԽ͞Εͳ͍ɻ ShadyCSS Λ͑ɺٖࣅతʹείʔϓԽ͕࣮ݱͰ͖Δɻ
lit-html v0.7
lit-html v0.7 lit-html で軽量に作っちゃうぜー
lit-html v0.7 Firefox で Shadow DOM に スタイルが効かないぞ lit-html Λ
ShadyCSS ͷ ૬ੑ͕Α͘ͳ͍ʁ
lit-html v0.7 Polymer v3.0
lit-html v0.7 Polymer v3.0 うまくいった
lit-html v0.7 Polymer v3.0 React + CSS in JS でも
Shadow DOM のスタイル問題を 解決できる気がする! であれば、Polymer ではなく すでに知⾒がたまっている React を 使ったほうがよくない? React + CSS in JS
lit-html v0.7 Polymer v3.0 ちょっと待てよ 配布する Custom Elements の
ライブラリに React を同梱するの? React + CSS in JS
lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html
+ CSS in JS lit-html + CSS in JS で Shadow DOM のスタイル問題を 解決できる気がする! であれば、軽量にできる!
lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html
+ CSS in JS 厳しかった... :host にスタイルを定義する場合、 同じスタイル定義を CSS in JS でも⾏う 必要があり⼆重管理になってしまう。
lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html
+ CSS in JS やはりお前じゃなきゃだめなのか Polymer v3.0
lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html
+ CSS in JS Polymer v3.0 lit-html v0.9
lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html
+ CSS in JS Polymer v3.0 lit-html v0.9 lit-html で ShadyCSS が サポートされた ͜ΕͰղܾͰ͖ͦ͏ʢࠓ͜͜ʣ
https://jmblog.jp/posts/2018-02-15/lit-html-with-shadycss/
create-react-app Ͱ minify Ͱ͖ͳ͍
create-react-app Ͱ minify Ͱ͖ͳ͍ Failed to compile. Failed to minify
the code from this file: ./node_modules/@kaizenplatform/kaizen-app-elements/kaizen-app-elements.js:1:57 Read more here: http://bit.ly/2tRViJ9 create-react-app Λͬͯੜͨ͠ React ΞϓϦͩͱɺ npm run build ͰΤϥʔʹͳΔ͜ͱ͕ൃ֮ɻ
http://bit.ly/2tRViJ9 "͍͔ͭ͘ͷαʔυύʔςΟͷύοέʔδɺES5 ʹมͤͣʹ ES6 ͷ ·· npm ʹެ։ͯ͠·͕͢ɺES6 Λαϙʔτ͍ͯ͠ͳ͍ϒϥβ πʔϧͰʹͳΔͷͰɺগͳ͘ͱ͋ͱES5
Ͱ npm ެ։͢ Δ͜ͱΛ͓͢͢Ί͍ͯ͠·͢ɻ" ͭ·Γ ES6 ʹͳ͍ͬͯΔͷ͕ѱ͍ͱɻ
͔͠͠ɺCustom Elements ES6 ͷΫϥεߏจΛ͏ඞཁ͕͋Δɻ ES5 ʹมͯ͠͠·͏ͱɺϒϥβ࣮ߦ࣌ʹΤϥʔʹͳΔɻ ʢcustom-elements-es5-adapter.js Λ͑Α͍͔͠Εͳ͍͕ɺ ͦͦ
ES6 Λαϙʔτ͍ͯ͠ΔϒϥβΛରͱ͍ͯ͠Δͷʹ Θ͟Θ͟ ES5 ʹม͢Δͷʁʣ
(›°□°ʣ›ớ ᵲᴸᵲ
ํ͕ͳ͍ͷͰɺUMD ൛༻ҙ Format File ES Module kaizen-app-elememts.esm.js UMD kaizen-app-elememts.umd.js
rollup Ͱ2όʔδϣϯΛੜ
index.html ͰಡΈࠐΜͰར༻
·ͱΊ
·ͱΊ • Web Components Λຊ൪ೖ͠Α͏ͱ͢Δͱɺ͍Ζ ͍ΖͱϋϚΔϙΠϯτ·ͩଟ͍ɻ • Ͱࠓ͔ΒݟΛཷΊ͓ͯ͘Ձ͋Δͱࢥ͏ɻ • ·ͣࣾݸਓͷখ͞ͳϓϩδΣΫτͰࢼͯ͠Έͯ
ʁ • lit-html Polymer ͷಈ͖׆ൃͳͷͰɺؾ͕ख़͢Δ ͷΛ৺ͪʹ͠·͠ΐ͏ʂ
We are hiring! Kaizen Platform ͰΤϯδχΞΛืू͍ͯ͠·͢ɻ ڵຯͷ͋Δํ https://jobs.lever.co/kaizenplatform?team=Engineer ·Ͱʂ