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
I/O ‘18で発表された Polymer の update に見る Web Components の 過去/現在、そして未来/Jsfes-2018-summer
Search
Kenichiro Kishida
May 19, 2018
Technology
0
200
I/O ‘18で発表された Polymer の update に見る Web Components の 過去/現在、そして未来/Jsfes-2018-summer
I/O ‘18で発表された Polymer の発表を5分のLTに圧縮して紹介します
Kenichiro Kishida
May 19, 2018
Tweet
Share
More Decks by Kenichiro Kishida
See All by Kenichiro Kishida
Code兄弟での CI/CDをいい感じにする方法 / phpstudy-2024-06
sizuhiko
0
75
Webアクセシビリティワークショップを社内でやってみた / phpconfuk-2024
sizuhiko
1
160
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
75
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
220
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
110
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
260
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
1.3k
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
300
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
630
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
Classmethod Odyssey 登壇資料
yamahiro
0
390
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
Azure AI ことはじめ
tsubakimoto_s
0
130
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Designing the Hi-DPI Web
ddemaree
276
34k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
RailsConf 2023
tenderlove
16
720
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Raft: Consensus for Rubyists
vanstee
134
6.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Being A Developer After 40
akosma
72
580k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Transcript
*0bͰൃද͞Εͨ 1PMZNFSͷVQEBUFʹݟΔ 8FC$PNQPOFOUTͷ աڈݱࡏɺͦͯ͠ະདྷ ॳՆͷ+BWB4DSJQUࡇ ,FOJDIJSP,JTIJEB !TJ[VIJLP
,FOJDIJSP,JTIJEB 5PLZP +"1"/ TJ[VIJLP!HNBJMDPN !TJ[VIJLP IUUQTHJUIVCDPNTJ[VIJLP IUUQCMPHPQFOUPLZPKQ
)JTUPSZ
2013 Polymer v0.0.20130711
2014 Polymer v0.5
2015 Polymer v1.0
2017 Polymer v2.0
2018
Polymer 3.0
w ࠷৽ͷόʔδϣϯ w όʔδϣϯ·ͩ·ͩݱ w (PPHMFͷ$ISPNFνʔϜ͕։ൃ w 1PMZpMMͰͳ͍ 1PMZNFS
8FC$PNQPOFOUT w4IBEPX%0. w$VTUPN&MFNFOUT w)5.-*NQPSUT w)5.-5FNQMBUFT https://github.com/w3c/webcomponents
6TF5IF1MBUGPSN
None
<iron-ajax auto url="https://www.googleapis.com/youtube/v3/search" params='{"part":"snippet", "q":"polymer", "key": "xxxx", "type": "video"}' handle-as="json"
last-response="{{ajaxResponse}}"></iron-ajax> <template is="dom-repeat" items="[[ajaxResponse.items]]"> <div class="horizontal-section"> <h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2> <iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image> <p>[[item.snippet.description]]</p> </div> </template> https://github.com/PolymerElements/iron-ajax
None
w8FC$PNQPOFOUTΛ࡞ΔͨΊͷܰྔ'8 wΞϓϦέʔγϣϯ࡞ΕΔ wঢ়ଶཧͱ͔ίϯϙʔωϯτผͷϥ ΠϒϥϦ͕ඞཁ wϑϧελοΫͰͳ͍ w5ZQF4DSJQUαϙʔτ
.BUFSJBMDPNQPOFOUT w (PPHMF*0Ͱൃද͞ Εͨ৽͍͠σβΠϯͷ 8FC$PNQPOFOUT w IUUQTHJUIVCDPN NBUFSJBMDPNQPOFOUT NBUFSJBMDPNQPOFOUT XFCDPNQPOFOUT
w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT EFNPTJOEFYIUNM
-JU&MFNFOU w 1PMZNFSϕʔεͷ ܰྔ$VTUPN&MFNFOU ϕʔεΫϥε w IUUQTHJUIVCDPN 1PMZNFSMJUFMFNFOU <script src="node_modules/@webcomponents/webcomponents-bundle.js"></script>
<script type="module"> import {LitElement, html} from '@polymer/lit-element'; class MyElement extends LitElement { static get properties() { return { mood: String }} _render({mood}) { return html`<style> .mood { color: green; } </style> Web Components are <span class="mood">${mood}</span>!`; } } customElements.define('my-element', MyElement); </script> <my-element mood="happy"></my-element>
18"4UBSUFS,JU w 1PMZNFSͰ࡞ΒΕͨ 18"σϞΞϓϦ w IUUQTHJUIVCDPN 1PMZNFSQXB TUBSUFSLJU w IUUQTQXBTUBSUFS
LJUBQQTQPUDPN
https://polymer-jp.org/
11.28 2017 5.19 2018 ▶︎
Polymer Versions • v1.11.0 • v2.2.0 • v3 (Preview) •
124 releases • v1.11.3 • v2.6.0 • v3.0.2 • 140 releases ▶︎ Up
Polymer CLI Versions 1.5.7 1.6.0 ▶︎ Up
8IZVTF)5.-*NQPSU /FFEFE1PMZpMM #PXFS .BEFCZ1PMZNFS
/FFE1PMZpMM
UP&4.PEVMFT
#PXFSUPOQN
8FBSFGSJFOET https://custom-elements-everywhere.com/
ະདྷ
w$444IBEPX1BSUT https://tabatkins.github.io/specs/css-shadow-parts/ w$VTUPN&MFNFOU3FHJTUFST https://github.com/w3c/webcomponents/issues/716 w1BDLBHFOBNFNBQT https://github.com/domenic/package-name-maps w)5.-.PEVMFT https://github.com/w3c/webcomponents/issues/645 https://github.com/PolymerLabs/html-modules-toolkit w)5.-5FNQMBUF*OTUBOUJBUJPO
https://github.com/w3c/webcomponents/blob/gh-pages/ proposals/Template-Instantiation.md
WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp