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
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
66
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
190
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
110
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
230
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
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.2k
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
0
370
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
210
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
220
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
390
Building Dashboards as a Hobby
egmc
0
230
Cypress or Playwright?
rainerhahnekamp
0
110
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.4k
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
180
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
It's Worth the Effort
3n
180
27k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Designing with Data
zakiwarfel
96
4.8k
Code Review Best Practice
trishagee
55
15k
Clear Off the Table
cherdarchuk
84
310k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
KATA
mclloyd
15
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
A Modern Web Designer's Workflow
chriscoyier
689
190k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
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