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
700
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
560
Understanding the Shift to Mobile
bradgignac
0
370
Front-End Operations
bradgignac
4
720
Intro to CoreOS
bradgignac
4
1.2k
Modular CSS
bradgignac
0
20
Rich Client Design Patterns
bradgignac
3
280
Other Decks in Programming
See All in Programming
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
520
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
450
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
930
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
750
Jakarta EE Meets AI
ivargrimstad
0
590
MCPで実現できる、Webサービス利用体験について
syumai
7
2.4k
ゲームの物理
fadis
1
160
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
750
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
270
あのころの iPod を どうにか再生させたい
orumin
1
170
Flutterと Vibe Coding で個人開発!
hyshu
1
230
Featured
See All Featured
Scaling GitHub
holman
461
140k
Become a Pro
speakerdeck
PRO
29
5.5k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Into the Great Unknown - MozCon
thekraken
40
2k
Embracing the Ebb and Flow
colly
86
4.8k
KATA
mclloyd
31
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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?