Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ECMAScript 6 for real

1,082 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

ECMAScript 6 for real

  1. 1. 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'); });
  2. 2. const me = it; me('runs', () => { const [,...runs] = ('uxebu,es6katas.org,tddbin.' + 'com,jsCodeRetreat').split(','); assert.deepEqual(runs, [ 'es6katas.org', 'tddbin.com', 'jsCodeRetreat' ]); });
  3. 3. const me = it; me('runs', () => { const [,...runs] = ('uxebu,es6katas.org,tddbin.' + 'com,jsCodeRetreat').split(','); assert.deepEqual(runs, [ 'es6katas.org', 'tddbin.com', 'jsCodeRetreat' ]); });
  4. 4. { what: „ES6 learning by doing“, when: „new kata every day“, url: „http://ES6katas.org“, twitter: „@es6katas“ }
  5. 5. { what: „ready to use TDD env“, why: „practice, practice, practice“, url: „http://TDDbin.com“, twitter: „@tddbin“ }
  6. 6. { what: „TDD, pairing, clean code“, when: „every 3 months“, next: „5th September 2015“, url: „http://jsCodeRetreat.com“, twitter: „@jsCodeRetreat“ }
  7. 7. ECMAScript 6 for real
  8. 8. Photo by tranchis - Creative Commons Attribution-NonCommercial-ShareAlike License https://www.flickr.com/photos/25813335@N00 Created with Haiku Deck
  9. 9. Photo by bogdog Dan - Creative Commons Attribution-NonCommercial License https://www.flickr.com/photos/25689440@N06 Created with Haiku Deck
  10. 10. Photo by aquababe - Creative Commons Attribution-NonCommercial License https://www.flickr.com/photos/25138992@N00 Created with Haiku Deck
  11. 11. Traceur
  12. 12. Photo by Luz Adriana Villa A. - Creative Commons Attribution License https://www.flickr.com/photos/11599314@N00 Created with Haiku Deck
  13. 13. Photo by Hindrik S - Creative Commons Attribution-NonCommercial-ShareAlike License https://www.flickr.com/photos/63991153@N00 Created with Haiku Deck
  14. 14. Photo by droetker0912 - Creative Commons Attribution-NonCommercial-ShareAlike License https://www.flickr.com/photos/58020577@N06 Created with Haiku Deck
  15. 15. Sep 2014long time ago, in tech
  16. 16. http://www.uxebu.com/blog/2014/11/es6-tdd-work-traceur-mocha-sinon/
  17. 17. https://github.com/uxebu/mocha-sinon-traceur-example
  18. 18. expect().toBe() expect().toHaveXyz() expect().toEqualSomethingICanDefine()
  19. 19. WHY ES6 at all?
  20. 20. https://gist.github.com/wolframkriesing/ab6d82024aec7068382a
  21. 21. ES6 import is static! yeah! 'import' and 'export' may only appear at the top level
  22. 22. ENOUGH reason but there is looooooots more
  23. 23. > 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';
  24. 24. LET’S CODE kata group’s link kata group’s name
  25. 25. LET’S CODE kata group’s link kata group’s name
  26. 26. N O W LET’S CODE
  27. 27. Did you notice? • Tests run on node.js • No browser involved • Decouple from the evil DOM • react.js-think helps :)
  28. 28. let’s BUILD
  29. 29. webpack
  30. 30. https://gist.github.com/substack/68f8d502be42d5cd4942
  31. 31. N O W LET’S BUILD
  32. 32. noticed that it linted react-syntax, JSX?
  33. 33. seeing is believing
  34. 34. !"
  35. 35. uxebu.com/workshop @WolframKriesing

×