

Building JavaScript Tools You Didn't Think Were Possible - gregfranko
http://gregfranko.com/building-javascript-tools-talk/

======
rich_harris
Greg is being modest by not mentioning his
[AMDClean]([https://github.com/gfranko/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](https://github.com/RactiveJS/Ractive)),
and it's transformed the way I work.

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

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

------
nwinter
I've had to do a lot of this recently for CodeCombat's transpiler, Aether:
[https://github.com/codecombat/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](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](https://github.com/codecombat/codecombat/issues/72)
and then email me to work out an arrangement.

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

------
bubblesorting
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?

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

~~~
bubblesorting
Cool! Thanks!

------
tlarkworthy
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...](http://edinburghhacklab.com/2014/02/remove-redundant-brackets-
from-expressions-with-falafel/)

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.

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

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

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

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

~~~
tlarkworthy
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)

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

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

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

~~~
gregfranko
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.

~~~
dandare
Thanks, that makes sense.

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

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

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

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

~~~
gregfranko
Yea, I used Bespoke.js
([http://markdalgleish.com/projects/bespoke.js/](http://markdalgleish.com/projects/bespoke.js/)).
Bespoke has a really nice Yeoman generator
([https://github.com/markdalgleish/generator-
bespoke](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.

------
eddflrs
Looks interesting. Any links to the actual talk?

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

