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
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
350
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
450
REASONの紹介 / Introductory talk about REASON
tipo159
1
360
PWAで何ができるようになるのか / What does PWA do
tipo159
1
880
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
550
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
430
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
570
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.1k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
870
Other Decks in Programming
See All in Programming
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
410
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
The Shape of a Service Object
inem
0
520
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
800
LangChainの現在とv0.3にむけて
os1ma
4
920
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
550
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
270
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
What's new in Ruby 2.0
geeforr
340
31k
The Invisible Customer
myddelton
119
13k
The Cult of Friendly URLs
andyhume
76
6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Become a Pro
speakerdeck
PRO
22
4.9k
Building Applications with DynamoDB
mza
90
6k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
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