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
520
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
950
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
630
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
500
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
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
180
RailsGirls IZUMO スポンサーLT
16bitidol
0
160
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
C++20 射影変換
faithandbrave
0
560
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
Discover Metal 4
rei315
2
120
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
500
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
750
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
500
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
740
Goで作る、開発・CI環境
sin392
0
200
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
Into the Great Unknown - MozCon
thekraken
39
1.9k
RailsConf 2023
tenderlove
30
1.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How to Ace a Technical Interview
jacobian
277
23k
For a Future-Friendly Web
brad_frost
179
9.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Thoughts on Productivity
jonyablonski
69
4.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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