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.1k
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
5.1k
雰囲気でやってる人向けの Redux 再入門
jmblog
21
6.3k
わかりやすいグラフを作ろう
jmblog
3
1.3k
gulp: The Good Parts
jmblog
29
5.8k
CSS in JS と CSS Modules
jmblog
25
4.6k
PostCSS とは何か
jmblog
38
9.7k
Kaizen Platform における UI ライブラリのワークフロー
jmblog
30
6.1k
フロントエンドエンジニアのための Dotfiles
jmblog
53
8.5k
Other Decks in Programming
See All in Programming
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
600
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
290
return文におけるstd::moveについて
onihusube
1
1.4k
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
720
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
130
サーバーゆる勉強会 DBMS の仕組み編
kj455
0
110
Androidアプリの One Experience リリース
nein37
0
550
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
380
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
800
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
270
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
320
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Navigating Team Friction
lara
183
15k
Agile that works and the tools we love
rasmusluckow
328
21k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Why Our Code Smells
bkeepers
PRO
335
57k
Documentation Writing (for coders)
carmenintech
67
4.5k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How to Think Like a Performance Engineer
csswizardry
22
1.3k
A designer walks into a library…
pauljervisheath
205
24k
Fireside Chat
paigeccino
34
3.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
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 ·Ͱʂ