welcome our new es5 overlords - github pages · a good time to talk about es5 every current browser...
TRANSCRIPT
![Page 1: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/1.jpg)
Welcome our new ES5 Overlords
![Page 2: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/2.jpg)
Hello
![Page 3: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/3.jpg)
A good time to talk about ES5
![Page 4: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/4.jpg)
A good time to talk about ES5Every current browser supports ES5
![Page 5: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/5.jpg)
A good time to talk about ES5Every current browser supports ES5
Every previous generation browser supports ES5
![Page 6: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/6.jpg)
A good time to talk about ES5Every current browser supports ES5
Every previous generation browser supports ES5
In a few weeks every browser before that will support ES5
![Page 7: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/7.jpg)
A good time to talk about ES5Every current browser supports ES5
Every previous generation browser supports ES5
In a few weeks every browser before that will support ES5
Node is ES5
![Page 8: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/8.jpg)
A good time to talk about ES5Every current browser supports ES5
Every previous generation browser supports ES5
In a few weeks every browser before that will support ES5
Node is ES5
IE8 may not be a requirement in your next project
![Page 9: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/9.jpg)
ES5Some new methods
![Page 10: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/10.jpg)
ES5Some new methods
Which are convenient
![Page 11: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/11.jpg)
ES5Some new methods
Which are convenient
That we ignore
![Page 12: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/12.jpg)
There is magic in ES5
![Page 13: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/13.jpg)
Some JSA list of German bands
Clicking the button should show the band name
var bands = ['Apparat', 'Boy', 'Kraftklub']; for (var i = 0; i < bands.length; i++) { var band = bands[i], button = document.createElement('button'); button.appendChild(document.createTextNode(band)); button.addEventListener('click', function(){ alert(band); }); document.body.appendChild(button); }
![Page 14: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/14.jpg)
This code has two problems
![Page 15: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/15.jpg)
This code has two problemsValeska from 'Boy' is actually Swiss
![Page 16: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/16.jpg)
This code has two problemsValeska from 'Boy' is actually Swiss
When the loop is finished, 'band' has the last value, and that's what the inner function 'sees'.
![Page 17: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/17.jpg)
This means we can only see KraftKlub
![Page 18: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/18.jpg)
This means we can only see KraftKlubWe don't want to that
![Page 19: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/19.jpg)
This means we can only see KraftKlubWe don't want to that
Felix is a poser
![Page 20: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/20.jpg)
Some basic JS (fixed)
var bands = ['Apparat', 'Boy', 'Kraftklub']; for (var i = 0; i < bands.length; i++) { var band = bands[i], button = document.createElement('button'); button.appendChild(document.createTextNode(band)); (function(band){ button.addEventListener('click', function(){ alert(band); }); })(band); document.body.appendChild(button); }
![Page 21: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/21.jpg)
Same thing in ES5['Apparat', 'Boy', 'Kraftklub'].forEach(function(band){ var button = document.createElement('button'); button.appendChild(document.createTextNode(band)); button.addEventListener('click', function(){ alert(band); }); document.body.appendChild(button); })
![Page 22: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/22.jpg)
1/3rd less code
![Page 23: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/23.jpg)
1/3rd less code
Looks nice
![Page 24: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/24.jpg)
1/3rd less code
Looks nice
Functions are more 'natural' fit for JS than older 'for' loops
![Page 25: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/25.jpg)
Let's do it for more things!
![Page 26: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/26.jpg)
Safe Extension of Inbuilt Methods
![Page 27: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/27.jpg)
No, really
![Page 28: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/28.jpg)
Quick History* Lesson*History may be more recent than expected
![Page 29: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/29.jpg)
ES3: Non-native methods appear during iterationObject.prototype.oldStyleMethod = function oldStyleMethod (){}; var someObject = {}; for (var key in someObject) { console.log(key) };
![Page 30: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/30.jpg)
ES3: But native methods don'tThis is why toString() doesn't appear in 'for' loops.
console.log(Object.prototype.toString); function toString() { [native code] };
![Page 31: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/31.jpg)
Added methods are always enumerable in ES3So they always appear in 'for' loops
![Page 32: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/32.jpg)
Added methods are always enumerable in ES3So they always appear in 'for' loops
Extending prototypes in ES3 can work if the entire universe changes their 'for' loops
![Page 33: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/33.jpg)
Added methods are always enumerable in ES3So they always appear in 'for' loops
Extending prototypes in ES3 can work if the entire universe changes their 'for' loops
Surprisingly this not happen
![Page 34: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/34.jpg)
Added methods are always enumerable in ES3So they always appear in 'for' loops
Extending prototypes in ES3 can work if the entire universe changes their 'for' loops
Surprisingly this not happen
So extending prototypes in ES3 is risky
![Page 35: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/35.jpg)
ES5: Non enumerable methods can be addedRequires native ES5 (not shimmable)
Object.defineProperty( Object.prototype, "newStyleMethod", { value: function newStyleMethod(){}, enumerable: false }); for (var key in someObject) { console.log(key) };
![Page 36: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/36.jpg)
That's not the only problem
![Page 37: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/37.jpg)
Generic namesPast conflicts:
String.prototype.namespace()
![Page 38: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/38.jpg)
Generic namesPast conflicts:
String.prototype.namespace()
Array.prototype.find()
![Page 39: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/39.jpg)
PrefixingSet a sensible prefix
![Page 40: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/40.jpg)
Underscore Sugar
Methods No Yes
Regular 'for' loops Yes No
Conflict-free Yes No
![Page 41: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/41.jpg)
Underscore Agave (ES5 only) Sugar
Methods No Yes Yes
Regular 'for' loops Yes Yes No
Conflict-free Yes Yes No
![Page 42: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/42.jpg)
Using ES5 defineProperty() and prefixing, Agave.JShas had no conflicts since it was created (early 2012).
![Page 43: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/43.jpg)
Other reasons:"You can do that. You should do that."
Brendan Eich, JQuery UK, 19 Apr 2013
![Page 44: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/44.jpg)
Other reasons:"You can do that. You should do that."
Brendan Eich, JQuery UK, 19 Apr 2013
Ember does it.
Ember JS Prototype Extensions
![Page 45: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/45.jpg)
Other reasons:"You can do that. You should do that."
Brendan Eich, JQuery UK, 19 Apr 2013
Ember does it.
Ember JS Prototype Extensions
I just gave you a happy hippo and now we are friends.
![Page 46: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/46.jpg)
More magic: Live Binding
![Page 47: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/47.jpg)
An experiment in two parts1. A data → DOM binding (I like mustache, so I use Ractive).
![Page 48: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/48.jpg)
An experiment in two parts1. A data → DOM binding (I like mustache, so I use Ractive).
2. Data changes applied to binding live via object.defineProperty()
![Page 49: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/49.jpg)
Live binding with defineProperty
var livebind = function(object, binding, properties){ properties.forEach(function(property){ var hiddenProperty = '_'+property Object.defineProperty(object, property, { get: function(){ return testData[hiddenProperty]; }, set: function(newValue){ testData[hiddenProperty] = newValue; binding.set(property, newValue) }, enumerable: true, configurable: true }); }) }
![Page 50: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/50.jpg)
Note1. This is an experiment
![Page 51: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/51.jpg)
Note1. This is an experiment
2. We also use prototype chain injection (see links) for array.length magic
![Page 52: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/52.jpg)
ES5-only is comingFor many, it's already here
![Page 53: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/53.jpg)
ES5-only is comingFor many, it's already here
Use ES5 methods directly
![Page 54: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/54.jpg)
ES5-only is comingFor many, it's already here
Use ES5 methods directly
Don't be scared to extend native prototypes
![Page 55: Welcome our new ES5 Overlords - GitHub Pages · A good time to talk about ES5 Every current browser supports ES5 Every previous generation browser supports ES5 In a few weeks every](https://reader034.vdocuments.site/reader034/viewer/2022042122/5e9ca65885a7ae345b2c2651/html5/thumbnails/55.jpg)
ES5-only is comingFor many, it's already here
Use ES5 methods directly
Don't be scared to extend native prototypes
Experiment