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
WebComponentsについて
Search
Shunya Shishido
October 06, 2014
Programming
0
280
WebComponentsについて
社内勉強会で発表
Shunya Shishido
October 06, 2014
Tweet
Share
More Decks by Shunya Shishido
See All by Shunya Shishido
PWA導入の成果と課題 / nikkei-pwa-html5conf2018
sisidovski
24
17k
Breaking the news in Japan: building the modern web in the far east
sisidovski
0
260
チーム開発について / Team Development with agile
sisidovski
0
390
日経電子版を速くする / nikkei-inside-frontend
sisidovski
49
25k
CDNを活用した日経電子版のネットワーク最適化とサイト高速化 / Nikkei ITPro CDN
sisidovski
20
8.4k
日経電子版 サイト高速化とPWA対応 / nikkei-high-performance-pwa
sisidovski
68
200k
Other Decks in Programming
See All in Programming
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
SwiftUI Viewの責務分離
elmetal
PRO
0
150
DROBEの生成AI活用事例 with AWS
ippey
0
130
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The World Runs on Bad Software
bkeepers
PRO
67
11k
BBQ
matthewcrist
86
9.5k
Unsuck your backbone
ammeep
669
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Transcript
<web-‐components>
about me • ໊લ – ࣡ށढ़࠸ – ssd, sisidovski
• Front EndϝΠϯ
ࠓҰ͕ΜΔ͍ͧʂ
None
None
None
<ganbaru-‐zoi> • <ganbaru-‐zoi></ganbaru-‐zoi>ͱॻ͚͑ΔΧελϜλά – ͍ΘΏΔWebComponents – PolymerΛͬͨ
– chrome, firefox, safari, IE10ʙͰ͑Δͣ • github – https://github.com/sisidovski/zoi • bower – $ bower install ganbaru-‐zoi
DEMO http://sisidovski.github.io/zoi/
<ganbaru-‐zoi> • HTMLͱCSSɺϨϯμϦϯάޙΫϦοΫ࣌ͷৼΔ ͍Λ·ͱΊͯ1ͭͷίϯϙʔωϯτʹ͍ͯ͠Δ • ӨΛ࡞͍ͬͯΔCSS, Ξχϝʔγϣϯ෦ Polymer͕ఏڙ͍ͯ͠ΔΧελϜλάΛ෦Ͱར༻
• ਧ͖ग़͠ʹදࣔ͢ΔจࣈྻσʔλόΠϯσΟϯ άͰཧ
WebComponents? • ཁ͢Δʹʮ෦୯ҐͰׂʯ • Webඪ४ʹͳΔ༧ఆ – PCϒϥβͰؾ݉Ͷͳ͑͘Δʹ͏গ͠ઌͩͱࢥ͏
• ίϯϙʔωϯτΧϓηϧԽ͞ΕΔ – ֎෦ΛԚછ͠ͳ͍ • ίϯϙʔωϯτ࠶ར༻͕Մೳ • ͓͢͢ΊϦϯΫ – http://customelements.io/
WebComponents? • Custom Elements ෦Λ࡞ΔΈ • HTML Imports
෦Λݺͼग़͢Έ • Template ෦Λ͏Έ • Shadow DOM ෦ΛΧϓηϧԽ͢ΔΈ ্ه4ͭΛΈ߹ΘͤͯUIίϯϙʔωϯτ͕࡞ΕΔ ˠWebComponents
Polymer? • WebComponentsඇରԠϒϥβͷPolyfillϥΠϒ ϥϦ – ҋͷٕज़ͰAPIΛ༻ҙٖͯ͠ࣅతʹ͑ΔΑ͏ʹͯ͠ ͍Δ –
ྫ͑Shadow DOMݱঢ়chromeͱoperaͰ͔͑͠ ͳ͍ʢFirefox32Ҏ߱Ͱ༧ఆΒ͍͠ʣ • WebComponentsͷapiΛநԽ͍ͯ͘͢͠ • σʔλόΠϯσΟϯά
in other frameworks • ΧελϜλά࡞ΕΔ – Angular.jsͷσΟϨΫςΟϒ –
Knockout.js3.2͔ΒComponentsͱ͍͏ػೳͰ͑ΔΑ͏ʹͳΔ – Vue.jsComponent • WebComponentsͰͳ͍ – Shadow DOMʹରԠ͍ͯ͠ͳ͍ͷͰɺҾ͖ଓ͖άϩʔόϧԚછ ʹؾΛ͚ͭͨ։ൃ͕ඞཁ • Ұ෦ݹ͍IEʹରԠ͍ͯ͠Δ – ϑϨʔϜϫʔΫʹΑΓ͚Γ – Ұ෦੍͕͋ͬͨΓ͢Δ͕ɺPolymerΑΓखް͍
࡞ͬͯΈͨײ • ίϯϙʔωϯτ͝ͱʹΧϓηϧԽͰ͖Δͷେ͖͍ – ಛʹνʔϜ։ൃͰҖྗΛൃشͦ͠͏ • ίϯϙʔωϯτؒͰґଘ͕ؔ͋Δͱ͖ʹΠϯϙʔτ ͢Δॱংͱ͔Λؾʹ͠ͳͪ͘Ό͍͚ͳͯ͘ΞϨ
• ίϯϙʔωϯτͦΕͧΕඇಉظͰಡΈࠐ·ΕΔͷͰɺ Կ͠ͳ͍ͱϦΫΤετ͕രൃతʹ૿͑Δ – Polymer/Vulcanizeͱ͍͏πʔϧͰ·ͱΊΒΕΔͬΆ͍͚Ͳ ·ͩࢼͯ͠ͳ͍ɻgrunt/gulpϓϥάΠϯطʹ͋Δ
·ͱΊ • NewGame!ͷΧελϜλάΛ࡞ͬͨ • ະདྷͬΆ͍WebComponentsͱPolymerͷ • WebComponents·ͩ·ͩ՝ଟͦ͏
એ • ҕୗൢച • 8/17() ϗʔϧ͖-‐36B • Socket.IO
1.0ͷهࣄॻ͖· ͨ͠ • γΣϧεΫϦϓτͰWebΞ ϓϦ࡞ͬͨͱ͔Imutableͷ ࠷దղͱ͔ා͍هࣄ͕ଟ͍ ͷͰଟ໘ന͍