JavaScript: Condensed Code vs. Readability

Discussion

1. Adam D

   Personally I don’t “encode”, shorten or do anything with my code. Currently I’m working on web-based applications and as a result, I generally have 2 user interfaces, one for Mobile and the other for computer based browsers. This results in having 2 javascript files on the server. In terms of load times, my projects don’t have that much difference between encoded and ‘normal’.
   Plus on the upside, it saves me time trying to translate, decode or ‘humanize’ code. :)
2. Erik

   I think that compressors, especially google closure compiler make you write javascript differently, only exposing what’s needed.
   The compressors do take care of the bandwidth issue, so for the uncompressed version, it should be as verbose as possible.

   The changes that you are writing piece of code that will only be read by you are not high, might as well write it as “understandable” as possible.

   Not necessarily bloated with comments, but any functions that are not in the global namespace should be named with names that are long enough to make the meaning of the function easy to comprehend..

   That’s my 2 pennies!
3. tbela99

   I don’t really matter about that, I use jsmin to compress embedded js snippets http://github.com/rgrove/jsmin-php/ . so the code remains readable

   for the js files I use the google minifier.
4. Nickolas Simard

   I almost choked with your Christina Ricci reference!!

   I pretty much always choose readability over compression… I like to be able to understand my code few months later, and I also appreciate the fact that OTHER developers might wanna take a look under the hood…

   With High speed Internet (and Unlimited Internet for the majority of mobile Internet users) I’m not minding the few additional Kb.

   Which is why I leave it “readable”. But that’s just me, heh!
5. Braxo

   I prefer to keep things readable. If I’m building for a larger web application, I worry more about requests to the server than I do a few kb here and there. So my first step is to combine my script files and check improvement rather than spending time chaining function calls together.
6. Jacob Rask

   What is your opinion on loading -min (YUI or Closure) versions of files but also keeping the full versions on the live server? We do that at work, but is it commonplace?
7. Dustin Hansen

   She’s crazy with the restraining orders, right? I mean one little obsessive I want to lick your face comment while tackling her to the ground, and she gets all huffy. *sigh* Anyway…

   I completely agree with being verbose in the source files, and if I do use shortcut methods such as conditional expressions (especially those used inline), I will always add the necessary parenthesis to visually illustrate even a basic order of operation.

   myElement.setStyle('display', (parent.get('tag') == 'a' ? 'none' : 'block'));

   Especially on unary operators.
   var restrainingOrders = ((++meToo) || 1);

   I never took the time to notice YUI had no effect on string literals, but I love the solution of using indexed arrays for element methods. Beautiful solution! ^_^
8. Dave Ward

   Many of the advanced minification optimizations become marginal improvements once you consider HTTP compression (i.e. gzip/deflate). I prefer to keep the code readable, and not count on minification to do much more than remove whitespace and comments; basically preparing it for HTTP compression.
9. cdoggyd

   I put a minified version into production, but I keep a standard, readable version available for future changes. The best of both worlds.
10. Mike

    I keep a readable file on disk, but create a compressed one and upload it to run the javascript on my pages. That way my scripting doesn’t get ripped as easily and I can still edit it.
11. Richard

    Great article!

    I prefer writing in the style of myElement.setStyle('display',parent.get('tag') == 'a' ? 'none' : 'block');.

    I use a custom parser/compressor that also caches and packs my JS or CSS code with gzip, keeping the original source clean and readable no matter if production or development. I.e., several JS or CSS-files are concatenated, parsed and cached. Reduces several HTTP requests to one. ;)

    Need to look at the YUI compressor again some day soon though.
12. David Walsh

    @Jacob Rask: Yes, that’s commonplace, but it doesn’t address some of my compressions issues.
13. Eneko Alonso

    Google’s Closure Compiler would shorten the method names for you when compiling your code in advanced mode:

    myElement.c("click",function(){myElement.d("opacity")?myElement.b("display",0.5).a("text","Can you see me?"):myElement.b("display",1).a("text","You cannot miss me!")});
    

    The problem of advanced mode is that it renames even global variables, so you have to compile all your JS code at once.

    Still, it does not seem to cache the string literals, even if used more than once.
14. Claudio Ferreira

    I also generally prefer readability over compression. The PHP5 Minify http://code.google.com/p/minify/ does a great job for my current compressing needs.

    Still I pretty much relate to this kind of obsession. Maybe you could write a pre-processor for the minifier (propably for the YUI compressor too) and use a dictionary to replace the most common literals with your “object method” notation. This way you might get higher compression ratios while keeping readability. Perhaps a couple of preg_replaces would do the trick?
15. John

    With so much emphasis on reuse in our contemporary society I strongly sway on the side of readability. There is nothing worse than picking up from someone else a chunk of code and having to slog your way through it before you can use it … of course this wouldn`t happen and reuse goes out the window. There is the argument for heavily commented sort code, however we don`t always comment our code especially when deadlines are closing in on us. And when compressing we loose all comments.
    I tend to go for readable code and then compress it, having two versions. This may be duplication but saves an awful lot of time.
16. Espreson

    This is a Blu-Ray, broadband era.. I agree 100% with you. Few KB will not slow down a site a bit.
    Readability is important for future code manipulation.
    I like the code to be understandable..
    We have many minify tool which minifies code server side..without affecting the main code..
17. Lewis Phạm

    I prefer to keep my code readable to good developers only, not my boss or some junior boys.

    Let’s consider this example.

    var animals = function(fish){
        return cat(fish).then(function(bone){
            return dog();
        });
    }
    

    It can be shortened with ES6 syntax.

    let animals = fish => (cat(fish).then(bone => (dog(bone))));
    

    You know, my boss doesn’t understand the latter one.
18. Wyatt

    I prefer readability + clarity over shortness. Loading over 3G is still an issue, sadly. However, the original snippet (sans comments) gzips to 206 bytes, the final minified (47%) snippet gzips to 198 bytes.

    Great discussion, BTW.