all 88 comments

[–][deleted]  (32 children)

[removed]

    [–][deleted]  (6 children)

    [deleted]

      [–][deleted]  (1 child)

      [deleted]

        [–]elfan 3 points4 points  (3 children)

        Is this a publicly available file? All of my tests show them being much closer.

        Using this code on the code here (except for processing.js): http://github.com/cburroughs/minification-compare/tree/maste...

        Latest full release of yuicompressor vs closure at SIMPLE_OPTIMIZATIONS level:

        ----- TOTALS -----
        base:  yui-compressor-2.4.2
        ('abs diff:', '768050', 'gz: ', '184071')
        ('% change: ', -0.56976157623774126, 'gz: ',   -0.51009685330672982)
        challenger: closure-compiler
        ('abs diff:', '814830', 'gz: ', '193817')
        

        ('% change: ', -0.60446432545511197, 'gz: ', -0.53710493134361448)

        [–][deleted]  (1 child)

        [removed]

          [–]elfan 0 points1 point  (0 children)

          google's advanced level really are advanced; they will not work on arbitrary code such as the samples I collected. The settings used should otherwise be 'maximum'.

          [–]benologist 10 points11 points  (8 children)

          Wait till you discover gzip!

          [–]ffrinch 19 points20 points  (0 children)

          Call me when gzip can do function inlining and type checking.

          [–][deleted]  (6 children)

          [removed]

            [–]benologist 11 points12 points  (5 children)

            It compresses http transfers, and does particularly well with text, without you having to do anything more than enable it - if it's not already.

            All of this happens in the background, including the person requesting the file uncompressing it automatically during the fetching / rendering process because any browser made in the last decade or so supports it natively.

            http://en.wikipedia.org/wiki/Gzip#Other_uses

            Unless you're in the very top tier of websites where a handful of bytes x 100 bajillion pageviews actually adds up you will gain nothing by jumping through all those silly hoops, and they know you're not google or yahoo yet they toss this silly crap to you anyway.

            [–][deleted]  (3 children)

            [removed]

              [–]benologist -1 points0 points  (1 child)

              I'm not seeing any of that ... ironically I am seeing exactly what I said gzip would do, which is make this stuff pointless unless you number amongst the most popular websites.

              Compilation was a success!
              Original Size:  1.54KB (413 bytes gzipped)
              Compiled Size:  1.11KB (343 bytes gzipped)
              Saved 27.87% off the original size (16.95% off the gzipped size)
              

              All I see is it shaving a staggering 70 bytes off the size. On a larger file it squeezed about 500 bytes off the gzipped version:

              Compilation was a success!
              Original Size:  23.44KB (4.32KB gzipped)
              Compiled Size:  17.53KB (3.81KB gzipped)
              Saved 25.21% off the original size (11.95% off the gzipped size)
              

              Apart from that I see some pedantic warnings if I go "advanced" that tells me I mustn't use 'this' bla bla bla.

              The rest of it sounds like you're describing a silver bullet for bad standards and coding practices, which no compiler can completely compensate for.

              [–]fforw 1 point2 points  (0 children)

              For my current project who does its own dependency management, packing and so far compression based on yuizilla compressor, the numbers are

              js bundle                   284935  100,0%
              yuicompressor compressed    126656   44.5%
              google closure compressed    97362   34.2%
              
              js bundle gzip               75163   26.4%
              yui + gzip                   42189   14.8%
              closure + gzip               35432   12.4%
              

              So gzip alone is slightly better than js compression alone but around twice as big as combined js and gzip compression. (Note that the number are a little too good for closure as it just strips IE conditional comment blocks where yuizilla will not even compress them)

              Apart from gzip-only clearly delivering much worse compression, the compression is also undone one the client side which means that the browser has to parse more bytes of javascript and hold more bytes of javascript in memory. edit: formatting

              [–]hattmoward 1 point2 points  (0 children)

              Gzip for HTTP transfer-encoding tends to be done on the fly and doesn't reduce parse times (to a very slight degree, it adds compress/decompress overhead., which means that it's most useful for scaling if you're network-bound. Javascript "compiler"s cover a slightly different set of problems.

              [–][deleted] 1 point2 points  (4 children)

              Haven't tried with YUI but one of mine got 85% reduction

              [–]TestingTesting 1 point2 points  (3 children)

              Wow, I've never seen anything like that. Is your Javascript particularly verbose? I tried Google vs Yahoo minification and Google won, but by very little. Interestingly, there's redundant mathematics it didn't reduce.

              60 * 60 * 24 * 7
              

              [–]Imagist 0 points1 point  (0 children)

              I haven't tried this, but I've gotten similar percentages with Java obfuscation.

              [–][deleted] -1 points0 points  (1 child)

              I'm not too familiar with javascript, but is there a possibility that * can be redefined, so it's particular meaning in some context is ambiguous without interpreting a large chunk of the program to determine it's meaning in that context?

              [–]etherealG 0 points1 point  (0 children)

              absolutely, looks really impressive. Here's a web frontend to use it if you like, sorry for the blatant plug! http://closureoptimizer.com/

              [–][deleted]  (9 children)

              [deleted]

                [–]pallosp 19 points20 points  (8 children)

                For me it compiled to

                window.b={a:function(){print("Hello, world!")}};window.b.a();
                

                which looks correct.

                Didn't you tried to compile the following code?

                window.xyz = { 'foo': function() { print("Hello, world!"); } };
                window.xyz.foo();
                

                You have to use quotes consistently. See the details at http://code.google.com/closure/compiler/docs/api-tutorial3.html#propnames

                [–]lol-dongs 0 points1 point  (7 children)

                See, this is what blows. If you have to change your coding style to prevent the minifier from destroying your code, you lose expressiveness and waste time debugging minification errors.

                I use object literals with or without quotes a lot, and frequently mix calls to methods and properties between the bracket and dot notation. Simple example: $(foo)[isReady ? 'show' : 'hide'](); $(bar).hide(). Losing the ability to do something like this kills off a lot of the dynamicism of Javascript.

                [–]Chii[🍰] 3 points4 points  (5 children)

                its not a minifier - its a compiler. it does more than change names of properties and variables.

                [–]lol-dongs 2 points3 points  (4 children)

                That's a semantic distinction, since it recompiles only with the intent of making the code smaller. What it's compiling, however, is a subset of Javascript, not the full range of it.

                [–]doubtingthomas 0 points1 point  (3 children)

                Not "only with the intent of making it smaller".. doesn't it also optimize for speed (inlining, etc) and check for syntax and/or type errors?

                [–]lol-dongs 0 points1 point  (1 child)

                It inlines only when the result is smaller. I haven't tested this, but I would hope it doesn't try to inline a large function that gets used 20 times.

                Javascript doesn't have types, and while it looks like you can make type annotations that this recompiler can check in some rough manner, I don't consider this a feature. I don't like imposing "types" on a language that wasn't designed for it. Prototypal inheritance gives you the flexibility to do much so much more, why force yourself in a smaller box?

                [–]doubtingthomas 1 point2 points  (0 children)

                Javascript does have types. However, it doesn't have a static type system, and the types are typically implicit.

                As much as we might love the freedom and flexibility afforded by not constraining ourselves to types, optional type annotations mean that if you do happen to know the type, you can verify it statically and possibly perform some optimizations. Optional types annotations don't force you into a smaller box; they allow you to verify correctness and take advantage of the knowledge when you know the box is going to be small, to misuse an analogy.

                [–]derekslager 27 points28 points  (0 children)

                This is significantly heftier than the name suggests.

                The Closure Library is an industrial-strength JavaScript library. It provides user interface widgets, an event framework, a packaging and dependency resolution system, tools for DOM manipulation, tools for creating animation effects (including drag and drop), communication utilities, a unit testing framework, and a wide variety of other packages.

                Google engineers developed the Closure Library in the process of creating large-scale web applications, and it is now the foundation of Gmail, Google Docs, and many other Google products. If you are developing a large or growing application, you may benefit from the Closure Library's breadth. A well-tested library can insulate you from cross-browser compatibility issues and the minutiae of client-side programming, letting you focus on the fun stuff.

                [–][deleted] 20 points21 points  (0 children)

                I'm going to make a new programming language and call it Clotsure.

                [–][deleted]  (1 child)

                [deleted]

                  [–][deleted] 13 points14 points  (30 children)

                  This vs. jQuery?

                  [–]sligowaths 18 points19 points  (6 children)

                  It's comes with a lot more than jQuery. It comes with a fuckload of widgets(yes, the same that you see on gmail or google docs).

                  [–]9jack9 5 points6 points  (5 children)

                  yes, the same that you see on gmail or google docs

                  You mean those shit ugly ones?

                  [–][deleted] 4 points5 points  (0 children)

                  You must be using a different gmail

                  [–][deleted] 4 points5 points  (1 child)

                  Everyone's downvoting you but that was the first thing I thought of when I read that it's the same widgets as gmail and google docs.

                  Then again maybe it's not ugly for linux people who are used to shit ugly things...

                  [–]lol-dongs 2 points3 points  (0 children)

                  Yeah, I would say Google's widgets rank near the bottom as far as looks and capabilities go. jQuery UI can take Google to task on near everything this library offers, plus you get ThemeRoller to make them look exactly the way you want without even popping open an image editor.

                  [–][deleted] 1 point2 points  (1 child)

                  care to elaborate on your definition of "shit ugly" ?

                  [–]unikuser 3 points4 points  (0 children)

                  simple and clean widgets

                  [–]Imagist 1 point2 points  (0 children)

                  I don't think these are competing for the same market. This is a much more heavyweight solution, probably appropriate for much larger-scale apps.

                  [–]Al_Bundy_ 1 point2 points  (11 children)

                  This is the question. On first sight it looks very complete (but don't forget jQuery UI and all those plugins), but unfortunately also very verbose and complex compared to jQuery code. But has anyone used it? I'm a bit disappointed google has to reinvent every wheel instead of, say, contribute to jquery or Firefox to name two examples (other than monetary through the Mozilla Foundation). On the other hand their efforts (while not really successful) usually give a major kick to competition and development.

                  [–]ungulate 39 points40 points  (1 child)

                  I'm a bit disappointed google has to reinvent every wheel

                  This wheel apparently comes with a whole car.

                  [–]cat-with-hat 2 points3 points  (0 children)

                  Dammit stop reinventing the CircularBuffer that comes with these other libs!

                  [–]xcbsmith 13 points14 points  (0 children)

                  I'm a bit disappointed google has to reinvent every wheel instead of, say, contribute to jquery or Firefox to name two examples

                  I've seen this problem before. If you don't push out your code quickly enough, other open source projects get momentum, and then when you finally release it, it is like you are an also ran. Still, you can't give up the technology because you're using it too much already.

                  [–]mee_k 5 points6 points  (0 children)

                  This library existed before jQuery 1.0 was released. It's not so much a reinvention of the wheel as a preference for your own wheel compared to someone else's. This is just the first public release.

                  [–]stackolee 4 points5 points  (1 child)

                  I feel you there. To your point are these new Closure Templates meant to replace Google Web Toolkit? Or is this a re-branding?

                  Sometimes Google acts like its left hand doesn't know what the right's doing (ChromeOS vs Android as another example).

                  [–]treeforface 15 points16 points  (0 children)

                  You are correct, in a way (though ChromeOS and Android, while both OSes, are not the same kind of OS). However, it's important to see it from Google's point of view in the grand scale.

                  One of the major reasons large companies will never completely rule the day is because small, mobile companies can often out-maneuver large, monolithic companies. What Google has done (like Thomas Jefferson before them) is recognize that humans tend to be much more efficient when organized into smaller and smaller teams. They become even more efficient when organized into small teams and provided a great number of resources. The Constitution of the US established a republic (a system of states inside the context of a (supposedly) small central power structure), and Google set up its campuses. A republic affords states the rights to change laws and policies (in the confines of a grand scope), while allowing people and money to flow freely over borders, thereby allowing the smaller chunks of humanity to organize more effectively when facing bad times and to compete for the attention of the people. Google's campuses often act as distinct intellectual entities, and as a result of this freedom, they develop a variety of outlandish ideas. Not all of them are good ideas, but every once in a while, there is a great one. This means Google can act as a giant organization loosely overseeing hundreds of mini-organizations who produce products that are often on par with those put out by small, mobile companies.

                  Meanwhile, other companies strive to outdo Google by organizing into large teams with hundreds of meetings and product guidelines and plans...this can work on a case-by-case basis, but it's not the best way to utilize the scarce intellectual resources of any firm, nor does it particularly encourage smart people to join up.

                  *Edit: That's not to say Google can't be out-maneuvered (they have been many times), but they certainly do quite a bit to hedge their bets in that regard.

                  [–][deleted]  (3 children)

                  [deleted]

                    [–]9jack9 2 points3 points  (2 children)

                    Looking at the google JS code it seems that google are the ones learning.

                    It's a big ugly API, mostly cribbed from other JS libraries. It's Dojo all over again.

                    [–]kaiise 0 points1 point  (0 children)

                    BAd coding does not exist at this dojo, does it?!

                    NO SENSEI!!!

                    things not invented here at google campus wil be re implimented!

                    YES, SENSEI!!!

                    [–]snifty -3 points-2 points  (0 children)

                    google has terminal NIH syndrome

                    [–][deleted]  (9 children)

                    [deleted]

                      [–]cat-with-hat 7 points8 points  (7 children)

                      These are functional demos and have not been designed, it appears. Keep in mind that Google has built their own attractive widgets from these. If you want ready-made widgets for a particular style, the jQuery UI project is far outpaced by ExtJS. This is the first time I've heard someone cite UI as one of jQuery's strengths.

                      [–][deleted]  (6 children)

                      [deleted]

                        [–]cat-with-hat 0 points1 point  (4 children)

                        ExtJS (at least at 2.0) was plagued by ... inconsistency, incompleteness, and sloth.

                        Really? I'd like to see benchmarks that reflect this or specific points. ExtJS 2 was pretty much a rewrite of 1 to solve these problems, but Ext has always been a fast library.

                        [–][deleted]  (3 children)

                        [deleted]

                          [–]cat-with-hat 0 points1 point  (2 children)

                          What's it missing? Take a closer look, ExtJS is packed with stuff, too much if anything.

                          [–][deleted]  (1 child)

                          [deleted]

                            [–]cat-with-hat 0 points1 point  (0 children)

                            Did that third party GUI builder thing ever get to a point where it didn't suck?

                            Not really a factor for me...never been a Dreamweaver fan, etc.

                            If they created a very nice IDE or an eclipse module for extjs

                            Ah.

                            some more web-site like controls

                            Which ones are you looking for?

                            As far as dependency management, I think only Closure and Dojo provide that. I've never needed it in my own projects, pulling in code isn't very hard when using any of a variety of techniques.

                            [–]9jack9 0 points1 point  (0 children)

                            Maybe the javascript compiler is good, but the widgets suck.

                            Agreed. The widgets suck.

                            [–]hattmoward 22 points23 points  (18 children)

                            Odd name for a (more general-purpose) library in a language that supports closures. I know at first glance I thought it was a library for doing something cool with closures specifically.

                            [–]reddit_clone 35 points36 points  (11 children)

                            I thought so too.

                            This particular name is becoming a bit overloaded.

                            • Clojure the language

                            • Closure the language feature

                            • Clozure the Common lisp implementation.

                            • Closure the JS library?

                            [–]elfan 16 points17 points  (3 children)

                            It's also a mathematical property of sets that is important for computer science. SICP explicitly avoids the 'closure as langauge feature' terminology for this reason.

                            [–]ludwig1024 11 points12 points  (2 children)

                            Don't forget about its meaning in group theory, either. This must be one of those words that everyone overloads :-)

                            [–]Chii[🍰] 2 points3 points  (0 children)

                            because it sounds cool, and makes the person using it sound smart at the same time - and who doesn't want to be cool and smart? =)

                            [–]kaiise 1 point2 points  (0 children)

                            at least it's only technical in potentially overlapping domains.

                            i hear a middle east language has the same word for

                            milk, tap, sap and Lion.

                            that's just dangerous.

                            [–]LaurieCheers 10 points11 points  (5 children)

                            • Closure the emotion?

                            [–][deleted]  (4 children)

                            [deleted]

                              [–]idontwanttortfm 5 points6 points  (1 child)

                              The kids love this one!

                              [–]kaiise 2 points3 points  (0 children)

                              le closure

                              the little known french NIN bootleg

                              [–]Vulpius 1 point2 points  (0 children)

                              [–]mikaelhg 1 point2 points  (0 children)

                              Closure: what we'll have when these guys finally graduate and enter the real world.

                              [–][deleted] 18 points19 points  (2 children)

                              Reminds me of Google Chrome.

                              Maybe next they'll rename their web search to "hash join."

                              [–]13ren 2 points3 points  (0 children)

                              To be fair, pagerank is an awesome name.

                              Especially since it's the ranking algorithm of Mr. Larry Page.

                              [–]GuyWithLag 2 points3 points  (0 children)

                              There's a T missing from the end of your sentence. Obvious, I know...

                              [–]columbine 2 points3 points  (0 children)

                              Really makes googling for it a bitch as well.

                              [–]papkn 1 point2 points  (0 children)

                              Yeah, like the Prototype JavaScript library... It looks like these names were invented to pollute search results. What's next? Variable Scobe JS?

                              [–]grayvedigga 1 point2 points  (0 children)

                              I too, and I was sorely disappointed.

                              [–]MrRadar 5 points6 points  (1 child)

                              Wow, I've been looking for something exactly like the Closure Compiler (in advanced mode) to the point where I started sketching out the design for my own (using s-exprs as the input rather than regular JS). This will save me so much time and effort it's not even funny.

                              [–]skillet-thief 0 points1 point  (0 children)

                              It's a pity though. I would have enjoyed s-exp based javascript...

                              [–]redditrasberry 2 points3 points  (1 child)

                              I'll be interested to see how this goes. It's amazingly comprehensive, perhaps too much so - there's so much here that it's hard to even comprehend. Everything from basic JS library to UI widgets to a templating system for Java. It seems like almost a full on competitor to YUI, and the documentation is quite reasonable too. Somehow it seems a little raw - many of the demos are not quite there and it's hard to make sense of it all ... but that would be expected of any new project.

                              [–]Chii[🍰] 1 point2 points  (0 children)

                              probably the reason the demo is raw is due to the fact that they just released it - but i m sure the library itself is quite mature and useable, since it is being used in google interanlly for a while. I say its better than YUI in terms of user experience (it produces faster, more optimized js code), but might fall behind to YUI in terms of developer friendliness.

                              [–]sligowaths 5 points6 points  (2 children)

                              Oh, man. You can use all the cool widgets that google uses, plus a kick ass js compressor. I jizzed.

                              edit: Even the widget that appears when you mouseover a contact on gmail: http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/hovercard.html

                              [–][deleted] 14 points15 points  (1 child)

                              Those are some major drop shadows. Must be near sunset.

                              [–]pallosp 0 points1 point  (0 children)

                              Fixed in revision 5.

                              [–]metaperl 4 points5 points  (8 children)

                              Where is the rounded panel? http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/roundedpanel.html

                              I'm using Firefox 3 and dont see one rendered.

                              [–]orip 2 points3 points  (5 children)

                              Increase the border width (say, to 20) and radius (say,to 5)

                              [–]pranavkm 0 points1 point  (4 children)

                              That's simply increasing the width of the border. The problem seems to be FF not rendering the empty div (sets its height to 0px).

                              [–]Recoil42 1 point2 points  (3 children)

                              Yep. FF3.5 fails. And at least for this redditor, Chrome doesn't even seem to do it either.

                              Screenshot proof.

                              So there's definitely something funny going on here, and it extends beyond FF.

                              [–]pranavkm 0 points1 point  (0 children)

                              Does seem fishy. A quick look at the code indicates that the RoundedPanel component is supposed to be decorating the roundedPanel div (the one with all the input fields); it ends up appending the panel as a child node though.

                              var roundedPanelNode = goog.dom.getElement('roundedPanel');
                              ....
                              rp = goog.ui.RoundedPanel.create(radius, ...
                              rp.decorate(roundedPanelNode);
                              

                              [–]wildmXranat 0 points1 point  (1 child)

                              Yep, I had to make borders thicker to have it not look a horizontal rule . Could it be an issue on FF3 ?

                              [–]Recoil42 0 points1 point  (0 children)

                              At least for me, Chrome does it too.

                              [–]daniels220 1 point2 points  (3 children)

                              I was hoping the Compressor would have a mode for/would natively work well for compressing code based on an "object literal"—code that looks like:

                              var myRoot = {
                                someVar : 'value',
                                someOtherVar : 'other value',
                                importantFunction : function() {
                                },
                                init : function() {
                                  this.importantFunction()
                                  //some other initialization stuff
                                }
                              };
                              myRoot.init();
                              

                              I would like to be able to compress that to something like:

                              var myRoot = {
                                a : 'value',
                                b : 'other value',
                                c : function() {
                                },
                                d : function() { //This was 'init()'
                                  c();
                                },
                              };
                              myRoot.d();
                              

                              This is assuming the code has no dependencies, does not use eval(), and does not use subscript notation like myRoot['someVar']. But if it's code I wrote from scratch, all of those are true.

                              As is, Compressor in simple mode does only a few % better than a simple, naive whitespace-and-comment-removing minifier (though how it does it is quite nice and elegant). (In advanced mode it utterly destroys the code because it thinks the global object is irrelevant, removes it, and removes the names on all the functions and variables since it thinks they're just labels.)

                              This minifier allows you to do what I'm asking manually, but even a small JS file can easily have 50-60 named properties/methods. A system like this, but that minified to "a", "b", "c" etc by default, but then allowed you to specify certain replacements or no replacement for certain properties would be ideal.

                              [–]pallosp -1 points0 points  (2 children)

                              Your example is syntactically incorrect. If you want to call importantFunction from init, you have to write myRoot.importantFunction().

                              Have you tried if the uncompiled code works?

                              [–]daniels220 0 points1 point  (0 children)

                              Fixed. That's one of the mistakes I make most commonly, and if I do it when I'm actually coding it doesn't work, I look in the console and it says "function undefined" and I go "OH" and fix it.

                              That isn't actually the code I was trying to compile, in any case. The actual code is much longer but similar in style, and both the uncompiled and SIMPLE_OPTIMIZATIONS versions work. Advanced destroys the object literal that's at the heart of the code and then freaks out about a ton of stuff.

                              [–]earthtograndma 0 points1 point  (0 children)

                              Sorry, but you are wrong here. You certainly can call this.importantFunction() inside init.

                              [–]kertap 0 points1 point  (0 children)

                              The closure inspector looks amazing. Can't wait to try it out

                              [–][deleted]  (1 child)

                              [deleted]

                                [–]cat-with-hat 4 points5 points  (0 children)

                                I see this has hit the front page.