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
Discover Metal 4
rei315
2
110
Deep Dive into ~/.claude/projects
hiragram
12
2.3k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
VS Code Update for GitHub Copilot
74th
2
590
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
エンジニア向け採用ピッチ資料
inusan
0
180
Goで作る、開発・CI環境
sin392
0
190
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
110
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
710
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
470
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
RailsConf 2023
tenderlove
30
1.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Writing Fast Ruby
sferik
628
62k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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?