Overview
I've been interested in the internal structure of jQuery for as long as I can remember, but it can be overwhelming at the best of times, so I've recently made-good on my plan to build an interactive breakdown of the physical code.
jQuery Deconstructed has been designed to visually and interactively deconstruct the internal code of the jQuery JavaScript library.
It breaks the physical JavaScript into visual blocks that you can easily navigate. Each block opens to reveal its internal code. Clickable hyperlinks allow you to follow program flow.
Essentially, it provides a rather handy birds-eye view of the jQuery library, making it easy to dig into and understand the coding behind the seemingly-simple syntax.
Points of note:
- It breaks the physical JavaScript into visual blocks that you can easiliy navigate.
- Each block opens to reveal its internal code
- Clickable hyperlinks allow you to follow program flow
It now also has a few nice features such as:
- Live links to the online documentation
- Color themes
- Optional icons
Check it out here: davestewart.io/resources/javascript/deconstructed/
Implementation
As much as I would love to say parsing of the library source code was automatic, the entire project had to be built manually, by painstakingly going through the source code and breaking it down into component parts.
Each chunk of source code was identified and manually wrapped in HTML template blocks such as "function", "properties", "code", which in turn were wrapped in sections like "object" or "section". These blocks were then customised using Regular Expressions to extract the particulars of the source code (type, function name, etc) which was then added to the template's attributes or text.
Once the final HTML structure was complete, usually after many hours or days of painstaking manual work, it was ready for interactivity, including:
- manually assignment of tooltips and links to original source documentation
- automatic assignment of collapsable sections
- automatic assignment of syntax highlighting and internal hyperlinks
History
When I was first planning xJSFL , I thought the way to do it would be to emulate jQuery, so I set about de-constructing the vast library to see how it was done.
As it turned out, the jQuery model was not a good candidate for a Flash framework, and I learned that the jQuery plugin architecture and requirement to extend is not always the best option.
One of the most interesting discoveries and something that I came to study and draw on extensively in xJSFL was the code behind the CSS selector engine Sizzle, which is embedded deep within the jQuery source code. Discovering how Sizzle worked was instrumental to writing my own selector engine for xJSFL, and gave me lots of ideas that are used in almost all my programming today.
Ultimately, the arduous process of manually identifying and deconstructing the source code for the various JavaScript libraries laid the foundation for one of my other side projects Processr. Typically I found myself doing endless monotonous RegExp find and replacements on block after block of source code, and I knew that this process could and should be automated. Processr alpha is my first step towards that, and I hope to release a Beta next year, and ultimately a standalone framework that can be implemented in different programming languages.
Publicity
JSLibs Deconstructed generated a lot of interest on the web. It went all round Twitter, being retweeted by Paul Irish, was mentioned in JavaScript Weekly, made it into a JavaScript tools article by Rey Bango in .net magazine, and is mentioned by many blogs and even crops up on Stack Overflow from time to time as the app to use to really understand how jQuery works.
