es6 and web components - goto conferencegotocon.com/.../brianleroux_ecmascript6webcomponents.pdf ·...
TRANSCRIPT
![Page 1: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/1.jpg)
ES6 and Web ComponentsJavaScript has a long history of being difficult to structure and maintain. To deal with this complexity a swath of frameworks appeared over the years. Prototype.js was quickly followed by jQuery and hounded by Dojo, YUI, Mootools and many others. A second generation emerged focused on structuring apps heralded by Backbone, Angular, Ember, React and Polymer.
JavaScript can be a hard scene to follow. So what’s next? Nothing! Well ok, not quite nothing, the web platform inches forward very slowly using cues from the frameworks of yore. The W3C and WhatWG incorporate the concepts into the living standards and then browsers implement them eventually.
Two key recent additions to the web platform now just within reach and worth consideration for serious use:
- JavaScript version 6 (ES6)
- Custom Elements (a part of the broader Web Components initiative)
Come to this talk to learn how to get started writing structured apps using future friendly vanilla web platform code.
![Page 2: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/2.jpg)
ES6 and Web ComponentsFuturistic Flavors
![Page 3: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/3.jpg)
What to expectThis talk walks through a possible future of the web.
- A Short History of JS Frameworks- Web Components: The Good Part™- ES6 Syntax: ZOMGCAKES
![Page 4: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/4.jpg)
JS FrameworksA Short History
![Page 5: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/5.jpg)
Original Series 2006-2008- Prototype and Scriptaculous- jQuery- Mootools- YUI- Dojo
![Page 6: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/6.jpg)
Prototype- the first, somewhere in 2006- no docs for a very long time- concerned with leveling out DOM API across browsers- extends built in DOM Elements with new methods- Ajax became a thing
![Page 7: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/7.jpg)
Prototype
var div = document.createElement('div')
Element.extend(div)
div.addClassName('pending').hide()
document.body.appendChild(my_div)
![Page 8: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/8.jpg)
Prototype
new Ajax.Request('/hello', {
method:'get',
onSuccess: function(transport) { var response = transport.responseText || "no response" alert("Success! \n\n" + response) },
onFailure: function() { alert('Something went wrong...') }})
![Page 9: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/9.jpg)
Scriptaculous- primary value prototypejs w/ effects- utilized timeouts- completely unnecessary today
![Page 10: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/10.jpg)
Scriptaculous
<div id="shake_demo"> <a href="#" onclick="new Effect.Shake('shake_demo'); return false;"> Click me to shake! </a></div>
![Page 11: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/11.jpg)
jQuery- an alt view: selection, iterative apply, chaining- built in animations- dominated early, still does, but not as necessary- heavily influenced the browser- later grew an ecosystem: plugins, ui, mobile- fantastic open source foundation btw
![Page 12: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/12.jpg)
jQuery DOM API
$('button.continue').html('say hello').click(function() { alert('Hi!')})
![Page 13: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/13.jpg)
jQuery Ajax
$.ajax({
url: '/hello',
success: function(data) { $('#hi').html('<b>' + data + '</b>') }})
![Page 14: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/14.jpg)
jQuery Animation
$('#book').slideDown('slow', function() { console.log('animation complete') })
![Page 15: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/15.jpg)
Mootools- very clean Class system foundation
Saaaame problems being solved but differently. (Cross browser DOM, Events, Ajax and Animation.)
![Page 16: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/16.jpg)
Mootools DOM API
var el = new Element('div#bar.foo')
el.addEvent('click', function() { alert('clicked!')})
![Page 17: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/17.jpg)
var req = new Request({
url: '/hello',
method: 'get', onRequest: function() { el.set('text', 'loading...') }, onSuccess: function(res) { el.set('text', res) }, onFailure: function() { el.set('text', 'Sorry!') }})
// and to send it:req.send()
![Page 18: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/18.jpg)
Mootools Class System
var Animal = new Class({ initialize: function(age){ this.age = age }})
var Cat = new Class({ Extends: Animal, initialize: function(name, age) { this.parent(age) this.name = name }})
![Page 19: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/19.jpg)
YUI- extremely modular and configurable- bailed on early java-ish api for a jquery-like thing- no longer maintained (a key problem w/ corp stewardship)
![Page 20: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/20.jpg)
YUI
YUI().use('node', function(Y) {
var onClick = function(e) { Y.one('#event-result').setHTML('hello world') }
Y.one('#container').on('click', onClick) })
![Page 21: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/21.jpg)
Dojo“Dojo already did that” - Pete Higgins
(It did and still does, quite literally, everything aforementioned.)
![Page 22: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/22.jpg)
Dojo
require(['dojo/dom', 'dojo/dom-construct'], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting') domConstruct.place('<i> Dojo!</i>', greetingNode)})
![Page 23: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/23.jpg)
Problems- differences between browser APIs smoothing out- selector engines built in “natively”- animation w/ CSS became the better practice- the mobile was increasingly happening- most apps lacked structure, modules- iterative apply and chaining can be super hard to test
![Page 24: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/24.jpg)
THE ProblemThese libraries are bloated, creating tightly coupled code incompatible elsewhere and mutating state everywhere creating janky experiences.
![Page 25: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/25.jpg)
Rise of the Microlibrary- XUI, 2008- Lawnchair, 2009- Zepto, 2010
![Page 26: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/26.jpg)
XUI- 2008 post iPhone- mobile Safari constraints motivated: <10kb- a jQuery work-alike- introduction text read: micro-tiny *
* possibly seeding the term microlibrary in single origin coffeeshops and craft beer establishments
![Page 27: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/27.jpg)
XUI
x$('#hello').text('click me').click(function() { console.log('hi')})
![Page 28: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/28.jpg)
Lawnchair- models!- 2009 as PhoneGap got first traction- abstracting the baffling array of client storage methods- still trucking today
![Page 29: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/29.jpg)
Lawnchair
Lawnchair({name:'testing'}, function(store) {
// Create an object var me = {key:'brian'}
// Save it store.save(me)
// Access it later... Yes even after a page refresh! store.get('brian', function(me) { console.log(me) })})
![Page 30: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/30.jpg)
Zepto- sometime in 2010- same spirit of XUI but an exact clone of the jQuery API- code is beautiful: simple and clear- still quite popular today
![Page 31: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/31.jpg)
Zepto Touch Addons<style>.delete { display: none; }</style>
<ul id="items"> <li>List item 1 <span class=delete>DELETE</span></li> <li>List item 2 <span class=delete>DELETE</span></li></ul>
<script>$('#items li').swipe(function(){ $('.delete').hide() $('.delete', this).show()})
$('.delete').tap(function(){ $(this).parent('li').remove()})</script>
![Page 32: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/32.jpg)
Still not quite right- good: solved the same problems with less code- bad: didn’t solve the structure problems - ugly: concerns being separated but inconsistently
![Page 33: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/33.jpg)
Next GenerationMV*
- Backbone- Angular- Ember- React- Polymer
![Page 34: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/34.jpg)
Backbone- first thing of its kind arriving 2010ish- Views, Models, Collections and a Router- very tiny, extremely well written- almost no coupling, use a little or a lot- opinionated about not being opinionated - huge ecosystem, of note: Marionette and AmpersandS- still v popular today
![Page 35: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/35.jpg)
var DocumentRow = Backbone.View.extend({
tagName: "li",
className: "document-row",
events: { "click .icon": "open", "click .button.delete": "destroy" },
initialize: function() { this.listenTo(this.model, "change", this.render) },
render: function() { this.el.innerHTML = 'draw stuff to screen' }})
![Page 36: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/36.jpg)
Angular- Google- rigor of design familiar to the enterprise- kind of strange nomenclature- abstractions are very tightly coupled - cross browser testing built in (Karma)- great mobile lib: Ionic- custom elements concept: Angular Directives
![Page 37: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/37.jpg)
<helloPerson person="brian"></helloPerson>
<script>var app = angular.module('app', [])
app.directive('helloPerson', function() { return { restrict: 'E', template: 'Hello {{ person.name }}', scope: {person:'=person'} }})
app.controller('ctlr', function($scope, $http) { $scope.brian = {} $scope.brian.name = "Brian LeRoux"})</script>
![Page 38: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/38.jpg)
Ember- Models, Views, Controllers, Components, Router- strong sep of concerns but pieces tightly coupled- Rails style convention over config and metaprogramming- really well writ docs, onboarding and governance- slow and kind of large: not appropriate for mobile- Components! a sort of custom Mustache partials thing *
* not even close to Web Components spec despite docs claim to such
![Page 39: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/39.jpg)
Ember<script type="text/x-handlebars">{{ hello-control name="Brian LeRoux" }}</script> <script type="text/x-handlebars" data-template-name="components/hello-control">Hello {{ name }}</script> <script>Ember.Application.create()</script>
![Page 40: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/40.jpg)
React- Facebook- only concerned with Views- not initially well received for freaky template syntax- introduced the concept of a Virtual DOM- deceptively simple programming model - crazy fast- promising early mobile libs: TouchstoneJS and Reapp- explicitly avoids mutating state
...and more custom elements!
![Page 41: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/41.jpg)
React
var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div> }})
// ok, this is niceReact.render(<HelloMessage name="Brian LeRoux" />, document.body)
![Page 42: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/42.jpg)
Polymer- wait, Google again?- battle hardening next gen specs- implementing backwards compat polyfills and tools- kind of big and also slow- has actual browser ready Custom Elements!
![Page 43: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/43.jpg)
Polymer
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" attributes="who"> <template> <p>Hello <strong>{{who}}</strong> :)</p> </template> <script> Polymer('hello-world', { who: 'Brian LeRoux' }) </script></polymer-element>
![Page 44: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/44.jpg)
State of the art- module systems coalescing but remain incompatible- network, routing and data sync all v different- everyone has a custom elements implementation
![Page 45: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/45.jpg)
Web ComponentsThe Good Part
![Page 46: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/46.jpg)
Web ComponentsA tale of four w3c specifications:
- <template> tag- HTML imports- Shadow DOM- Custom Elements
![Page 47: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/47.jpg)
<template></template><!-- this kinda thing, blocking call to the paint --><script id="hello" type="text/ejs">Hello <%= name %>.</script>
<!-- becomes this sorta deal, big diff is this tmpl is inert --><template id="hello">Hello <%= name %>.</template>
![Page 48: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/48.jpg)
meh
![Page 49: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/49.jpg)
Web ComponentsA tale of four w3c specifications:
- <template> tag- HTML imports- Shadow DOM- Custom Elements
![Page 50: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/50.jpg)
HTML Imports<!-- imports a Web Component --><link rel="import" href="../bower_components/polymer/polymer.html">
![Page 51: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/51.jpg)
Troubles- its slow- networks fail- Mozilla doesn’t want to add HTML Imports- Google does- Apple has a different proposal- MSFT is watching it play out
![Page 52: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/52.jpg)
Web ComponentsA tale of four w3c specifications:
- <template> tag- HTML imports- Shadow DOM- Custom Elements
![Page 53: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/53.jpg)
Shadow DOM- sounds v cool bb- hides the implementation of a Web Component- CSS no longer leaks globally- not a thing you do so much as thing you get
![Page 54: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/54.jpg)
Okaaaaay
![Page 55: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/55.jpg)
Web ComponentsA tale of four w3c specifications:
- <template> tag- HTML imports- Shadow DOM- Custom Elements
![Page 56: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/56.jpg)
Custom Elements!The Good Part™ of Web Components
- Angular, Ember, React and Polymer all impl the concept- a single blocking API call to register- supports extending built ins- otherwise a good old fashioned DOM Element
![Page 57: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/57.jpg)
Custom Elements: Basics
var Hello = document.registerElement('hello-world')
document.body.appendChild(new Hello)
// creates <hello-world></hello-world>
![Page 58: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/58.jpg)
Custom Elements: Extending<script>
var SupaButton = document.registerElement('supa-button', {
prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button' })</script>
<button is=supa-button>Hello World</button>
![Page 59: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/59.jpg)
Custom Elements: Lifecyclevar ptype = Object.create(HTMLElement.prototype, {
createdCallback: function() { this.innerHTML = 'hello world' },
attachedCallback: function() { console.log('attached to the DOM') },
detachedCallback: function() { console.log('removed from the DOM') },
attributeChangedCallback: function(attr, prev, current) { console.log('attr changed') }})
var Supa = document.registerElement('supa-hello', {prototype:ptype})
![Page 60: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/60.jpg)
How?- WebComponents.js polyfill (has all the toys)- we only need to polyfill document.registerElement()- ideally we incorporate with a module system
![Page 61: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/61.jpg)
Browser support- Chromes only (As in Chrome and Opera)- Firefox likely- IE a maybe- WebKit (Safari) coming on board (DOM != ES6 classes...)
![Page 62: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/62.jpg)
ES6Hey lets talk about that for a hot sec!
![Page 63: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/63.jpg)
After JS- Programming language popularity is fickle - JS won b/c it runs everywhere and is super fast
The next thing isn’t Go or Rust. Its JS, again.
![Page 64: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/64.jpg)
Module defn
// define a module in hello.jsexport default function(person) { console.log('Hello ' + person)}
![Page 65: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/65.jpg)
Module consumption
// consume said module elsewhereimport hi from 'hello'
hi('Brian LeRoux')// logs: Hello Brian LeRoux
![Page 66: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/66.jpg)
Terse obj literal methods
var o = {
hello(msg) { console.log('hi there ' + this.fmt(msg)) },
fmt(str) { return str.toUpperCase() }}
o.hello('people')// logs: hi there PEOPLE
![Page 67: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/67.jpg)
Classes!class SkinnedMesh extends THREE.Mesh {
constructor(geometry, materials) { super(geometry, materials)
this.idMatrix = SkinnedMesh.defaultMatrix() this.bones = [] this.boneMatrices = [] }
update(camera) { super.update() }
static defaultMatrix() { return new THREE.Matrix4() }}
![Page 68: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/68.jpg)
Fat arrows
['banana', 'orange', 'apple'].forEach(fruit => fruit.toUpperCase())
![Page 69: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/69.jpg)
Template Stringslet msg = `Dear ${ person }
Thanks for being amazing!
<3 Brian`
![Page 70: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/70.jpg)
Other niceties - let, const- destructuring assignment- default, rest and spread
![Page 71: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/71.jpg)
Compiling- browserify: bring the node module system to the browser- babeljs: compile ES5 src to ES6 src- npm scripts: like grunt or gulp without a dep
![Page 72: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/72.jpg)
PublishingI prefer npm to bower.
- has a module concept- dist is separated from revision control: and should be
![Page 73: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/73.jpg)
Bringing it together- author src in ES6- dist src as ES5- package.json point “main” key to ES5 dist src- deploy to Github pages!- src maps for debugging
![Page 74: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/74.jpg)
class DateSpan extends HTMLSpanElement {
createdCallback() { this.textContent = "Today's date: " + new Date().toJSON().slice(0, 10) }}
![Page 75: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/75.jpg)
Problems- Browsers still not quite implementing- the webcomponents.js polyfill is kind of weird- CSS is still a total global clusterfuck- blocking call on document.registerElement could be slow- nothing mutates state but nothing stopping it either
![Page 76: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/76.jpg)
The Future- unlikely to be the same as today- optimize for change! - this CSS business srsly we need to fix that- separate and independently revision your concerns- immutable state is A Good Thing™- vdom and batching concepts likely to lift to platform
![Page 77: ES6 and Web Components - GOTO Conferencegotocon.com/.../BrianLeRoux_ECMAScript6WebComponents.pdf · 2015-05-11 · - JavaScript version 6 (ES6) - Custom Elements (a part of the broader](https://reader033.vdocument.in/reader033/viewer/2022042414/5f2f0d0dc85dc57c3a2c9f86/html5/thumbnails/77.jpg)
thx!find [email protected]
http://twitter.com/@brianleroux
http://github.com/brianleroux
https://www.npmjs.com/~brianleroux
resourceshttp://goo.gl/7pRxiu
https://github.com/brianleroux/date-today
http://brian.io/date-today (view the src!!)
https://medium.com/@brianleroux/es6-modules-amd-and-commonjs-c1acefbe6fc0
http://h3manth.com/new/blog/2015/custom-elements-with-es6/