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
290
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
270
チーム開発について / Team Development with agile
sisidovski
0
390
日経電子版を速くする / nikkei-inside-frontend
sisidovski
49
25k
CDNを活用した日経電子版のネットワーク最適化とサイト高速化 / Nikkei ITPro CDN
sisidovski
20
8.5k
日経電子版 サイト高速化とPWA対応 / nikkei-high-performance-pwa
sisidovski
68
200k
Other Decks in Programming
See All in Programming
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
250
生成AIの使いどころ
kanayannet
0
100
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
6
3k
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.2k
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
980
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
320
Going Structural with Named Tuples
bishabosha
0
170
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
240
AI時代のプログラミング教育 / programming education in ai era
kishida
23
20k
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.1k
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
プログラミング教育のコスパの話
superkinoko
0
120
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Music & Morning Musume
bryan
46
6.4k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
RailsConf 2023
tenderlove
29
1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building Applications with DynamoDB
mza
94
6.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Rails Girls Zürich Keynote
gr2m
94
13k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
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ͷ ࠷దղͱ͔ා͍هࣄ͕ଟ͍ ͷͰଟ໘ന͍