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
Polymer の update に見る Web Components の過去/現在、そして未来 / jsfes-2017-autumn
Search
Kenichiro Kishida
November 18, 2017
Technology
1
4.4k
Polymer の update に見る Web Components の過去/現在、そして未来 / jsfes-2017-autumn
秋のJavaScript祭 in mixi 2017 のスライドです。
https://javascript-fes.doorkeeper.jp/events/66335
Kenichiro Kishida
November 18, 2017
Tweet
Share
More Decks by Kenichiro Kishida
See All by Kenichiro Kishida
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
64
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
190
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
100
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
220
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
1.2k
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
290
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
600
E2Eテストに向き合う/PHPerKaigi2020
sizuhiko
1
2.3k
PHPを学ぶということ / phpcon-2019
sizuhiko
1
1.8k
Other Decks in Technology
See All in Technology
KubeCon EU: Unlocking new Platform Experiences with Open Interfaces
salaboy
1
360
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.4k
AWS アーキテクチャクイズ
yuu26
2
700
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
130
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.1k
任意コード実行の原理
ffri
0
160
『QAという人』が必要ではなく、『QAという技術』が必要
sadonosake
2
450
WebXR で Web をもっと楽しもう
qst_exe
0
110
統計的学習理論読み Chapter 1
kmatsui
2
470
事業部を超えた 開発生産性向上に挑戦する
kentakozuka
5
930
Oracle Database で機械学習を始めよう! Oracle Machine Learning
oracle4engineer
PRO
1
140
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
220
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Done Done
chrislema
178
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Navigating Team Friction
lara
177
13k
The Language of Interfaces
destraynor
150
22k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Embracing the Ebb and Flow
colly
78
4.1k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Being A Developer After 40
akosma
56
580k
Transcript
1PMZNFSͷVQEBUFʹݟΔ 8FC$PNQPOFOUTͷ աڈݱࡏɺͦͯ͠ະདྷ ळͷ+BWB4DSJQUࡇJONJYJ ,FOJDIJSP,JTIJEB !TJ[VIJLP
,FOJDIJSP,JTIJEB 5PLZP +"1"/ TJ[VIJLP!HNBJMDPN !TJ[VIJLP IUUQTHJUIVCDPNTJ[VIJLP IUUQCMPHPQFOUPLZPKQ
)JTUPSZ
)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ
"KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃͨ͠ )5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ
J1IPOF͕ൃച )5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃͨ͠
8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ )5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃͨ͠ J1IPOF͕ൃച
5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε )5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃͨ͠
J1IPOF͕ൃച 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ
)5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ )5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃͨ͠
J1IPOF͕ൃച 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε
1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ )5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃͨ͠
J1IPOF͕ൃച 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ
1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ XFCDPNQPOFOUTPSH౷ҰԽ 1PMZNFS͕ൃද͞ΕΔ 1PMZNFS+BQBO͕ൃͨ͠ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ )5.-קࠂ
9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃͨ͠ J1IPOF͕ൃച 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ
)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃͨ͠ J1IPOF͕ൃച 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ
5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ 1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ XFCDPNQPOFOUTPSH౷ҰԽ 1PMZNFS͕ൃද͞ΕΔ 1PMZNFS+BQBO͕ൃͨ͠ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ
8FC$PNQPOFOUT w4IBEPX%0. w$VTUPN&MFNFOUT w)5.-*NQPSUT w)5.-5FNQMBUFT https://github.com/w3c/webcomponents
4IBEPX%0.
$VTUPN&MFNFOUT 定義: class MyPolymerElement extends Polymer.Element { ... } customElements.define('my-polymer-element',
MyPolymerElement); 利用方法: <my-polymer-element></my-polymer-element>
)5.-5FNQMBUF <dom-module id="x-custom"> <template> Hello World from <span id="name"></span>! </template>
<script> class MyElement extends Polymer.Element { static get is() { return 'x-custom' } ready() { super.ready(); this.$.name.textContent = this.tagName; } } </script> </dom-module>
)5.-*NQPSUT <head> <link rel="import" href="/path/to/imports/stuff.html"> </head>
1PMZNFS https://www.polymer-project.org
None
)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃͨ͠ J1IPOF͕ൃച 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ
5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ 1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ XFCDPNQPOFOUTPSH౷ҰԽ 1PMZNFS͕ൃද͞ΕΔ 1PMZNFS+BQBO͕ൃͨ͠ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ
)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃͨ͠ J1IPOF͕ൃച 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ
5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ 1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ XFCDPNQPOFOUTPSH౷ҰԽ 1PMZNFS͕ൃද͞ΕΔ 1PMZNFS+BQBO͕ൃͨ͠ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ
6TF5IF1MBUGPSN
w1PMZNFS&MFNFOUεʔύʔΫϥε wΠϕϯτϋϯυϦϯά wσʔλγεςϜ wϔϧύʔΤϨϝϯτ w$-*πʔϧ
ຊͰʜ
https://polymer-jp.org/
5.27 2017 11.28 2017 ▶︎
Polymer Versions • 1.9.1 stable • 2.0.0 stable • 109
releases • 1.11.0 stable • 2.2.0 stable • 124 releases ▶︎ Up Up Up
Polymer CLI Versions 1.1.0 1.5.7 ▶︎ Up
Polyfill Versions 1.0.1 1.0.17 ▶︎ Up Bower Bower
• bosonic 1.0 • SkateJS 5.0.7-β3 • x-tag 1.5.11 •
Slim.js 3.0.6 Web Components Libraries • bosonic 1.0 • SkateJS 4.6.7 • x-tag 1.5.11 • Slim.js 2.9.9 ▶︎ Up Up
1PMZNFS4VNNJU
What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5FNQMBUF 4IBEPX%0.
$VTUPN&MFNFOUT )5.-*NQPSUT ✅ ✅ ✅ ✅ ✅ ‼ ✅ ✅ ✅ ‼ ✅ ‼ ✅ ✅ ✅ ✅
What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5PEBZ
/BUJWF ‒ ❌ 4VQQPSUT%FFQ%FQFOEFODJFT ✅ ✅ 'JMF-FWFM /P#VOEMJOH3FRVJSFE ✅ ✅ )5.-*NQPSUT
&4.PEVMFT What’s Next for Polymer (Polymer Summit 2017) ΑΓ ✅
/BUJWF ✅ 4VQQPSUT%FFQ%FQFOEFODJFT ✅ 'JMF-FWFM /P#VOEMJOH3FRVJSFE
What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5FNQMBUF 4IBEPX%0.
$VTUPN&MFNFOUT +4.PEVMFT ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅
#PXFS What’s Next for Polymer (Polymer Summit 2017) ΑΓ
5PEBZ .BOBHFT%FQFOEFODJFT ✅ ✅ 3FTPMDFT7FSTJPO$POqJDUT ✅ ✅ *OTUBMMT'MBU%FQFOEFODZ5SFF ✅ ✅ "DUJWF$PNNVOJUZ ✅ ❌
:BSO OQN What’s Next for Polymer (Polymer Summit 2017) ΑΓ
✅ .BOBHFT%FQFOEFODJFT ✅ 3FTPMDFT7FSTJPO$POqJDUT ✅ *OTUBMMT'MBU%FQFOEFODZ5SFF ✅ "DUJWF$PNNVOJUZ
4&04IBSJOH https://render-tron.appspot.com/
8FBSFGSJFOET https://custom-elements-everywhere.com/
ͦ͏ͩ1PMZNFS͓͏
WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp