Show HN: PojoViz – Visualize the structure of any JavaScript library, framework | Hacker News Reader

Show HN: PojoViz – Visualize the structure of any JavaScript library, framework

maurizzzio.github.io

78 pointsmaurizzzio19 comments

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.

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!

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

Thanks :)

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?

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.

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

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

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

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!

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?

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

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

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

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

http://elm-lang.org/elm-runtime.js

I'm very curious what it looks like!

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... to see how to make custom analyzers

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

This looks awesome. Nice to see tools like this.

Reply on news.ycombinator.com