JavaScript code analysis - maintainability rating with Plato

Question

I've been working with JavaScript for a while now and just started analyzing my code with Plato. I'm not sure how it calculates maintainability but the code bellow returns maintainability score of 69.3. What am i missing? Tried adding comments and it didn't change.

/*globals jQuery*/
var App = App|| {};
App.AnimateSearch = (function ($) {
    'use strict';

    var searchContainer = $('[search-container]'),
        emptySearchMessage = $('.empty-search-message');

    function animateEmptyMessage() {
        emptySearchMessage.css({
            'opacity': 0,
            'transform': 'scale(0.5)',
            '-webkit-transform': 'scale(0.5)',
            '-moz-transform': 'scale(0.5)'
        });

        emptySearchMessage.fadeIn().animate({
            'opacity': 1,
            'transform': 'scale(1)',
            '-webkit-transform': 'scale(1)',
            '-moz-transform': 'scale(1)'
        }, 300);
    }

    function animateSearch(customClass) {
        searchContainer = typeof customClass === 'undefined' ? searchContainer : $(customClass);
        searchContainer.css({ 'margin-top': '100px', 'opacity': 0 });

        setTimeout(function () {
            searchContainer.stop().animate({ 'margin-top': '0', 'opacity': 1 }, 300);
        }, 500);
    }

    return {
        animateEmptyMessage: animateEmptyMessage,
        animateSearch: animateSearch
    };
}(jQuery));

Thanks for your help/suggestions!

Answer 1

Maintainability is a function of a lot of different parameters. A maintainability around 70 is usually perfectly acceptable. ~70+ is good, 30-70 is in a warning zone, and under 30 is usually a problem. If you want to improve your score, try to move some of those css properties into css classes with animations.

You also rely on jquery simply to do the selections in the init and select a custom container in the search. The initial selections could be passed in as parameters, and the support for a custom class seems like it's a bit of a hack that was probably added in to support something after the fact (why? because of the function name animateSearch and then having support for any arbitrary class that may or may not have anything to do with search).

Both those changes would improve "maintainability" but, again, ~70 is not necessarily a problem. The scores are only important as they relate to the other code in an application and the comfort level of the developers.

That said, this code is simple but could easily get out of hand as one off solutions are added. A generic animation solution would be one abstraction. Using css animations and simply adding classes by convention or some app-level framework would be another; eg some backbone component, angular directive or web component that managed their own states based off emptiness or otherwise. Those individual implementations would also very likely be just as "maintainable," score-wise, but it's limiting the scope and potential future creep that is important.

If a file never changes and never needs to be understood after being written then maintainability is irrelevant. If a file will undergo many changes or needs to be fully understood in order to address all future code, then maintainability is a priority.