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

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

WebComponents.kyoto Meetup #2 での発表資料です。
https://wc-kyoto.connpass.com/event/78690/

790f55ccde7a62df8f25747586657090?s=128

Yoshihide Jimbo

March 04, 2018
Tweet

Transcript

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

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

  3. ͓࿩͢Δ͜ͱ ᶃ ࣾ಺ UI ϥΠϒϥϦʮKaizen Custom Elementsʯͷ঺հ ᶄ Web Components

    Λ࠾༻ͨ͠എܠ ᶅ ࣮૷Ͱۤ࿑ͨ͠఺
  4. ᶃ ࣾ಺ UI ϥΠϒϥϦʮKaizen Custom Elementsʯͷ঺հ

  5. 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> ""...
  6. Kaizen Custom Elements ͷಛ௃ • Web Components (Custom Elements +

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

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

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

  10. ᶄ Web Components Λ࠾༻ͨ͠എܠ

  11. ͜ͷ൒೥ؒͰ 6 ͭͷ Single Page Application Λ։ൃ Angular apps React

    apps 2 4 • ٕ͋͑ͯज़ελοΫ͸ݻఆԽͤͣଟ༷ੑΛ΋ͨͤΔ • খ͘͞࡞ࣺͬͯͯ΍͘͢͢Δ • ֤ϝϯόʔ͕࠷଎Ͱ੒ՌΛग़͢͜ͱʹͩ͜ΘΔ
  12. ҰํͰ Ϙλϯ΍πʔϧόʔͱ͍ͬͨϓϦϛςΟϒͳίϯϙʔωϯτΛ ຖճ࣮૷͢Δͷ͸໘౗͍͘͞… ΞϓϦέʔγϣϯ͝ͱʹඍົʹσβΠϯ͕ҧͬͯ͠·͏…

  13. Angular Ͱ΋ React Ͱ΋ʢԿͳΒ Vue Ͱ΋ Preact Ͱ΋ʣ࢖͑Δ ڞ௨ͷ UI

    ϥΠϒϥϦ͕ཉ͍͠ɻ Web Components ͷग़൪Ͱ͸ʁʂ
  14. https://custom-elements-everywhere.com/

  15. None
  16. Angular ͱ Custom Elements ͷซ༻͸໰୊ͳͦ͞͏ɻ React ΋ Basic Tests ͸͢΂ͯ௨͍ͬͯΔͷͰɺϓϦϛςΟϒͳ

    ίϯϙʔωϯτʹ༻్Λݶఆ͢Ε͹ɺ໰୊ʹͳΔ͜ͱ͸ͳͦ͞͏ɻ
  17. None
  18. None
  19. Chrome / Safari ͸͔ͳΓαϙʔτ͕ਐΜͰΔɻ Edge ͱ Firefox ͸ະରԠ͕ͩɺ౰໘͸ Polyfill Ͱ྇͛ͦ͏ɻ

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

  21. ᶅ ࣮૷Ͱۤ࿑ͨ͠఺

  22. Shadow DOM ͷελΠϧ໰୊

  23. Shadow DOM ͷελΠϧ໰୊ Firefox ͱ Edge ͸ Shadow DOM ʹ·ͩରԠ͍ͯ͠ͳ͍ͷ

    ͰɺελΠϧ͕είʔϓԽ͞Εͳ͍ɻ ShadyCSS Λ࢖͑͹ɺٖࣅతʹείʔϓԽ͕࣮ݱͰ͖Δɻ
  24. lit-html v0.7

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

  26. lit-html v0.7 Firefox で Shadow DOM に スタイルが効かないぞ lit-html Λ

    ShadyCSS ͷ
 ૬ੑ͕Α͘ͳ͍ʁ
  27. lit-html v0.7 Polymer v3.0

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

  29. lit-html v0.7 Polymer v3.0 React + CSS in JS でも

    Shadow DOM のスタイル問題を
 解決できる気がする!
 
 であれば、Polymer ではなく
 すでに知⾒がたまっている React を
 使ったほうがよくない? React + CSS in JS
  30. lit-html v0.7 Polymer v3.0 ちょっと待てよ 
 配布する Custom Elements の

    ライブラリに React を同梱するの? React + CSS in JS
  31. lit-html v0.7 Polymer v3.0 React + CSS in JS lit-html

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

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

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

    + CSS in JS Polymer v3.0 lit-html v0.9
  35. 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 が サポートされた ͜ΕͰղܾͰ͖ͦ͏ʢࠓ͜͜ʣ
  36. https://jmblog.jp/posts/2018-02-15/lit-html-with-shadycss/

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

  38. 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 ͰΤϥʔʹͳΔ͜ͱ͕ൃ֮ɻ
  39. http://bit.ly/2tRViJ9 "͍͔ͭ͘ͷαʔυύʔςΟͷύοέʔδ͸ɺES5 ʹม׵ͤͣʹ ES6 ͷ ·· npm ʹެ։ͯ͠·͕͢ɺES6 Λαϙʔτ͍ͯ͠ͳ͍ϒϥ΢β΍ πʔϧͰ໰୊ʹͳΔͷͰɺগͳ͘ͱ΋͋ͱ਺೥͸ES5

    Ͱ npm ΁ެ։͢ Δ͜ͱΛ͓͢͢Ί͍ͯ͠·͢ɻ" ͭ·Γ ES6 ʹͳ͍ͬͯΔͷ͕ѱ͍ͱɻ
  40. ͔͠͠ɺCustom Elements ͸ ES6 ͷΫϥεߏจΛ࢖͏ඞཁ͕͋Δɻ ES5 ʹม׵ͯ͠͠·͏ͱɺϒϥ΢β࣮ߦ࣌ʹΤϥʔʹͳΔɻ ʢcustom-elements-es5-adapter.js Λ࢖͑͹Α͍͔΋͠Εͳ͍͕ɺ ͦ΋ͦ΋

    ES6 Λαϙʔτ͍ͯ͠Δϒϥ΢βΛର৅ͱ͍ͯ͠Δͷʹ Θ͟Θ͟ ES5 ʹม׵͢Δͷʁʣ
  41. (›°□°ʣ›ớ ᵲᴸᵲ

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

  43. rollup Ͱ2όʔδϣϯΛੜ੒

  44. index.html ͰಡΈࠐΜͰར༻

  45. ·ͱΊ

  46. ·ͱΊ • Web Components Λຊ൪౤ೖ͠Α͏ͱ͢Δͱɺ͍Ζ ͍ΖͱϋϚΔϙΠϯτ͸·ͩଟ͍ɻ • Ͱ΋ࠓ͔Β஌ݟΛཷΊ͓ͯ͘Ձ஋͸͋Δͱࢥ͏ɻ • ·ͣ͸ࣾ಺΍ݸਓͷখ͞ͳϓϩδΣΫτͰࢼͯ͠Έͯ

    ͸ʁ • lit-html ΍ Polymer ͷಈ͖΋׆ൃͳͷͰɺؾ͕ख़͢Δ ͷΛ৺଴ͪʹ͠·͠ΐ͏ʂ
  47. We are hiring! Kaizen Platform Ͱ͸ΤϯδχΞΛืू͍ͯ͠·͢ɻ ڵຯͷ͋Δํ͸ https://jobs.lever.co/kaizenplatform?team=Engineer ·Ͱʂ