$30 off During Our Annual Pro Sale. View Details »

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
PRO

October 10, 2014
Tweet

More Decks by Kyle Simpson

Other Decks in Programming

Transcript

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

    View Slide

  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

    View Slide

  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

    View Slide

  4. “less” standards, better tools

    View Slide

  5. vs.

    View Slide

  6. ; vs.

    View Slide

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

    View Slide

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

    View Slide

  9. not just styles, though...

    View Slide

  10. “12 Angry Men”

    View Slide

  11. TC39 :: ECMA-262
    awb

    View Slide

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

    View Slide

  13. sweetjs.org
    JS macros

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. beyond macros...

    View Slide

  19. { block scoping }

    View Slide

  20. View Slide

  21. es6 ftw

    View Slide

  22. be careful

    View Slide

  23. ftw ... fml

    View Slide

  24. wait, what exactly am I
    suggesting?

    View Slide

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

    View Slide

  26. FoilScript: github.com/getify/foilscript

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. unary + binary operator

    View Slide

  33. unary + binary operator

    View Slide

  34. unary + binary operator

    View Slide

  35. optional ternary-else

    View Slide

  36. optional ternary-else

    View Slide

  37. optional ternary-else

    View Slide

  38. promiscuous this binding
    hard this binding
    soft this binding

    View Slide

  39. soft binding

    View Slide

  40. soft binding

    View Slide

  41. soft binding

    View Slide

  42. soft binding

    View Slide

  43. conditional catch clauses

    View Slide

  44. conditional catch clauses

    View Slide

  45. conditional catch clauses

    View Slide

  46. View Slide

  47. ?
    team
    collaboration

    View Slide

  48. inversible
    transforms

    View Slide

  49. inversible transforms

    View Slide

  50. stay tuned on that...

    View Slide

  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)

    View Slide

  52. • auto-correct misspellings
    • safely re-arrange scope
    • consolidate declarations
    • automatically reduce complexity
    • refactor boolean traps
    • optimize performance
    • ...

    View Slide

  53. also see: https://speakerdeck.com/ariya/the-future-of-javascript-language-tooling
    also see: http://gregfranko.com/building-javascript-tools-talk/

    View Slide

  54. View Slide

  55. does this bother you?

    View Slide

  56. does this bother you?

    View Slide

  57. restrictmode.org

    View Slide

  58. restrictmode.org

    View Slide

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

    View Slide