Optimizing Content Managed JavaScript Applications with Magnolia

Hi, I am Adam GallowayDevelopment Lead at NRG Edge

We are from Philadelphia, PA

WE ARE A BANK TECHNOLOGY SOLUTIONS & SERVICES COMPANY

Let’s talk about Hulk Hogan

I mean Hulk and Hogan… js

Hogan.js

• A lightweight JavaScript Mustache templating engine (2.5K)

• Created by Twitter• No framework dependencies• Works great by itself but also

integrates easily with Backbone.js and Marionette.js

Great but…

• Template markup is stored in a string?– That seems like a pain to maintain.

• The string has to be compiled before rendering?– That seems like a performance concern.

• This is all happens in the browser before the page can load?– That seems like a bad time to slow things

down.

Hulk enters the ring

• Hulk is a node.js command line tool offered by Hogan.js

• Hulk turns Mustache markup into precompiled ready-to-use JavaScript objects

• It reads in markup from multiple text files with the .hogan file extension

• It outputs a minified .js file that can be included in your html as a regular JavaScript file

It turns this:

Into this:

It’s getting better

How this helps• We are no longer

dealing with building strings in JavaScript

• We no longer need the browser to compile anything

• It combines multiple templates into one resource

How this hurts• This is a command

line tool• It needs node.js to run• It becomes another

step in the build process

• It doesn’t seem very friendly to content management

How to make it work for us

• Let’s compile the templates on the server side in Java when we can’t use node.js

• Let’s do this in a servlet so we don’t have to do this only at build time

• Let’s content manage the markup used in the templates

javax.script.ScriptEngine

• Java 6 includes the ScriptEngine API that allows running ECMAScript from Java

• The ScriptEngine allows passing Java variables to and from the JavaScript being executed

• We can use ScriptEngine in a Servlet and we can pass it InputStreams and Strings to be executed*

*Thanks to a great blog post by Christian Grobmeier for precompiling Hogan.js in a Struts 2 action

Sample ScriptEngine code

Magnolia meets Hogan

• We can easily create Magnolia templates that contain Mustache markup ready to be used as a Hogan.js templates

• We can easily query mgnl:components and mgnl:areas and then compile them into one resource (like Hulk does with .hogan files)

• We can recompile whenever content changes and we can cache the results easily

A very simple example.ftl

Notice the Mustache and Freemarker code playing nicely together

Now we are content managed!

• We are now content managing the Hogan templates

• We are now precompiling the Hogan templates

• But wait there’s more!• In this servlet we can also

– clean the html in the Hogan markup before we compile it

– use YUI Compressor to compress the JavaScript produced by compiling

– cache the cleaned compressed compiled result– gzip the response

Ok, now I see a bunch of curly brackets

• Using this .ftl in Magnolia Author you will see a lot of Mustache placeholders in the editor

• Can’t we just replace the placeholders with sample data?

• Yes, and because each view is mocked up on the server side we can create a Java filter to use Mustache to replace the placeholders with sample values

Steps to put it all together

1. Take an existing .hogan template file that you would use with hulk and add it to Magnolia as an .ftl template

2. Add Freemarker code and Magnolia components needed to manage any content

3. Add a filter to show sample data in Magnolia Author

4. Add a servlet to query the content from Magnolia, precompile it using ScriptEngine and optimize it using YUI Compressor

5. Include the JavaScript returned by the servlet in our web application

6. Use the Hogan template objects just like any other Hogan template

Let’s see a quick demo

What about other frameworks - Handlebars

• Handlebars is another commonly used Mustache templating engine

• Thankfully nearly all of this code can be reused with Handlebars

• Simply change the libraries used in the precompile servlet and then change the compilation code from:– Hogan.compile(templateString, {asString: true});

to:– Handlebars.precompile(templateString).toString();

What about other frameworks – Angular.js

• Angular.js actively renders templates instead of compiling and merging them with data at render time

• We can still generate a single JavaScript file containing minified content managed templates

• The code generated by the servlet would be similar to this:

“I fear no man, no beast or evil, brother.”

- HULK HOGAN

And neither should we.

ANY QUESTIONS?

Sources

• Rocky statue image from Wikimedia - creative commons attribution– http://wikimediafoundation.org/wiki/File:9.26.06RockyStatueByLuigiNovi1.jpg

• Hulk Hogan image from flickr - creative commons attribution– http://m.flickr.com/#/photos/hodgers/3415258483/sizes/l/

• Example code using ScriptEngine from Christian Grobmeier’s blog– http://www.grobmeier.de/precompiling-hogan-jsmustache-templates-on-a-java-server-with-

struts-2-16012012.html

• Jsfiddle for the example Hogan.js template – http://jsfiddle.net/qDBXF/