JavaScript Code City

0

These might not appeal to everyone of my readers, they are more of a computer programmer’s domain, I think they are pretty dang ace though.  Using a code analysis tool, they pushed though the entire code base of a bunch of JavaScript libraries to see how the code is structured visually.  Each set of functions is called within other functions and classes, and things, giving you a pretty good hierarchy of the order, then using that structure, a 3-D library is used to build a cityscape representation of the code base.

Here’s one of the more famous libraries, it’s pretty much in use everywhere on the internet right now.

jQuery

jQuery city

When you go to the rendered page, you can move around and play with the city.  You can zoom in and see each individual building, and what they’re mostly made up of.  Spoiler, most of them are all anonymous function, many levels deep.

This longer, lower city block is react.js

react city

Things are much more spread out in this city, not as dense, but still it does quite a lot of stuff.  React.js powers my photo/vacation site – steve.deadlycomputer.com.  Take a look at the fully interactive version, it’s quite fun.

In total, there are 60 different JavaScript libraries or frameworks represented in the city format.  For those of you that are front end developers, you’ll probably recognize most of them.  It’s really neat to see the make up of those libraries, how concentrated some are, how big and bloated some are, and how tall some are.  I thought it was neat, I hope you do too.

{reddit}

Leave a Reply

Your email address will not be published. Required fields are marked *