javascriptgoogle-closuregoogle-closure-libraryplovr

getting started with Google Closure if you don't care about minifying/compiling?


If you don't care about minifying your code, is there a way to get started using the Google Closure library without having to set up a subversion client and use the compiler? The Notepad sample program on Google's website refers to

  <script src="closure-library/base.js" > </script >

Can you simply download closure-library/base.js somewhere and start playing with the UI examples? The Closure Lite quick-start version doesn't appear to include goog.ui


Solution

  • Take a look at this thread on closure discussion group.

    Here is what my html source roughly looks like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    
    <!-- style sheets -->
    <link rel="stylesheet" href="/m/myapp/css/style.css">
    
    <!-- closure base -->
    <script type="text/javascript" src="/m/google-closure/closure/goog/base.js"></script>
    
    <!-- file containing dependencies specific to the project -->
    <script type="text/javascript" src="/m/myapp/my-deps.js"></script>
    
    <!-- main script of my application -->
    <script type="text/javascript" src="/m/myapp/main-script.js"></script>
    
    </head>
    <body>
    
    <div id="myapp_div"></div>
    <script type="text/javascript">
        load_myapp_into("myapp_div");
    </script>
    
    </body>
    </html>
    

    Write your application code and organize it in any way you like in a directory that maps to /m/myapp url. It is only necessary to specify the main script file. The remaining ones will be loaded according to the dependency map by base.js.

    Kind of an interesting feature of closure is that you can move and rename files any way you like since dependency calculator determines for you what comes from where.

    The most important part is to calculate the dependency file - my-deps.js here. I still use their old calcdeps.py, but looks like there is a better tool now called depswriter.

    After running calcdeps.py you'll most likely have to rewrite paths inside generated deps file, because those paths must be relative to base.js.

    Also, even though you may not be interested in the compiler - it is helpful as it points out many errors. I use compiler anyway just for that purpose. Also - closure without a compiler may only be useful for debugging, because download size of uncompiled code may be huge.

    Don't pass by closure templates - they are really neat.