Using Google Closure Templates with jQuery

Question

We are starting to create an application using JavaScript and HTML5 which will use rest API to access server resources taking the advantage of jQuery awesomeness and easiness which our dev team is already comfortable with. This application is going to be made multilingual. We had decided later that we will write our DOM using JavaScript which will allow us the flexibility to use our UI bits for integration with our other applications and will create our own widgets using jQuery UI widgets. Then by just adding a script tag referencing JavaScript file in a relevant page of our other application, we will have most of our integration for that particular feature done.

Because it takes lot of amount of coding for creating DOM using JavaScript, we started looking in search of tools which will help us easily convert HTML to JavaScript for creation of UI and hence Google Closure Templates came in.

At this time what I thought of was, using Google closure for writing the UI DOM bit as it can quickly give me JavaScript for my DOM and then for other JavaScript (i.e. for server side communication and for other UI logic like changing of UI once got response from the server and x should change to y on click of z kind of things) which needs to be handwritten, I should use jQuery which is easy to write.

But after looking at this question, I see that both are compared against each other and it left me wondering on few things.

1. If I go by what I've thought of doing then, will I be able to call the functions generated by Google Closure in my jQuery widgets to render the UI?

2. If I leave jQuery and just use Google Closure will it be enough for my requirements?

3. As I started reading Google Closure documentation, I found that it has a whole new world of it's own and learning curve is involved. How much it is? If it is not much, then our team of 5 devs will be ready to learn it.

On 2 and 3, it would be great if anyone who has already used it can provide some insight.

Note:- Just in case if it has any relevance, we are working on Microsoft .NET stack for server side.

Answer 1

Closure Library and Closure Templates do not depend on one another, so you can certainly use Closure Templates with jQuery without pulling in the Closure Library or the Closure Compiler. To use Templates with jQuery, you translate your Closure Template files (aka "Soy" files) using SoyToJsSrcCompiler.jar as described in the documentation. Then you will have one JavaScript file for each Soy file where each JavaScript file contains one function per template defined in the corresponding Soy file.

To use the generated JavaScript functions, you must also include soyutils.js, which is a set of utilities required by the generated functions. Therefore, your production system should include the following JavaScript files concatenated/minified in this order:

• soyutils.js
• JavaScript generated from Soy
• jQuery library
• Your application code, which presumably depends on both jQuery and your template functions.

Getting up to speed on Closure Templates is considerably easier than learning the Library or the Compiler, so I'm sure that your dev team can pick it up quickly. I believe the online documentation is thorough without being overwhelming, so the syntax and usage should not take long to learn.

Note that if you decide to use the Closure Library instead of jQuery at some point, you should include soyutils_usegoog.js instead of soyutils.js. Though if you decide to rewrite your application logic to depend on Closure Library instead of jQuery after you have a substantial amount of code, this small change will likely be the least of your concerns! That is, I'm sure you could ultimately write your entire application using Google Closure, but migrating from one JavaScript library to another for a large application will likely require so many code changes that you may be too intimidated to take on the migration.