Web Components で社内 UI ライブラリを作っている話

Slide 1

Slide 1 text

Web Components Ͱࣾ಺ UI ϥΠϒϥϦΛ࡞͍ͬͯΔ࿩ WebComponents.kyoto Meetup #2 | Mar 04, 2018

Slide 2

Slide 2 text

じんぼよしひで ਆอ Յल @jmblog Front-end Engineer,

Slide 3

Slide 3 text

͓࿩͢Δ͜ͱ ᶃ ࣾ಺ UI ϥΠϒϥϦʮKaizen Custom Elementsʯͷ঺հ ᶄ Web Components Λ࠾༻ͨ͠എܠ ᶅ ࣮૷Ͱۤ࿑ͨ͠఺

Slide 4

Slide 4 text

ᶃ ࣾ಺ UI ϥΠϒϥϦʮKaizen Custom Elementsʯͷ঺հ

Slide 5

Slide 5 text

Kaizen Custom Elements app-elements icon-elements ""... ""...

Slide 6

Slide 6 text

Kaizen Custom Elements ͷಛ௃ • Web Components (Custom Elements + Shadow DOM) Ͱ࣮૷ • ϓϦϛςΟϒͳίϯϙʔωϯτ͕த৺ • Atomic Design ͷ Atomsʢݪࢠʣ ͔Β Moleculesʢ෼ࢠʣ  ͘Β͍ͷཻ౓ • Storybook Λ࢖ͬͯΧλϩάԽ • ઈࢍ։ൃதʢਐḿ10%͘Β͍ʣ

Slide 7

Slide 7 text

Example

Slide 8

Slide 8 text

https://speakerdeck.com/mizchi/real-world-es201x-and-future?slide=39 ͜ͷੈք؍ΛΠϝʔδ

Slide 9

Slide 9 text

https://kaizen-custom-elements-preview.netlify.com/

Slide 10

Slide 10 text

ᶄ Web Components Λ࠾༻ͨ͠എܠ

Slide 11

Slide 11 text

͜ͷ൒೥ؒͰ 6 ͭͷ Single Page Application Λ։ൃ Angular apps React apps 2 4 • ٕ͋͑ͯज़ελοΫ͸ݻఆԽͤͣଟ༷ੑΛ΋ͨͤΔ • খ͘͞࡞ࣺͬͯͯ΍͘͢͢Δ • ֤ϝϯόʔ͕࠷଎Ͱ੒ՌΛग़͢͜ͱʹͩ͜ΘΔ

Slide 12

Slide 12 text

ҰํͰ Ϙλϯ΍πʔϧόʔͱ͍ͬͨϓϦϛςΟϒͳίϯϙʔωϯτΛ ຖճ࣮૷͢Δͷ͸໘౗͍͘͞… ΞϓϦέʔγϣϯ͝ͱʹඍົʹσβΠϯ͕ҧͬͯ͠·͏…

Slide 13

Slide 13 text

Angular Ͱ΋ React Ͱ΋ʢԿͳΒ Vue Ͱ΋ Preact Ͱ΋ʣ࢖͑Δ ڞ௨ͷ UI ϥΠϒϥϦ͕ཉ͍͠ɻ Web Components ͷग़൪Ͱ͸ʁʂ

Slide 14

Slide 14 text

https://custom-elements-everywhere.com/

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Angular ͱ Custom Elements ͷซ༻͸໰୊ͳͦ͞͏ɻ React ΋ Basic Tests ͸͢΂ͯ௨͍ͬͯΔͷͰɺϓϦϛςΟϒͳ ίϯϙʔωϯτʹ༻్Λݶఆ͢Ε͹ɺ໰୊ʹͳΔ͜ͱ͸ͳͦ͞͏ɻ

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Chrome / Safari ͸͔ͳΓαϙʔτ͕ਐΜͰΔɻ Edge ͱ Firefox ͸ະରԠ͕ͩɺ౰໘͸ Polyﬁll Ͱ྇͛ͦ͏ɻ

Slide 20

Slide 20 text

ʢएׯͷෆ҆͸͋Δ͚Ͳʣ  Web Components ΋ͦΖͦΖʮ࢖͑ΔϨϕϧʯʹͳ͖ͬͯͨҹ৅ɻ ·ͣ͸ࢼͯ͠ΈΑ͏ʂ

Slide 21

Slide 21 text

ᶅ ࣮૷Ͱۤ࿑ͨ͠఺

Slide 22

Slide 22 text

Shadow DOM ͷελΠϧ໰୊

Slide 23

Slide 23 text

Shadow DOM ͷελΠϧ໰୊ Firefox ͱ Edge ͸ Shadow DOM ʹ·ͩରԠ͍ͯ͠ͳ͍ͷ ͰɺελΠϧ͕είʔϓԽ͞Εͳ͍ɻ ShadyCSS Λ࢖͑͹ɺٖࣅతʹείʔϓԽ͕࣮ݱͰ͖Δɻ

Slide 24

Slide 24 text

lit-html v0.7

Slide 25

Slide 25 text

lit-html v0.7 lit-html で軽量に作っちゃうぜー

