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
Web Components で 社内 UI ライブラリを作っている話
Search
Yoshihide Jimbo
March 04, 2018
Programming
11
4.3k
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
高齢者でも使えるプロダクトUIの挑戦 / Designing User Interfaces for the Elderly
jmblog
32
28k
unstated-next による Redux に頼らない状態管理の考察
jmblog
9
5.3k
雰囲気でやってる人向けの Redux 再入門
jmblog
21
6.6k
わかりやすいグラフを作ろう
jmblog
3
1.4k
gulp: The Good Parts
jmblog
29
5.9k
CSS in JS と CSS Modules
jmblog
25
4.7k
PostCSS とは何か
jmblog
38
9.9k
Kaizen Platform における UI ライブラリのワークフロー
jmblog
30
6.1k
フロントエンドエンジニアのための Dotfiles
jmblog
53
8.5k
Other Decks in Programming
See All in Programming
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
630
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
340
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
モテるデスク環境
mozumasu
3
130
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
930
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6.5k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
270
Webサーバーサイド言語としてのRustについて
kouyuume
0
2.2k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
870
CSC305 Lecture 06
javiergs
PRO
0
260
株式会社 Sun terras カンパニーデック
sunterras
0
390
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Producing Creativity
orderedlist
PRO
347
40k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The Cult of Friendly URLs
andyhume
79
6.6k
How GitHub (no longer) Works
holman
315
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
KATA
mclloyd
PRO
32
15k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
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 ·Ͱʂ