Part I of 3: Visualize your application's routes with Pathfinder-UI

In my previous post, I walked through how we might use the Express Router to create modular Express 4.x apps that are extensible and maintainable. Having a modularized app architecture has numerous benefits, but as my own teammates and I built larger applications, we ran into another challenge: the nesting of routers within other routers was making it harder for us to (1) see our entire app structure and (2) navigate through our routes quickly.

Fortunately, Pathfinder-UI is an open-source Node/Express developer tool that was built with those objectives in mind. In this three-part series, I'll show you how easy it is to use Pathfinder-UI to work more productively as you develop RESTful routes and APIs for your applications.

Let's get started!

Say you've jumped on a new project using Node.js and Express.js and you want to get up to speed on what routes are defined in your app. What do you do?

If you're like me, you might thumb through the files in the routes directory and other server files, like this:
current workflow

You're scanning through hundreds of lines of code, just to get a sense of what routes exist in your app.

What if there was a way to visualize the routes?

Wouldn't it be nice to look at your routes in a form other than plain code? Well, you're in luck.

With Pathfinder mounted onto your app, you now have an aerial view of your app's route architecture:

Pathfinder-UI Tree View

An app's routes mapped to an interactive D3 tree.

In this view, every node between the root node and a terminal node represents a nested router that contains more routes, and every router can be expanded (when shaded in blue) or collapsed to emphasize its modularity. You can pan and zoom in or out, or if your app is particularly large, you can choose to collapse all nodes into the root and gradually branch out, focusing only on the set of routes that you're interested in.

Simple, but mind-shifting

At first glance, the visualization is really quite simple. But consider how a slight shift in perspective can enhance the way you think about and understand your route architecture and design. You might ask yourself:

  • How modular is my app?
  • How RESTful are my routes?
  • Where can my API design be improved?

When you shift your perspective from seeing your routes through code to seeing them through imagery, answering such questions becomes dramatically more intuitive.

Ghost's route structure

A glance at Ghost blogging app's route structure.

Tweet this: A look at #TryGhost's route structure in #D3 using #PathfinderUI #Nodejs #Expressjs:

So, what's in your tree?

Now that you've got a sense of how Pathfinder-UI visualizes an Express app's routes, why not check how your own apps' route structures look like? See what new insights they bring, share them with your team, and use those insights to make your routes more modular and RESTful.

You can set up Pathfinder-UI in your app in 3 simple steps:

  1. Install pathfinder-ui from npm.

    $ npm install pathfinder-ui --save-dev
  2. Require the Pathfinder-UI module in your app, and mount it as another middleware at a custom route that you specify (We've defined it here our as '/pathfinder'):

    // server/app/index.js (or wherever you keep your middleware)
    var pathfinderUI = require('pathfinder-ui');
    app.use('/pathfinder', function(req, res, next){
    }, pathfinderUI.router);
  3. Go to http://localhost:PORT/pathfinder in your browser to access the Pathfinder-UI interface, where the D3 magic happens!

Feeling inspired?

While we chose to display the routes as a tree, there are so many possibilities for visualizing an app's architecture and bringing its routes to life.

If this post inspires you to drum up new types of designs and visualizations, why not consider contributing your awesome skills to help make Pathfinder-UI better? Fork the repo, play around with new visualizations, and make a pull request when you're ready to share it!

In the next part of this series, I'll show you another way that Pathfinder-UI shows an app's routes, enabling you to search for specific routes quickly and easily.

Want to share how your REST routes look like in D3? Share a snapshot of your route tree in the comments below or tweet it!

Tweet this: What my #Node #Express app's routes look like in #D3: [Image here] @tweetwithcat

comments powered by Disqus