and the Future of JS FrameworksWeb Components
View Slide
@bradgignacbradgignac.com
A Brief History ofJavaScript
1995 2004 2006 2011 2014The Birth of JavaScript
JavaScript
C#
C
1995 2004 2006 2011 2014Web 2.0
1995 2004 2006 2011 2014jQuery
1995 2004 2006 2011 2014Rise of the Microlibrary
1995 2004 2006 2011 2014A “Diverse Ecosystem”
Backbone
Angular
What’s the Difference?
What are WebComponents?
Web Components enable Webapplication authors to define widgetswith a level of visual richness andinteractivity not possible with CSSalone, and ease of composition andreuse not possible with script librariestoday.
Web Components give developers acomposable, reusable method forpackaging HTML, CSS, andJavaScript.
Modal
This Is My Title Lorem ipsum dolor...
Lorem ipsum dolor...
How do we use them?
Let’s Build a Modal
Lorem ipsum dolor sit amet...
... Cancel Save Templates
<br/> @host { ... }<br/> .modal-‐header { ... }<br/> .modal-‐content { ... }<br/> .modal-‐footer { ... }<br/> ...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 ImportsES6 ModulesES6 Module LoaderPackaging
Mutation ObserversObject.observeNode.bindRelated Technologies
EncapsulationPerformanceInteroperabilityBetter FrameworksBenefits
Using WebComponents Today
PolymerPolymer('my-‐modal', { header: 'This Is My Header'});
Polymer ... {{ header }} Cancel Save ...
Angularangular.module('myModal').directive('myModal', function () { return { restrict: 'E', transclude: true, templateUrl: 'myModal.html', scope: { header: '@' } };});
Angular ... {{ header }} Cancel Save
Ember<br/> <style scoped>...</style><br/> <div class="modal-‐header">{{ header }}</div><br/> <div class="modal-‐content">{{ yield }}</div><br/> <div class="modal-‐footer"><br/> <button>Cancel</button><br/> <button>Save</button><br/> </div><br/>
Questions?