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
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Rails アプリ地図考 Flush Cut
makicamel
1
110
ARA Ansible for the teams
kksat
0
150
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Six Lessons from altMBA
skipperchong
27
3.6k
Designing Experiences People Love
moore
139
23k
Building Your Own Lightsaber
phodgson
104
6.2k
Faster Mobile Websites
deanohume
306
31k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Automating Front-end Workflow
addyosmani
1367
200k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.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ͷ ࠷దղͱ͔ා͍هࣄ͕ଟ͍ ͷͰଟ໘ന͍