6 ms·

Building JavaScript Tools You Didn't Think Were Possible

18 points by gregfranko 13y ago

jiggy2011 13y ago
I just get a title page, the link goes nowhere. Edit: use arrow keys
lukasm 13y ago
What a bad UX. It took my a while to figure out that I need to use arrows.
- tlarkworthy 13y 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)
- gregfranko 13y ago
  Added instructions =)
LukeB_UK 13y ago
It should be mentioned that this is a slideshow. Just in case anyone just sees the initial page and thinks that's it.
bubblesorting 13y 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?
- gregfranko 13y ago
  Yep, exported it to Speaker Deck =) http://gregfranko.com/blog/building-javascript-tools/ http://gregfranko.com/blog/building-javascript-tools/
  - bubblesorting 13y ago
    Cool! Thanks!
corysama 13y 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 13y 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 13y ago
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 13y 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 13y ago
Looks interesting. Any links to the actual talk?
- gregfranko 13y ago
  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!
chingjun 13y 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 13y 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.
- gregfranko 13y ago
  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
- js7 13y ago
  I have completely the opposite opinion. I think the only reason I read the whole thing was because it was a slideshow.
tlarkworthy 13y 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-brackets-from-expressions-with-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.
- gregfranko 13y ago
  I agree with you that functional programming really shines. I love using the lodash where() method when analyzing ASTs.
error54 13y 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.
- gregfranko 13y ago
  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 13y ago
    I like the slideshow. Did you use a library for that? And is there a slideshow -> single page converter JS tool?
    - gregfranko 13y ago
      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.
rich_harris 13y ago
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 13y ago
  If only everyone on Hacker News was as nice as you Rich
dandare 13y 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 13y 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.
- gregfranko 13y 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.
  - dandare 13y ago
    Thanks, that makes sense.

18 points by gregfranko 13y ago

jiggy2011 13y ago

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

lukasm 13y ago

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

tlarkworthy 13y 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)
gregfranko 13y ago
Added instructions =)

LukeB_UK 13y ago

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

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

gregfranko 13y ago
Yep, exported it to Speaker Deck =) http://gregfranko.com/blog/building-javascript-tools/ http://gregfranko.com/blog/building-javascript-tools/
- bubblesorting 13y ago
  Cool! Thanks!

corysama 13y 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 13y 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 13y ago

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 13y 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 13y ago

Looks interesting. Any links to the actual talk?

gregfranko 13y ago
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!

chingjun 13y 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 13y 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.

gregfranko 13y ago
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
js7 13y ago
I have completely the opposite opinion. I think the only reason I read the whole thing was because it was a slideshow.

tlarkworthy 13y 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-brackets-from-expressions-with-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.

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

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

gregfranko 13y ago
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 13y ago
  I like the slideshow. Did you use a library for that? And is there a slideshow -> single page converter JS tool?
  - gregfranko 13y ago
    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.

rich_harris 13y ago

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 13y ago
If only everyone on Hacker News was as nice as you Rich

dandare 13y 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 13y 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.
gregfranko 13y 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.
- dandare 13y ago
  Thanks, that makes sense.