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 Compon...
Search
tipo159
February 09, 2018
Programming
0
570
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
400
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
480
REASONの紹介 / Introductory talk about REASON
tipo159
1
380
PWAで何ができるようになるのか / What does PWA do
tipo159
1
920
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
600
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
470
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
610
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.2k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
890
Other Decks in Programming
See All in Programming
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Software Architecture
hschwentner
6
2.1k
チームリードになって変わったこと
isaka1022
0
190
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
730
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
320
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
120
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
490
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
45
16k
Grafana Cloudとソラカメ
devoc
0
140
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Thoughts on Productivity
jonyablonski
69
4.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Unsuck your backbone
ammeep
669
57k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
320
A better future with KSS
kneath
238
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
430
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
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