Building JavaScript Tools You Didn't Think Were Possible

http://gregfranko.com/building-javascript-tools-talk/

by gregfranko • 12 years ago

18 30 12 years ago

gregfranko.com

jiggy2011• 12 years ago

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

lukasm• 12 years ago

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

tlarkworthy2• 12 years ago

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)

gregfranko9• 12 years ago

Added instructions =)

LukeB_UK• 12 years ago

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

bubblesorting2• 12 years ago

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?

gregfranko9• 12 years ago

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

bubblesorting2• 12 years ago

Cool! Thanks!

corysama• 12 years ago

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

lsh• 12 years ago

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.

nwinter• 12 years ago

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.

anaphor• 12 years ago

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).

eddflrs• 12 years ago

Looks interesting. Any links to the actual talk?

gregfranko9• 12 years ago

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!

chingjun• 12 years ago

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".

dm2• 12 years ago

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.

gregfranko9• 12 years ago

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

js72• 12 years ago

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

tlarkworthy2• 12 years ago

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.

gregfranko9• 12 years ago

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

error54• 12 years ago

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.

gregfranko9• 12 years ago

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

js72• 12 years ago

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

rich_harris• 12 years ago

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.

gregfranko9• 12 years ago

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

dandare2• 12 years ago

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.

hughw• 12 years ago

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.

gregfranko9• 12 years ago

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.

dandare2• 12 years ago

Thanks, that makes sense.

Building JavaScript Tools You Didn't Think Were Possible

Related Stories