Slide 26

Slide 26 text

lit-html v0.7 Firefox で Shadow DOM にスタイルが効かないぞ lit-html Λ ShadyCSS ͷ  ૬ੑ͕Α͘ͳ͍ʁ

Slide 27

Slide 27 text

lit-html v0.7 Polymer v3.0

Slide 28

Slide 28 text

lit-html v0.7 Polymer v3.0 うまくいった

Slide 29

Slide 29 text

lit-html v0.7 Polymer v3.0 React + CSS in JS でも Shadow DOM のスタイル問題を  解決できる気がする！    であれば、Polymer ではなく  すでに知⾒がたまっている React を  使ったほうがよくない？ React + CSS in JS

Slide 30

Slide 30 text

lit-html v0.7 Polymer v3.0 ちょっと待てよ   配布する Custom Elements のライブラリに React を同梱するの？ React + CSS in JS

Slide 31

Slide 31 text

lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html + CSS in JS lit-html + CSS in JS で Shadow DOM のスタイル問題を  解決できる気がする！    であれば、軽量にできる！

Slide 32

Slide 32 text

lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html + CSS in JS 厳しかった...   :host にスタイルを定義する場合、  同じスタイル定義を CSS in JS でも⾏う必要があり⼆重管理になってしまう。

Slide 33

Slide 33 text

lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html + CSS in JS やはりお前じゃなきゃだめなのか Polymer v3.0

Slide 34

Slide 34 text

lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html + CSS in JS Polymer v3.0 lit-html v0.9

Slide 35

Slide 35 text

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 がサポートされた ͜ΕͰղܾͰ͖ͦ͏ʢࠓ͜͜ʣ

Slide 36

Slide 36 text

https://jmblog.jp/posts/2018-02-15/lit-html-with-shadycss/

Slide 37

Slide 37 text

create-react-app Ͱ minify Ͱ͖ͳ͍໰୊

Slide 38

Slide 38 text

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 ͰΤϥʔʹͳΔ͜ͱ͕ൃ֮ɻ

Slide 39

Slide 39 text

http://bit.ly/2tRViJ9 "͍͔ͭ͘ͷαʔυύʔςΟͷύοέʔδ͸ɺES5 ʹม׵ͤͣʹ ES6 ͷ ·· npm ʹެ։ͯ͠·͕͢ɺES6 Λαϙʔτ͍ͯ͠ͳ͍ϒϥ΢β΍ πʔϧͰ໰୊ʹͳΔͷͰɺগͳ͘ͱ΋͋ͱ਺೥͸ES5 Ͱ npm ΁ެ։͢ Δ͜ͱΛ͓͢͢Ί͍ͯ͠·͢ɻ" ͭ·Γ ES6 ʹͳ͍ͬͯΔͷ͕ѱ͍ͱɻ

Slide 40

Slide 40 text

͔͠͠ɺCustom Elements ͸ ES6 ͷΫϥεߏจΛ࢖͏ඞཁ͕͋Δɻ ES5 ʹม׵ͯ͠͠·͏ͱɺϒϥ΢β࣮ߦ࣌ʹΤϥʔʹͳΔɻ ʢcustom-elements-es5-adapter.js Λ࢖͑͹Α͍͔΋͠Εͳ͍͕ɺ ͦ΋ͦ΋ ES6 Λαϙʔτ͍ͯ͠Δϒϥ΢βΛର৅ͱ͍ͯ͠Δͷʹ Θ͟Θ͟ ES5 ʹม׵͢Δͷʁʣ

Slide 41

Slide 41 text

(›°□°ʣ›ớ ᵲᴸᵲ

Slide 42

Slide 42 text

࢓ํ͕ͳ͍ͷͰɺUMD ൛΋༻ҙ Format File ES Module kaizen-app-elememts.esm.js UMD kaizen-app-elememts.umd.js

Slide 43

Slide 43 text

rollup Ͱ2όʔδϣϯΛੜ੒

Slide 44

Slide 44 text

index.html ͰಡΈࠐΜͰར༻

Slide 45

Slide 45 text

·ͱΊ

Slide 46

Slide 46 text

·ͱΊ • Web Components Λຊ൪౤ೖ͠Α͏ͱ͢Δͱɺ͍Ζ ͍ΖͱϋϚΔϙΠϯτ͸·ͩଟ͍ɻ • Ͱ΋ࠓ͔Β஌ݟΛཷΊ͓ͯ͘Ձ஋͸͋Δͱࢥ͏ɻ • ·ͣ͸ࣾ಺΍ݸਓͷখ͞ͳϓϩδΣΫτͰࢼͯ͠Έͯ ͸ʁ • lit-html ΍ Polymer ͷಈ͖΋׆ൃͳͷͰɺؾ͕ख़͢Δ ͷΛ৺଴ͪʹ͠·͠ΐ͏ʂ

Slide 47

Slide 47 text

We are hiring! Kaizen Platform Ͱ͸ΤϯδχΞΛืू͍ͯ͠·͢ɻ ڵຯͷ͋Δํ͸ https://jobs.lever.co/kaizenplatform?team=Engineer ·Ͱʂ