Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JS Adventure

JS Adventure

"Choose Your Own JavaScript Adventure"

The JS standard only gets you so far. Want to really step up your game at writing code? You gotta make your own JavaScript.

Yeah, yeah, ES6 is awesome. Everyone knows that. We’re all excited about not having to write the word ‘function’ anymore. But, isn’t it about time we stop obsessing so much about what TC39 puts into the official language spec?

Let’s talk about making and using tools (built in JS, of course!) to customize the language itself to your own liking. We’ll talk about macros, code parsers and transpilers, and other fun tricks to put the control of the language back in your fingers.

Make your own JavaScript. And no, that doesn’t have to stop you from playing nicely with others.


Kyle Simpson

October 10, 2014

More Decks by Kyle Simpson

Other Decks in Programming


  1. JavaScript kyle simpson @getify http://getify.me

  2. You are Brendan Eich, employed at Netscape in May 1995.

    Your boss asks you to design a new language for the browser, but gives you only 10 days to complete it. Choose your next adventure! To agree and give it your best shot, turn to page 39. To laugh and walk away, turn to page 262. pg 16 pg 17
  3. You’ve learned the ins and outs of JavaScript, but lots

    of things still “bug” you. [] == ![] is just too unbearable to go on. Choose your next adventure! To give up on JS and move to go, turn to page NaN. To explore your own custom JS, turn to page 2 . 01e+2. pg 402 pg 403
  4. “less” standards, better tools

  5. vs.

  6. ; vs.

  7. what if your team didn’t have to agree?

  8. github.com/getify/esre configurable 2-way code formatting

  9. not just styles, though...

  10. “12 Angry Men”

  11. TC39 :: ECMA-262 awb

  12. what if you could customize JS to your own liking?

  13. sweetjs.org JS macros

  14. None
  15. None
  16. None
  17. None
  18. beyond macros...

  19. { block scoping }

  20. None
  21. es6 ftw

  22. be careful

  23. ftw ... fml

  24. wait, what exactly am I suggesting?

  25. democracy? anarchy? oligarchy?!? YES heresy!

  26. FoilScript: github.com/getify/foilscript

  27. non-standard (or partial!) JavaScript github.com/getify/literalizer how can I parse ?

  28. never fear! github.com/getify/let-er --es3 ES6!

  29. github.com/getify/let-er ES6!

  30. google.github.io/traceur-compiler/demo/repl.html

  31. google.github.io/traceur-compiler/demo/repl.html

  32. unary + binary operator

  33. unary + binary operator

  34. unary + binary operator

  35. optional ternary-else

  36. optional ternary-else

  37. optional ternary-else

  38. promiscuous this binding hard this binding soft this binding

  39. soft binding

  40. soft binding

  41. soft binding

  42. soft binding

  43. conditional catch clauses

  44. conditional catch clauses

  45. conditional catch clauses

  46. None
  47. ? team collaboration

  48. inversible transforms

  49. inversible transforms

  50. stay tuned on that...

  51. • esprima/acorn (parser) • escodegen (code generator) • escope/eslevels (scope

    analyzer) • istanbul (code coverage) • estraverse (analyze AST) • eslint (pluggable code linting rules) • plato/jscomplexity.org (complexity)
  52. • auto-correct misspellings • safely re-arrange scope • consolidate declarations

    • automatically reduce complexity • refactor boolean traps • optimize performance • ...
  53. also see: https://speakerdeck.com/ariya/the-future-of-javascript-language-tooling also see: http://gregfranko.com/building-javascript-tools-talk/

  54. None
  55. does this bother you?

  56. does this bother you?

  57. restrictmode.org

  58. restrictmode.org

  59. kyle simpson @getify http://getify.me