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. 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> ""...
  2. 6.

    Kaizen Custom Elements ͷಛ௃ • Web Components (Custom Elements +

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

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

    apps 2 4 • ٕ͋͑ͯज़ελοΫ͸ݻఆԽͤͣଟ༷ੑΛ΋ͨͤΔ • খ͘͞࡞ࣺͬͯͯ΍͘͢͢Δ • ֤ϝϯόʔ͕࠷଎Ͱ੒ՌΛग़͢͜ͱʹͩ͜ΘΔ
  5. 13.

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

    ϥΠϒϥϦ͕ཉ͍͠ɻ Web Components ͷग़൪Ͱ͸ʁʂ
  6. 15.
  7. 17.
  8. 18.
  9. 23.

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

    ͰɺελΠϧ͕είʔϓԽ͞Εͳ͍ɻ ShadyCSS Λ࢖͑͹ɺٖࣅతʹείʔϓԽ͕࣮ݱͰ͖Δɻ
  10. 29.

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

    Shadow DOM のスタイル問題を
 解決できる気がする!
 
 であれば、Polymer ではなく
 すでに知⾒がたまっている React を
 使ったほうがよくない? React + CSS in JS
  11. 30.

    lit-html v0.7 Polymer v3.0 ちょっと待てよ 
 配布する Custom Elements の

    ライブラリに React を同梱するの? React + CSS in JS
  12. 31.

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

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

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

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

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

    + CSS in JS やはりお前じゃなきゃだめなのか Polymer v3.0
  15. 34.

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

    + CSS in JS Polymer v3.0 lit-html v0.9
  16. 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 が サポートされた ͜ΕͰղܾͰ͖ͦ͏ʢࠓ͜͜ʣ
  17. 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 ͰΤϥʔʹͳΔ͜ͱ͕ൃ֮ɻ
  18. 45.