Extending JavaScript the easy way

Sergi shows an easy way to extend the syntax of JavaScript without having to create a new language. Using sweet.js macros created by Mozilla's Tim Disney, we can extend our favorite language without making big sacrifices, we can add a few small features to our favorite language or we can create entire DSLs that help with the problem at hand, all in an easy way.

Transcript

1. Extending JavaScript
   the easy way
   Sergi Mansilla, November 2012
   

   View Slide

2. @sergimansilla
   

   View Slide

3. JavaScript is popular
   

   View Slide

4. It is ASM
   for the web
   

   View Slide

5. CoffeeScript
   LispyScript
   JWacs
   FlapJax
   Elm
   Coco
   FBJS JS11
   Roy
   Streamline JS
   TypeScript
   Objective J
   JS2
   Jack
   Source: http://altjs.org
   

   View Slide

6. Be JavaScript, my friend
   

   View Slide

7. ...but it is far
   from perfect
   

   View Slide

8. View Slide

9. Macros
   ultimate flexibility
   (ES6 won't have them, btw)
   

   View Slide

10. Macros provide a way
    to extend syntax
    Syntax Syntax
    Macro
    

    View Slide

11. Users can extend the
    language
    

    View Slide

12. It helps evolving the
    language faster
    

    View Slide

13. sweet.js
    Macros for JavaScript
    

    View Slide

14. sweet.js
    Modeled after
    Scheme macros
    

    View Slide

15. Sweet.js
    Syntax Syntax
    Macro
    JS + Macros JS
    Sweet.js
    

    View Slide

16. Redefine 'function'
    

    View Slide

17. Redefine 'function'
    

    View Slide

18. Destructuring
    

    View Slide

19. Destructuring
    

    View Slide

20. Destructuring
    

    View Slide

21. Destructuring
    

    View Slide

22. Destructuring
    

    View Slide

23. Destructuring
    

    View Slide

24. Destructuring
    

    View Slide

25. ?
    

    View Slide

26. ?
    

    View Slide

27. Nice ranges!
    

    View Slide

28. case-style assignment
    

    View Slide

29. case-style assignment
    

    View Slide

30. Use cases
    Try proposed syntax before it makes into the language
    Create Micro-DSLs for your scenario
    Use ideas from other languages
    Make the new Script
    Implement basic types
    You get the idea
    

    View Slide

31. Start using it now
    > npm install sweet.js
    > sjs -o output.js test_macros.sjs
    > node output.js
    Node.js
    Browser
    https://github.com/iammerrick/require-sweet
    

    View Slide

32. Questions?
    

    View Slide

33. Thanks!
    @sergimansilla
    github.com/sergi
    sergimansilla.com
    

    View Slide

34. http://sweetjs.org/
    https://github.com/mozilla/sweet.js
    http://jlongster.com/why-sweet.js-matters
    http://scriptogr.am/micmath/post/sweet-macros-in-
    javascripthttps://news.ycombinator.com/item?id=4560691
    http://youtu.be/_ahvzDzKdB0
    References
    

    View Slide