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.

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