Sunday, July 16, 2017

Running CoffeeScript and Mustache on Google Apps Script

For a very long time, I thought Google Apps Script was quite useless. Then, one day, I found it useful. It's a nice little tool that's actually more flexible than you might think. I wanted to dive into seeing if I could make CoffeeScript and a templating engine like Moustache just to see if it was possible. I realize CoffeeScript is moving out of fashion, but it's still a nice little tool for making easy to read JavaScript. So, without further ado, let's do it!

Okay, so the first thing we'll need to include is the CoffeeScript compiler. Yes, the whole. thing. It'll take a while to copy and paste it, but we need it to, well, compile CoffeeScript into regular Javascript. So grab the latest compiler and stick it into a file called CoffeeScript.gs. The filename doesn't really matter, because CoffeeScript is already wrapped in its own closure. This is important, because we don't really know the order in which gs files are loaded. But, because it's executed at load time, we don't have to worry about it. The CoffeeScript variable should be there by the time Apps Script gets around to executing the function we tell it to.

We'll do the same for Mustache. Mustache is also wrapped in its own closure, so it will be ready when we are.

Our app's architecture will look like this: we'll have a template and a generator that creates the view that Mustache will marry together and serve. We'll have to do some interesting stuff to accomplish this. 

So first off, we'll need a render function that takes the name of the page and the variables with which to render it. The page name will correspond exactly to the names of the files. So, for instance, let's say we have "index.html" and "index.coffee.html" (we need to do that because Google Apps Script only lets us make gs or html files, and we can't read gs files). The CoffeeScript in index.coffee.html will get executed with the variables and whatever it returns will get passed into the templating engine. Whatever mustache spits out will be our final page.

In order to make implicit returns in CoffeeScript actually work, we have to wrap it in a function. To do this, I just added a return do -> to the front of the script and indented the rest of the script by two spaces. That way, when it compiles, it will have return statements and will eval with a return.

After we evaluate what comes out of CoffeeScript, we then hand if off to Mustache to create the page. That's literally as easy as giving it the contents of the page and the view that the CoffeeScript created.

That's all there is to it. The next step would be to write something to route requests to your render layer, but that's how you get CoffeeScript and Mustache templating to work! Here is the script project for you to clone and play around with. Run the test method to see two different rendering outcomes. I'm actually really surprised at how easy this was and how fast it appears to be. Apps Script can really do more than it seems it can after all!

No comments:

Post a Comment