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 Components and the Future of JS Frameworks
Search
bradgignac
May 17, 2014
Programming
3
660
Web Components and the Future of JS Frameworks
bradgignac
May 17, 2014
Tweet
Share
More Decks by bradgignac
See All by bradgignac
Why You Might Not Need Yet Another Environment
bradgignac
1
520
Understanding the Shift to Mobile
bradgignac
0
320
Front-End Operations
bradgignac
4
660
Intro to CoreOS
bradgignac
4
1.1k
Modular CSS
bradgignac
0
10
Rich Client Design Patterns
bradgignac
3
260
Other Decks in Programming
See All in Programming
最近追加した型の紹介とその振り返り
aki19035vc
0
170
【Go言語】golangci-lintの使い方
tomo1227
0
270
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
CSC307 Lecture 11
javiergs
PRO
0
240
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
生成AIをkintoneに連携してみた
hideg
0
230
Activities at Cairo Library
cairolibrary720
0
1.2k
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
CSC307 Lecture 05
javiergs
PRO
0
210
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Statistics for Hackers
jakevdp
792
220k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
A better future with KSS
kneath
231
17k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Done Done
chrislema
179
15k
How GitHub (no longer) Works
holman
305
140k
What's new in Ruby 2.0
geeforr
338
31k
Code Reviewing Like a Champion
maltzj
517
39k
Making Projects Easy
brettharned
111
5.7k
How to name files
jennybc
67
96k
Happy Clients
brianwarren
94
6.5k
Transcript
and the Future of JS Frameworks Web Components
None
None
@bradgignac bradgignac.com
A Brief History of JavaScript
1995 2004 2006 2011 2014 The Birth of JavaScript
JavaScript
C#
C
1995 2004 2006 2011 2014 The Birth of JavaScript
1995 2004 2006 2011 2014 Web 2.0
None
None
1995 2004 2006 2011 2014 Web 2.0
1995 2004 2006 2011 2014 jQuery
None
1995 2004 2006 2011 2014 jQuery
1995 2004 2006 2011 2014 Rise of the Microlibrary
None
None
1995 2004 2006 2011 2014 Rise of the Microlibrary
1995 2004 2006 2011 2014 A “Diverse Ecosystem”
None
Backbone
Angular
What’s the Difference?
What are Web Components?
Web Components enable Web application authors to define widgets with
a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.
Web Components give developers a composable, reusable method for packaging
HTML, CSS, and JavaScript.
Modal
<div class="modal"> <div class="modal-‐header">This Is My Title</div> <div
class="modal-‐content">Lorem ipsum dolor...</div> <div class="modal-‐footer"><!-‐-‐ Buttons -‐-‐></div> </div> <div>
<my-‐modal header="This Is My Title"> <p>Lorem ipsum dolor...</p> </my-‐modal>
<my-modal>
How do we use them?
Let’s Build a Modal
<my-‐modal header="This Is My Title"> <p>Lorem ipsum dolor sit
amet...</p> </my-‐modal> <my-modal>
<template id="modal"> <style scoped>...</style> <div class="modal-‐header"><!-‐-‐ Header -‐-‐></div>
<div class="modal-‐content"><content /></div> <div class="modal-‐footer"> <button>Cancel</button> <button>Save</button> </div> </template> Templates
<template id="my-‐modal"> <style scoped> @host {
... } .modal-‐header { ... } .modal-‐content { ... } .modal-‐footer { ... } </style> ... </template> Scoped Styles
var template, host; template = document.querySelector('#my-‐modal'); host = this.createShadowRoot(); host.appendChild(template.content.cloneNode(true));
Shadow DOM
var ModalPrototype, Modal; ModalPrototype = Object.create(HTMLElement.prototype); ModalPrototype.createCallback = function
() { ... }; Modal = document.register('my-‐modal', { prototype: ModalPrototype }); Custom Elements
HTML Imports ES6 Modules ES6 Module Loader Packaging
Mutation Observers Object.observe Node.bind Related Technologies
Encapsulation Performance Interoperability Better Frameworks Benefits
Using Web Components Today
Polymer Polymer('my-‐modal', { header: 'This Is My Header' });
Polymer <polymer-‐element name="my-‐modal" attributes="header"> <template> <style
scoped>...</style> <div class="modal-‐header">{{ header }}</div> <div class="modal-‐content"><content /></div> <div class="modal-‐footer"> <button>Cancel</button> <button>Save</button> </div> </template> <script>...</script> </polymer-‐element>
Angular angular.module('myModal').directive('myModal', function () { return {
restrict: 'E', transclude: true, templateUrl: 'myModal.html', scope: { header: '@' } }; });
Angular <div class="modal"></div> <style scoped>...</style> <div class="modal-‐header">{{ header
}}</div> <div class="modal-‐content" ng-‐transclude></div> <div class="modal-‐footer"> <button>Cancel</button> <button>Save</button> </div> </div>
Ember <script type="text/x-‐handlebars" id="components/my-‐modal"> <style scoped>...</style> <div class="modal-‐header">{{
header }}</div> <div class="modal-‐content">{{ yield }}</div> <div class="modal-‐footer"> <button>Cancel</button> <button>Save</button> </div> </script>
Questions?