Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

maurizzzio.github.io

Post reply on HN
Print view View original

11–20 of 21 posts

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

#11

Post by maurizzzio »

arghbleargh wrote: post #8

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 a…

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!

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

#13

Post by maurizzzio »

menssen wrote: post #12

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

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

#14

Post by johnpmayer »

maurizzzio wrote: post #10
johnpmayer wrote: post #6

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!

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

#15

Post by aye »

maurizzzio wrote: post #9
aye wrote: post #7

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.

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

#16

Post by maurizzzio »

aye wrote: post #15
maurizzzio wrote: post #9

Earlier quoted context omitted.

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!

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

#17

Post by maurizzzio »

johnpmayer wrote: post #14
maurizzzio wrote: post #10

Earlier quoted context omitted.

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

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

#19

Post by skrebbel »

Kiro wrote: post #18

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.

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

#20

Post by Uehreka »

maurizzzio wrote: post #11
arghbleargh wrote: post #8

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 a…

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/).
Post reply on HN