I recently started working on a developer tool called FromJS. The aim is to help developers understand the codebase they’re working with.
This post walks through that demo and clarifies the functionality and purpose of FromJS.
Let’s go through some examples.
Where does the todo item data come from?
The demo app shows two todo items. We can click on one of them to find out where the data for it came from.
FromJS selects the “B” character of “Buy milk” by default and shows its origin.
At the top is the selected HTML element, with the inspected character highlighted.
Below it you can see the path the character traveled before reaching the screen.
The first step shows that the todo item was originally loaded from localStorage using
The last step shows how the string was added to the DOM, in this case by an
innerHTML assignment in jQuery.
Where does the label tag come from?
Selecting a character in the
<label> tag lets you to see why that tag was created. It comes from a script tag template in the index.html file.
I’m hiding a lot of steps between the script template tag and the insertion into the DOM.
The steps can sometimes be confusing to look at, but in this case there are two interesting bits of information we can get by viewing all of them.
Finding where the template is loaded
First of all, we can see where in the code the template is read from the
This is happening in jquery.js, but by clicking the arrow in the top right we can see the full call stack.
$("#item-template").html call in todo-view.js is used to get access to the template string (which is then passed into
Finding where Underscore parses the template
Scrolling further down we can also see that at some point Underscore parses the template and uses it to create a new dynamic function.
new Function() syntax is similar to calling
Why is “Buy milk” marked as done?
Each todo item in TodoMVC appears as an
<li> tag in the DOM. It’s hard to select the
<li> tag by clicking on it, but we can navigate to it using the Element Up button.
By clicking on the class name we can see that the “completed” class was added to the
<li> tag because the model’s
completed property was
Going beyond the demo
It’ll take me a while to make it work for other apps. You can sign up for updates on the FromJS website.
If you have any thoughts or feedback please leave a comment or create an issue on Github.