

Show HN: PojoViz – Visualize the structure of any JavaScript library, framework - maurizzzio
http://maurizzzio.github.io/PojoViz/public/vulcanize.html#readme

======
arghbleargh
This is a pretty interesting concept, but the site doesn't do a good job of
explaining exactly what it does. A realistic step-by-step example would help a
lot. Is it doing some kind of static analysis, or is it looking at the object
graph at some specified point in the program's execution?

I think it would be really useful to have a tool that visualizes execution
paths of programs to help you understand the general architecture of someone
else's project. I believe debugging tools are able to do this to some extent,
but I haven't seen anything that exactly fits, especially for JS. I would want
to be able to do some interaction (e.g. mouse click) and see a visualization
summarizing all the lines of code that were run without stepping through them
one-by-one. Maybe this is a direction that PojoViz could go in eventually.

~~~
maurizzzio
Actually I wrote a step-by-step example of the Object function in the readme
file, what PojoViz does is just make an analysis of the structure of the
library without running any code from it, it's pretty simple but the results
are kinds amazing like discovering that Function.prototype is actually a
function O:, but your idea is awesome and should be the next step of PojoViz,
thanks!

~~~
Uehreka
Just a heads up, analyzing the structure of code without running it is called
static analysis. If you're going to continue working on this, you may want to
look into using a parser like Esprima
([http://esprima.org/](http://esprima.org/)).

~~~
maurizzzio
Thanks :)

------
Kiro
OT but I'm looking at jQuery and can see that some methods are defined on the
jQuery object and some on jQuery.prototype. What's the rationale? Why not
define all methods on the prototype?

~~~
skrebbel
The ones in jQuery are a bit like static methods in classical OO languages. A
JQuery instance encapsulates a set of nodes, so methods that don't apply to
nodes are on the JQuery object and not the prototype.

------
aye
Whew, maybe I'm just thick, but it took me four tries to select a library,
export the global, and all I see is "uncaught exception: error getting the
key".

~~~
maurizzzio
hi there, could you tell me what library you selected please?

~~~
aye
Sure! I chose extjs -- it's a pretty big framework, so that may have something
to do with it.

~~~
maurizzzio
O: in my work I use that and sencha touch too, during the development process
I had some problems adding it but I'll try to fix it soon, thanks!

------
menssen
I'm curious about the "Angular drawer settings" section in the settings page.

Is this list "discovered" in some way, or is the list of Angular services to
inspect hard-coded?

~~~
maurizzzio
That's a good question, unfortunately it's hardcoded since the whole list of
services contained two nodes that created a lot of branches which are the
_$window_ and _$document_ services, to overcome this problem I created a
custom _Angular_ analyzer as you can see here
[https://github.com/maurizzzio/PojoViz/blob/master/src/analyz...](https://github.com/maurizzzio/PojoViz/blob/master/src/analyzer/Angular.js)

------
nacs
The experimental three.js renderer is especially nice and lets me see the 'big
picture' well. Nice work.

------
johnpmayer
Looks like you can only see existing libraries on cdnjs? The version of elm-
runtime is about 4-5 versions old.

~~~
maurizzzio
Yes, most of the external scripts I use in my projects are fetched from this
place, I'll be glad to add the resource you want :)

~~~
johnpmayer
[http://elm-lang.org/elm-runtime.js](http://elm-lang.org/elm-runtime.js)

I'm very curious what it looks like!

~~~
maurizzzio
Hey, you can now enter a valid url pointing to a js file and PojoViz will
recognize it and ask directly for the global name.

The good news: your library can now be rendered by pasting the location of
your script in the input field The bad news: I see that elm has most of its
code under private functions which can be seen after creating an instance,
unfortunately PojoViz doesn't do this because it doesn't know how to, anyway
if you want to add a custom analyzer is easy as pie, take a look at
[https://github.com/maurizzzio/PojoViz/tree/master/src/analyz...](https://github.com/maurizzzio/PojoViz/tree/master/src/analyzer)
to see how to make custom analyzers

------
adamnemecek
Awesome! I've actually been looking for something like this a while back but
didn't find anything.

------
ww520
This looks awesome. Nice to see tools like this.

