Building JavaScript Tools You Didn't Think Were Possible | Hacker News Reader

Building JavaScript Tools You Didn't Think Were Possible

gregfranko.com

18 pointsgregfranko30 comments

Greg is being modest by not mentioning his [AMDClean](https://github.com/gfranko/amdclean) library more prominently - it's a superb example of what he's talking about in this presentation.

It makes it possible to use AMD modules while building a library or web app (which is utter bliss when it comes to testing and debugging - no build lag or source map nonsense), but to convert it to non-AMD JavaScript in the final step. I use it on a fairly large (~10,000 LOC) library, [Ractive.js](https://github.com/RactiveJS/Ractive), and it's transformed the way I work.

If only everyone on Hacker News was as nice as you Rich

It should be mentioned that this is a slideshow. Just in case anyone just sees the initial page and thinks that's it.

I've had to do a lot of this recently for CodeCombat's transpiler, Aether: https://github.com/codecombat/aether – it uses Esprima, Acorn, JSHint, and a bunch of other JS tools. There's a ton of great stuff out there, and it's easy to put them together since they all operate on the Mozilla SpiderMonkey Parser API abstract syntax tree format.

I like node-falafel better than estraverse, which is more concise to use: https://github.com/substack/node-falafel

If anyone likes this stuff and wants to write an open-source, in-browser parser from another language like Python, Haskell, or Ruby to the Mozilla AST format, we'd love to make it worth your while. See https://github.com/codecombat/codecombat/issues/72 and then email me to work out an arrangement.

I just want to point out that parsing is the easy part of writing a language implementation. E.g. for Python all of the interesting stuff is in the VM and bytecode generator, the parser is just one page of a grammar that gets fed into a parser generator (for CPython). You will have a much harder time with Haskell since even more of the interesting stuff is done to the intermediate representation (ghcjs is the only thing I know of trying to run it in javascript).

Looks like it could be a cool presentation but mid-hangover-me can't deal with the cube effect. ;) Is there a boring slide version available?

Yep, exported it to Speaker Deck =) http://gregfranko.com/blog/building-javascript-tools/

Cool! Thanks!

I am doing serious transpiler stuff at the moment and I think its easier to do in JS than any other language.

It look me about 2 hours to design and write this little utility for finding and removing redundant braces in expressions using node-falafel:- http://edinburghhacklab.com/2014/02/remove-redundant-bracket...

The larger problem I am doing is static code analysis for Firebase and the JS tools for doing such stuff are delightful compared to yacc and lex and javacc etc.

Functional programming really shines in this domain. You can populate your symbol table with functions that get "called" when "CallExpressions" are encountered during parsing, or functions that expand to function declarations on "MemberExpression" are encounter during parsing (the <dot> operator). Its very easy to mirror the true structure of JS using JS if that makes sense.

I agree with you that functional programming really shines. I love using the lodash where() method when analyzing ASTs.

How is anybody suppose to know that this is a slideshow?

I'm starting to think people just click the up arrow because they like the title.

I'm not reading these slides, this information would be presented much better as a simple webpage.

Also, to prevent the initial collage of text set everything to hidden then fade in or show after the document is ready.

You can also view the presentation here: http://gregfranko.com/blog/building-javascript-tools/ It has been exported to speaker deck

I have completely the opposite opinion. I think the only reason I read the whole thing was because it was a slideshow.

What a bad UX. It took my a while to figure out that I need to use arrows.

thanks! I did not work it out myself. It presented a load of jumble for a flash and did nothing. Clicking it just opened another window with the same initial jumble (Chrome linux something)

Added instructions =)

I stared at the page for 10 seconds before realising that i have to use arrows. I'd suggest adding simple instructions like "Press arrow keys to navigate".

On my iOS6 4s, the slideshow looks like all of the text jumbled in a pile for just an instant. Then mobile safari crashes...

Linux Opera 12.16, the page is a jumble for an instant, too, then just the title, author and what looks like a link you can't click.

edit: didn't realize you had to use the arrow keys. In which case it appears to work fine, except the second slide where the image is squished.

Ok that is static code analysis for JS. What is static code analysis good for? Seriously, can someone please explain or post a link better than Wikipedia? I live under the impression that I write beautiful (understand sufficiently optimal) OO JS using TypeScript, what has SSA to offer to me? PS: of course I a noob.

You may someday want to build tools to transform javascript code. Suppose you wanted to Typescriptify some legacy code. You'd build your own js code processor, using the libraries this presentation advertises.

My presentation focused on creating new tools, but it is important to understand the concepts so that you can contribute to existing tools. Maybe in the future you will contribute to TypeScript.

Thanks, that makes sense.

I just get a title page, the link goes nowhere. Edit: use arrow keys

There's no need to make the text rotate in every single slide and why can't I just use the mouse to navigate? This UX is terrible.

Now now, don't be mean. You can also view the presentation here: http://gregfranko.com/blog/building-javascript-tools/

I like the slideshow. Did you use a library for that? And is there a slideshow -> single page converter JS tool?

Yea, I used Bespoke.js (http://markdalgleish.com/projects/bespoke.js/). Bespoke has a really nice Yeoman generator (https://github.com/markdalgleish/generator-bespoke) that makes it easy to get started and to deploy to Github Pages.

In terms of the converting to PDF (to upload to Speaker Deck), it is recommended to just save the webpage to PDF in chrome or another browser that supports this feature (you can do this by beginning the print process and then changing to 'Save as PDF')

Bespoke has a print stylesheet, which is why the styles are still kept.

Looks interesting. Any links to the actual talk?

I presented this talk at jQuery San Diego last week (http://events.jquery.org/2014/san-diego/), so I'll link to the video when it is up!

Reply on news.ycombinator.com