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
270
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
240
チーム開発について / Team Development with agile
sisidovski
0
370
日経電子版を速くする / 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
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
役立つログに取り組もう
irof
28
9.6k
cmp.Or に感動した
otakakot
3
200
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
940
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
140
CSC509 Lecture 13
javiergs
PRO
0
110
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
190
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing the Hi-DPI Web
ddemaree
280
34k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Embracing the Ebb and Flow
colly
84
4.5k
What's new in Ruby 2.0
geeforr
343
31k
Designing Experiences People Love
moore
138
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Scaling GitHub
holman
458
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Thoughts on Productivity
jonyablonski
67
4.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
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ͷ ࠷దղͱ͔ා͍هࣄ͕ଟ͍ ͷͰଟ໘ന͍