This presentation was given at Magnolia Conference 2013 by Adam Galloway, Development Lead at NRG Edge: www.nrg-edge.com I'll cover how we are using Magnolia 5 to content manage and optimize rich JavaScript applications. Creating rich web applications with modern JavaScript frameworks adds a level of complexity to content management. We use Backbone.js to create powerful interactive web applications and Hogan.js to create dynamic reusable views within the application. Typically templates used by Backbone.js are created with placeholders for data AND content. This requires the browser to retrieve a Hogan.js template, retrieve the content, retrieve the business data and then assemble the three pieces to be shown on the page. We have implemented a novel solution that precompiles the content into the Hogan.js templates on the server-side within Magnolia. This removes the overhead of retrieving and assembling the content in the browser. I'll show how we use the javax.script.ScriptEngine to run JavaScript on the server-side within Magnolia 5 to provide Node.js like server-side JavaScript optimization. I'll also show how this can be extended to work with other JavaScript frameworks such as Handlebars and AngularJS.

1. Optimizing Content Managed
JavaScript Applications
with Magnolia

2. Hi, I am Adam Galloway
Development Lead at NRG Edge
We are from Philadelphia, PA
WE ARE A BANK TECHNOLOGY SOLUTIONS & SERVICES
COMPANY

3. Let’s talk about Hulk Hogan

4. I mean Hulk and Hogan… js

5. 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

7. 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.

8. 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

9. It turns this:
Into this:

10. 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

11. 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

12. 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

13. Sample ScriptEngine code

14. 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

15. A very simple example.ftl
Notice the Mustache and Freemarker code playing nicely
together

16. 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

17. 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

18. 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

19. Let’s see a quick demo

20. 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();

21. 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:

22. “I fear no man, no beast or evil,
brother.”
- HULK HOGAN

23. And neither should we.
ANY QUESTIONS?

24. 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/