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
360
Front-End Operations
bradgignac
4
710
Intro to CoreOS
bradgignac
4
1.2k
Modular CSS
bradgignac
0
17
Rich Client Design Patterns
bradgignac
3
280
Other Decks in Programming
See All in Programming
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
童醫院敏捷轉型的實踐經驗
cclai999
0
210
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
67
20k
技術同人誌をMCP Serverにしてみた
74th
1
630
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
600
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
3
440
ふつうの技術スタックでアート作品を作ってみる
akira888
0
450
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
120
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
600
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Optimizing for Happiness
mojombo
379
70k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Cult of Friendly URLs
andyhume
79
6.5k
Code Reviewing Like a Champion
maltzj
524
40k
Rails Girls Zürich Keynote
gr2m
94
14k
RailsConf 2023
tenderlove
30
1.1k
Building an army of robots
kneath
306
45k
We Have a Design System, Now What?
morganepeng
53
7.7k
Site-Speed That Sticks
csswizardry
10
680
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.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?