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
640
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
500
Understanding the Shift to Mobile
bradgignac
0
310
Front-End Operations
bradgignac
4
630
Intro to CoreOS
bradgignac
4
1.1k
Modular CSS
bradgignac
0
9
Rich Client Design Patterns
bradgignac
3
250
Other Decks in Programming
See All in Programming
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.5k
Fast JSX: Don't clone props object #28768
yossydev
1
170
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
What We Can Learn From OSS
inouehi
0
430
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
430
Ruby Pattern Matching
bkuhlmann
0
930
Going beyond Apache Parquet's default settings
xhochy
0
130
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
Git Rebase
bkuhlmann
11
1.6k
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.1k
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
200
Featured
See All Featured
Visualization
eitanlees
137
14k
How to Ace a Technical Interview
jacobian
273
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.7k
In The Pink: A Labor of Love
frogandcode
138
21k
The Language of Interfaces
destraynor
151
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Producing Creativity
orderedlist
PRO
338
39k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
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?