The slide set I used for #IPC15 to show off ES6 in use. UNfor

3. const his = it;
his('identity', () => {
const [firstName, lastName, company] =
'Wolfram Kriesing uxebu'.split(' ');
assert.equal(firstName, 'Wolfram');
assert.equal(lastName, 'Kriesing');
assert.equal(company, 'uxebu');
});
const youCan = it;
youCan('find me', () => {
const [url, twitter] =
'uxebu.com,@WolframKriesing'.split(',');
assert.equal(url, 'uxebu.com');
assert.equal(twitter, '@WolframKriesing');
});

4. const me = it;
me('runs', () => {
const [,...runs] =
('uxebu,es6katas.org,tddbin.' +
'com,jsCodeRetreat').split(',');
assert.deepEqual(runs, [
'es6katas.org',
'tddbin.com',
'jsCodeRetreat'
]);
});

5. const me = it;
me('runs', () => {
const [,...runs] =
('uxebu,es6katas.org,tddbin.' +
'com,jsCodeRetreat').split(',');
assert.deepEqual(runs, [
'es6katas.org',
'tddbin.com',
'jsCodeRetreat'
]);
});

9. {
what: „ES6 learning by doing“,
when: „new kata every day“,
url: „http://ES6katas.org“,
twitter: „@es6katas“
}

11. {
what: „ready to use TDD env“,
why: „practice, practice, practice“,
url: „http://TDDbin.com“,
twitter: „@tddbin“
}

13. {
what: „TDD, pairing, clean code“,
when: „every 3 months“,
next: „5th September 2015“,
url: „http://jsCodeRetreat.com“,
twitter: „@jsCodeRetreat“
}

14. ECMAScript 6
for
real

15. Photo by tranchis - Creative Commons Attribution-NonCommercial-ShareAlike License https://www.flickr.com/photos/25813335@N00 Created with Haiku Deck

16. Photo by bogdog Dan - Creative Commons Attribution-NonCommercial License https://www.flickr.com/photos/25689440@N06 Created with Haiku Deck

17. Photo by aquababe - Creative Commons Attribution-NonCommercial License https://www.flickr.com/photos/25138992@N00 Created with Haiku Deck

19. Traceur

20. Photo by Luz Adriana Villa A. - Creative Commons Attribution License https://www.flickr.com/photos/11599314@N00 Created with Haiku Deck

22. Photo by Hindrik S - Creative Commons Attribution-NonCommercial-ShareAlike License https://www.flickr.com/photos/63991153@N00 Created with Haiku Deck

23. Photo by droetker0912 - Creative Commons Attribution-NonCommercial-ShareAlike License https://www.flickr.com/photos/58020577@N06 Created with Haiku Deck

24. Sep
2014long time ago, in tech

26. http://www.uxebu.com/blog/2014/11/es6-tdd-work-traceur-mocha-sinon/

27. https://github.com/uxebu/mocha-sinon-traceur-example

28. expect().toBe()
expect().toHaveXyz()
expect().toEqualSomethingICanDefine()

29. WHY ES6
at all?

30. https://gist.github.com/wolframkriesing/ab6d82024aec7068382a

32. ES6 import is static! yeah!
'import' and 'export' may only appear at the top level

35. ENOUGH
reason
but there is looooooots more

37. > traceur --script import.js --out out.js
/playground/import.js:1:1: Unexpected token import
/playground/import.js:1:8: Semi-colon expected
/playground/import.js:1:16: Semi-colon expected
/playground/import.js:1:19: Semi-colon expected
/playground/import.js:1:27: Semi-colon expected
> babel import.js
'use strict';
var _assert = require('assert');
> cat import.js
import {assert as a} from 'assert';

38. LET’S
CODE
kata group’s
link
kata group’s
name

39. LET’S
CODE
kata group’s
link
kata group’s
name

40. N O W
LET’S
CODE

41. Did you notice?
• Tests run on node.js
• No browser involved
• Decouple from the evil DOM
• react.js-think helps :)

42. let’s
BUILD

43. webpack

44. https://gist.github.com/substack/68f8d502be42d5cd4942

47. N O W
LET’S
BUILD

49. noticed that it linted
react-syntax, JSX?

50. seeing
is
believing

54. !"

58. uxebu.com/workshop
@WolframKriesing