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
590
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
430
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
510
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
950
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
620
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
490
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
630
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
900
Other Decks in Programming
See All in Programming
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
670
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
300
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
Create a website using Spatial Web
akkeylab
0
300
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
110
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
44
29k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
210
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Using AI Tools Around Software Development
inouehi
0
1.2k
生成AIで日々のエラー調査を進めたい
yuyaabo
0
630
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Optimizing for Happiness
mojombo
379
70k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Rails Girls Zürich Keynote
gr2m
94
14k
Producing Creativity
orderedlist
PRO
346
40k
Typedesign – Prime Four
hannesfritz
42
2.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Unsuck your backbone
ammeep
671
58k
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