google closure library usage from google app scripts using HtmlService

Question

Is it possible to access google closure library functions from google app scripts via HtmlService? The html files in the google scripts seems to be filtering out anything related to closure library.

project: I am exploring DOM manipulation utilities from Google Closure library from within the google app scripts using HtmlService. I intend to run this as a stand alone web app.

The closure functions work when directly loaded into the browser from its local client environment - but they dont work when injected from GAS app via the HtmlService utility.

Here is the code I am using in the GAS.

html file

<html>
  <head>
  <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
  <script>
    goog.require('goog.dom');
    function c_sayHi() {
      var newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},'Hello world!');
      goog.dom.appendChild(document.body, newHeader);
    }
  </script>
  </head>

  <script>
    function c_updateButton(date, button) {
      button.value = "clicked at " + date;
    }
  </script>

  <body onload="c_sayHi()">
    <input type='button' value='Never Clicked'
    onclick='google.script.run.withSuccessHandler(c_updateButton).withUserObject(this).s_getCurrentDate()'>

    <input type='button' value='Never Clicked'
    onclick='google.script.run.withSuccessHandler(c_updateButton).withUserObject(this).s_getCurrentDate()'>
  </body>
</html>

Google Script file

function s_getCurrentDate() {
  return new Date().toString();
}

function doGet(e) {
  return HtmlService.createTemplateFromFile('hello').evaluate();
}

I have prefixed c_ to client side functions and s_ for server side fns. When running this as a web app,

1. Function c_sayHi has no effect - I am not sure if it is even invoked.

2. Functions s_getCurrentDate and c_updateButton work fine as described in google's documentation https://developers.google.com/apps-script/html_service.

Is there a way to get closure library working from the web apps as attempted above?

Answer 1

Couple of things here -

1. All .gs files is JavaScript that runs on the server side. So the DOM is not really relevant there.
2. You can run client side JavaScript by returning code in HtmlService. This is what I believe you want to do. However, jQuery is the best supported library on this approach. Closure might end up working but the team does not specifically test against that library.

Answer 2

The problem is that Closure's dependency structure is executing before the window load event, otherwise it will not work. So any require and provide statements are taken care of way before window load. When you inject them through the HTML Service, you are forcing their execution at a different stage then required, which causes everything to fail.

If you would be using a COMPILED Closure Library source, you will not have any problems with running Closure. Learn how to use the Compiler and Builder to make Closure Work properly. Also, you can use lazy loading to simulate your HTML Service.

With that, you can make javascript load dynamically onclick, onload or whatever the hell you want. This is called lazy-loading and it is used as a standard practice for all large web applications. Monitor the Network tab of Firebug when browsing through Gmail or Facebook.

Arun Nagarajan is right, jQuery is the easier solution but if you are doing something proper that requires breadth, scale and speed, jQuery is a toy for kids.