.

Tags:

I have written about the concept and the tool for complexity analysis of JavaScript code before. In addition to that complexity monitoring strategy, apparently it is also useful to produce the so-called complexity report. Fortunately, now we have a visualization tool which allows us to prepare such a report.

Given a set of JavaScript files, Plato from Jarrod Overson (GitHub: github.com/jsoverson/plato) will happily consume it, run some analysis (using JSComplexity, among others), and output an interactive chart at your disposal. If you missed my previous post on code complexity, JSComplexity basically uses Esprima to parse your code, obtain the abstract syntax tree (AST), and then process it based on the complexity analysis algorithm.

There are some ready-to-enjoy exemplary Plato reports, such as the one for jQuery. The summary page, as shown below, is useful to give a quick comparison of the different source files, in terms of code complexity, lines of code (LOC), etc.

plato_overview

Clicking on one of the bars will open a detailed report. Particularly interesting here is the complexity distribution (depicted in a fancy donut chart) of various functions in that particular source file. Even better, when you choose a segment and click on it, it will jump to the source code directly.

plato_donut

While the code view is beautiful (with syntax highlighting and such), an interesting feature here is the analysis overlay. If a function is marked with dotted border, you can hover there and there will be a nice analysis tip.

plato_overlay

If you want try it yourself, Plato is very easy to use. Just install the plato package (you need Node.js) and you are ready to analyze your own code.

Who says code analysis can’t be fun?

  • http://twitter.com/cssensei Octavian Cioaca

    Can wait to try it. Thank you for sharing!

  • BS
    • http://ariya.ofilabs.com/ Ariya Hidayat

      We’re all paid by the lines-of-code. This metric is important for our job security!

      • Kevin Williams

        I keep proposing just that! Pay by lines of code.

        Start with base wage and SUBTRACT from that for each line of code with $0 paid for non-working code. ;)

        (Just kidding, it’s the thought that counts. Elegant doesn’t mean overly simple and flexible often means complex: Flexible, fast, simple – pick two).

  • http://twitter.com/Rhiokim Rhio.kim

    Thanks for your sharing :-)

    • http://ariya.ofilabs.com/ Ariya Hidayat

      My pleasure!

  • http://twitter.com/Swafunk Swafunk Noyss Alehan

    How we can analyze the results? I mean, what means 110 maintanabilty? What is a valid range for maintanability or complexity? I just installed Plato and… I didn’t know how to interprete numbers. A little help will be helpful! :)

  • http://www.facebook.com/BikeAnimal George White

    Will it run on a Mac?

    • http://ariya.ofilabs.com/ Ariya Hidayat

      Pretty much so. It’s just a typical Node.js app.

  • http://www.facebook.com/BikeAnimal George White

    hmm…. like a lot of these clever, stitch your own things…

    npm ERR! Error: No compatible version found: plato
    npm ERR! No valid targets found.
    npm ERR! Perhaps not compatible with your version of node?
    npm ERR! at installTargetsError (/usr/lib/node_modules/npm/lib/cache.js:424:10)
    npm ERR! at /usr/lib/node_modules/npm/lib/cache.js:406:17
    npm ERR! at saved (/usr/lib/node_modules/npm/lib/utils/npm-registry-client/get.js:136:7)
    npm ERR! at cb (/usr/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:36:9)
    npm ERR! Report this *entire* log at:
    npm ERR!
    npm ERR! or email it to:
    npm ERR!
    npm ERR!
    npm ERR! System Darwin 11.4.2
    npm ERR! command “node” “/usr/bin/npm” “install” “plato”
    npm ERR! cwd /Users/nigewhite/Sencha/SenchaPackages/packages
    npm ERR! node -v v0.4.11
    npm ERR! npm -v 1.0.106
    npm ERR!
    npm ERR! Additional logging details can be found in:
    npm ERR! /Users/nigewhite/Sencha/SenchaPackages/packages/npm-debug.log
    npm not ok

    • http://ariya.ofilabs.com/ Ariya Hidayat

      Most likely outdated version. Get Node.js version 0.8 or later.

      • http://www.facebook.com/BikeAnimal George White

        Sigh… It’s for… I dunno… people in the know?

        Checking for program g++ or c++ : not found
        /Users/nigewhite/Sencha/node/wscript:254: error: could not configure a cxx compiler!

        Why not just click on something and it installs it?

        • http://ariya.ofilabs.com/ Ariya Hidayat

          Eh? http://nodejs.org/download/ and Mac OS X Installer gives you exactly that step-by-step installer. Done this gazillion times without a hitch.

          • http://www.facebook.com/BikeAnimal George White

            OK, so I installed that. And redid npm install -g plato

            And got

            npm ERR! Error: No compatible version found: plato
            npm ERR! No valid targets found.
            npm ERR! Perhaps not compatible with your version of node?
            npm ERR! at installTargetsError (/usr/lib/node_modules/npm/lib/cache.js:424:10)
            npm ERR! at /usr/lib/node_modules/npm/lib/cache.js:406:17
            npm ERR! at saved (/usr/lib/node_modules/npm/lib/utils/npm-registry-client/get.js:136:7)
            npm ERR! at cb (/usr/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:36:9)
            npm ERR! Report this *entire* log at:
            npm ERR!
            npm ERR! or email it to:
            npm ERR!
            npm ERR!
            npm ERR! System Darwin 11.4.2
            npm ERR! command “node” “/usr/bin/npm” “install” “-g” “plato”
            npm ERR! cwd /Users/nigewhite/Sencha/SDK/extjs
            npm ERR! node -v v0.4.11
            npm ERR! npm -v 1.0.106
            npm ERR!
            npm ERR! Additional logging details can be found in:
            npm ERR! /Users/nigewhite/Sencha/SDK/extjs/npm-debug.log

          • http://www.facebook.com/BikeAnimal George White

            node –version (guessed command) gives

            v0.4.11

            Even though I just did that install.

          • http://ariya.ofilabs.com/ Ariya Hidayat

            Seems that some local install, possibly from Sencha SDK (judging from that /Users/nigewhite/Sencha/SDK/extjs path), still takes priority and overrides the global one.

          • http://www.facebook.com/BikeAnimal George White

            Augh. OK, manually edited .profile (just about remembered that thing) and got it installed. Installed plato. Run it.

            And got

            Could not parse JSON from file report/files/src_Action_js/report.history.json
            Could not parse JSON from file report/files/src_Component_js/report.history.json
            Could not parse JSON from file report/files/src_Editor_js/report.history.json

            etc……………. on every single source file

          • http://ariya.ofilabs.com/ Ariya Hidayat

            No idea. Perhaps those files aren’t valid and need to be excluded? In all cases, consult the project at https://github.com/jsoverson/plato.

          • http://www.facebook.com/BikeAnimal George White

            Produces a report though. Very interesting.

          • http://ariya.ofilabs.com/ Ariya Hidayat

            You definitely still have the old Node.js lying around. One of the error messages says it clearly:

            npm ERR! node -v v0.4.11

  • Guest

    Sigh… It’s for… I dunno… people in the know?

    Checking for program g++ or c++ : not found
    /Users/nigewhite/Sencha/node/wscript:254: error: could not configure a cxx compiler!

    Why not just click on something and it installs it?

  • Gavin Wang

    Just my need,Thanks :)