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

Extending JavaScript the easy way

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.

Sergi Mansilla

November 01, 2012
Tweet

More Decks by Sergi Mansilla

Other Decks in Technology

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