1. Classing up ES6
Andy Sharman // @udjamaflip

2. Let’s travel back...

3. Remember when we wrote
JS like this...
<a href="mypage.html" onclick="alert('no, you cannot go to my page'); return;">
Go to my page
</a>

4. ...and when we used it for
things like this?

5. Moving forward we started
getting structured
function UserManager(){
this.userDetails = {};
}
UserManager.prototype.setName = function( firstName, lastName ) {
return this.userDetails.name = firstName + ' ' + lastName;
};
var billy = new UserManager();
billy.setName('Billy', 'Smith');
console.log(billy);

6. We started using JS to fix
browsers...

7. ...then those browsers died,
so what now?

8. Then we built on top of JS

9. The industry have been
making classes in JS
Mootools
var MyClass = new Class(properties);
Ember
App.Person = Ember.Object.extend({
jQuery
jQuery.extend(target [,object1] [,objectN])
React
React.createClass({
Angular
var HelloWorld = angular.module("Demo", []);
HelloWorld.factory("FooBar", function() {});

11. The Code

12. Classes
class car {
}
class engine {
}

13. Inheritance
class car extends engine {
}
class engine {
}

14. Inheritance
class car extends engine {
}
var myCar = new car();
car.start();
car.stop();
class engine {
start() {
this.engineStatus = 'on';
}
stop() {
this.engineStatus = 'off';
}
}

15. Inheritance
class car extends engine {
}
var myCar = new car();
car.start();
car.stop();
class engine {
start() {
this.engineStatus = 'on';
}
stop() {
this.engineStatus = 'off';
}
}

16. Constructors
class car extends engine {
constructor() {
this.start();
}
}
var myCar = new car();
car.stop();
class engine {
start() {
this.engineStatus = 'on';
}
stop() {
this.engineStatus = 'off';
}
}

17. Constructors + Inheritance
class car extends engine {
constructor() {
super();
}
}
var myCar = new car();
class engine {
constructor() {
console.log('engine initiated');
}
}
//output: engine initiated

18. Constructors + Inheritance
class car extends engine {
constructor() {
super();
}
}
var myCar = new car();
class engine {
constructor() {
console.log('engine initiated');
}
}
//output: engine initiated

19. Getters/Setters
class car extends engine {
constructor(engineSize, engineFuel) {
this.stats = [
engineSize,
engineFuel
];
}
}
var myCar = new car(
'v6',
'Kerosene'
);
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0] || 'v8';
this.fuel = data[1] || 'Petrol';
}
}

20. Getters/Setters
class car extends engine {
constructor(engineSize, engineFuel) {
this.stats = [
engineSize,
engineFuel
];
}
}
var myCar = new car(
'v6',
'Kerosene'
);
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0] || 'v8';
this.fuel = data[1] || 'Petrol';
}
}

21. Default parameters
class car extends engine {
constructor(engineSize = 'v8', engineFuel = 'Petrol') {
this.stats = [
engineSize,
engineFuel
];
}
}
var myCar = new car();
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0];
this.fuel = data[1];
}
}

22. Default parameters
class car extends engine {
constructor(engineSize = 'v8', engineFuel = 'Petrol') {
this.stats = [
engineSize,
engineFuel
];
}
}
var myCar = new car();
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0];
this.fuel = data[1];
}
}

23. Rest Parameters
class car extends engine {
constructor(...engineData) {
this.stats = engineData;
}
}
var myCar = new car(
'v6',
'Kerosene'
);
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0] || 'v8';
this.fuel = data[1] || 'Petrol';
}
}

24. Rest Parameters
class car extends engine {
constructor(...engineData) {
this.stats = engineData;
}
}
var myCar = new car(
'v6',
'Kerosene'
);
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0] || 'v8';
this.fuel = data[1] || 'Petrol';
}
}

25. Arrow functions
class App {
constructor() {
var request = new XMLHttpRequest();
request.open('GET', 'my-api/endpoint', true);
request.onreadystatechange = () => {
if (request.readyState != 4 || request.status != 200) return;
this.data = request.responseText;
this.startApp();
};
request.send();
}
this.startApp() { }
}

26. Arrow functions
class App {
constructor() {
var request = new XMLHttpRequest();
request.open('GET', 'my-api/endpoint', true);
request.onreadystatechange = () => {
if (request.readyState != 4 || request.status != 200) return;
this.data = request.responseText;
this.startApp();
};
request.send();
}
this.startApp() { }
}

27. Arrow functions
class App {
constructor() {
var request = new XMLHttpRequest();
request.open('GET', 'my-api/endpoint', true);
request.onreadystatechange = () => {
if (request.readyState != 4 || request.status != 200) return;
this.data = request.responseText;
this.startApp();
};
request.send();
}
this.startApp() { }
}

28. Isn’t it just syntactic sugar?

29. ubai by Liji Jinaraj

30. Leaning tower of Pisa by Gimli_36

31. Pyramids of Giza by Kallerna

32. Support

33. Compatibility

34. Firefox & MS Edge have
impressive support

35. Screw your compatibility
I’ll make my own compatibility
With blackjack, and transpilers

36. Thanks
Andy Sharman // @udjamaflip