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
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
Search
tipo159
February 09, 2018
Programming
0
540
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
・Webコンポーネント関連仕様の各ブラウザ実装状況
・lit-html
・HTML Template Instantiation
・データバインディングの課題
tipo159
February 09, 2018
Tweet
Share
More Decks by tipo159
See All by tipo159
Type-safe front-end development using Rust/Rustを使った型安全なフロントエンド開発
tipo159
0
320
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
440
REASONの紹介 / Introductory talk about REASON
tipo159
1
360
PWAで何ができるようになるのか / What does PWA do
tipo159
1
870
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
530
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
430
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
550
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.1k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
860
Other Decks in Programming
See All in Programming
Advanced App Shrinking Techniques
cbeyls
2
150
リハビリmruby
kishima
1
160
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Introduction to GitOps
hwchiu
0
110
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Featured
See All Featured
Facilitating Awesome Meetings
lara
46
5.8k
What's new in Ruby 2.0
geeforr
338
31k
Designing Experiences People Love
moore
136
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Producing Creativity
orderedlist
PRO
340
39k
The Cult of Friendly URLs
andyhume
75
5.9k
Designing for humans not robots
tammielis
247
25k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Infographics Made Easy
chrislema
238
18k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Transcript
Webίϯϙʔωϯτؔ࿈ͷ࠷৽ಈ ٢ࣉ.pm #13 2018.2.9 tipo159
ΞδΣϯμ • Webίϯϙʔωϯτؔ࿈༷ͷ֤ϒϥβ࣮ঢ়گ • lit-html • HTML Template Instantiation •
σʔλόΠϯσΟϯάͷ՝ 2
Custom Elements v1 • ৽͍͠DOMཁૉΛఆٛ͢ΔͨΊͷ༷ • W3CͰ2016.10.13ͷϫʔΩϯάυϥϑτ͕࠷৽ https://www.w3.org/TR/custom-elements/ • ֤ϒϥβͷαϙʔτঢ়گ(https://caniuse.com)
3
Shadow DOM v1 • ΧϓηϧԽ͞ΕͨϚʔΫΞοϓͱελΠϧΛఆٛ͢Δͨ Ίͷ༷ • W3CͰ2017.9.5ͷϫʔΩϯάυϥϑτ͕࠷৽ https://www.w3.org/TR/shadow-dom/ •
֤ϒϥβͷαϙʔτঢ়گ(https://caniuse.com) 4
HTML imports • HTMLυΩϡϝϯτΛଞͷHTMLυΩϡϝϯτͰ࠶ར༻ ͢ΔͨΊͷ༷ • 2017.6.5ʹHTML imports͔ΒͷελΠϧআ͕ఏҊ ͞Εͨ https://github.com/TakayoshiKochi/
deprecate-style-in-html-imports • ES2015ͷϞδϡʔϧͰସՄೳ 5
HTML Template • ϚʔΫΞοϓͷஅยΛςϯϓϨʔτͱͯ͠ఆٛ͢ΔͨΊ ͷ༷ • W3CͰ2014.3.18ͷϫʔΩϯάυϥϑτ͕࠷৽ https://www.w3.org/TR/html-templates/ • ֤ϒϥβͷαϙʔτঢ়گ(https://caniuse.com)
6
lit-html • Polymer Summit 2017(2017.8.22-23)ͰΞφϯε͞Εͨ PolymerLabsͷϓϩδΣΫτ https://github.com/Polymer/lit-html • htmlλάؔHTMLςϯϓϨʔτ͔ΒTemplateResultΛ࡞ ɼrenderؔTemplateResult͔ΒDOMίϯςφΛ࡞
const items = [1, 2, 3]; const render = () => html`items = ${items.map((i) => `item: ${i}`)}`; • 0.8.0ͷϦϦʔε४උதʢ·ͩϓϩμΫγϣϯίʔυʹ͑ Δ࣭Ͱͳ͍ʣ 7
js-framework-benchmark (Duration) https://github.com/krausest/js-framework-benchmark 8 WBOJMMBKT OPOLFZFE MJUIUNM WOPO BOHVMBS WOPO
SFBDU W WVFW OPOLFZFE DSFBUFSPXT SFQMBDF BMMSPXT QBSUJBM VQEBUF TFMFDUSPX TXBQSPXT SFNPWFSPX DSFBUFNBOZ SPXT BQQFOE SPXTUP DMFBSSPXT TMPXEPXO HFPNFUSJD
js-framework-benchmark (Startup metrics) https://github.com/krausest/js-framework-benchmark 9 WBOJMMBKT OPOLFZFE MJUIUNM WOPO LFZFE
BOHVMBS WOPO LFZFE SFBDU W OPOLFZFE WVFW OPOLFZFE DPOTJTUFOUMZ JOUFSBDUJWF TDSJQU CPPUVQUJNF NBJOUISFBE XPSLDPTU UPUBMCZUF XFJHIU
js-framework-benchmark (Memory allocation) https://github.com/krausest/js-framework-benchmark 10 WBOJMMBKT OPOLFZFE MJUIUNM WOPO LFZFE
BOHVMBS WOPO LFZFE SFBDU W OPOLFZFE WVFW OPOLFZFE SFBEZ NFNPSZ SVONFNPSZ VQEBUF XBUDIUI SPXGPSL SPXT SFQMBDFL SPXT DSFBUJOH DMFBSJOHL SPXT
HTML Template Instantiation • 2017.11.1ʹApple͔ΒఏҊ͞ΕͨHTMLςϯϓϨʔτͷ ωΠςΟϒͳΠϯελϯεԽͷํ๏ https://github.com/w3c/webcomponents/blob/gh- pages/proposals/Template-Instantiation.md • template
typeʹରͯ͠template create callbackؔΛ ఆٛ͢Δ͜ͱʹΑΓɼಠࣗͷςϯϓϨʔτΤϯδϯΛ࡞ Մೳ 11
HTML Template Instantiationͷྫ • ςϯϓϨʔτ <template type="my-template-type" id="contactTemplate"><section><h1>{{name}}</ h1>Email: <a
href=“mailto:{{email}}">{{email}}</a></section></template> • template create callbackؔ document.defineTemplateType('my-template-type', { processCallback: function (instance, parts, state) { for (const part of parts) part.value = state[part.expression]; } }); • ςϯϓϨʔτͷ༻ྫ rniwa = {name: "R. Niwa", email: "
[email protected]
"}; document.body.appendChild(contactTemplate.createInstance(rniwa)); • ੜ͞ΕΔHTML <section><h1>R. Niwa</h1>Email:<a href="mailto:
[email protected]
">
[email protected]
</a></section> 12
σʔλόΠϯσΟϯάͷ՝ • σʔλόΠϯσΟϯάͷඪ४͕ͳ͍ • Webίϯϙʔωϯτͷ࠷ॳͷఏҊ࣌ʹؚ·Ε͍ͯͨModel Driven Viewsͱ͍͏σʔλόΠϯσΟϯάɼඪ४Խ͞Εͳ ͔ͬͨ • Polymer
3.0͕2018ୈ̍ΫΥʔλʔͷऴΘΓʹग़Δ༧ఆ • Skate.js 5.0 beta 4͕2017.11.28ʹϦϦʔε • Slim.js 3.2.1͕2017.12.11ʹϦϦʔε • Stencil 0.4.0͕2018.2.9ʹϦϦʔε 13