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
4k
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
27k
unstated-next による Redux に頼らない状態管理の考察
jmblog
9
5k
雰囲気でやってる人向けの Redux 再入門
jmblog
21
6.2k
わかりやすいグラフを作ろう
jmblog
3
1.2k
gulp: The Good Parts
jmblog
29
5.8k
CSS in JS と CSS Modules
jmblog
25
4.5k
PostCSS とは何か
jmblog
38
9.5k
Kaizen Platform における UI ライブラリのワークフロー
jmblog
30
6k
フロントエンドエンジニアのための Dotfiles
jmblog
53
8.4k
Other Decks in Programming
See All in Programming
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
490
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
180
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
2024 컴포즈 정원사
jisungbin
0
150
REXML改善のその後
naitoh
0
190
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
590
Jakarta EE meets AI
ivargrimstad
0
390
What is Parser
yui_knk
9
4.1k
Featured
See All Featured
Web development in the modern age
philhawksworth
205
10k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
1
54
Building Applications with DynamoDB
mza
90
6k
Teambox: Starting and Learning
jrom
131
8.7k
Visualization
eitanlees
142
15k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Testing 201, or: Great Expectations
jmmastey
36
7k
How to Think Like a Performance Engineer
csswizardry
16
960
Atom: Resistance is Futile
akmur
261
25k
How to name files
jennybc
75
98k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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 ·Ͱʂ