Optimizing Content Managed Rich JavaScript Apps


Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Optimizing Content Managed Rich JavaScript Apps

  1. 1. Optimizing Content Managed JavaScript Applications with Magnolia
  2. 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. 3. Let’s talk about Hulk Hogan
  4. 4. I mean Hulk and Hogan… js
  5. 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
  6. 6. 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.
  7. 7. 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
  8. 8. It turns this: Into this:
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. Sample ScriptEngine code
  13. 13. 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
  14. 14. A very simple example.ftl Notice the Mustache and Freemarker code playing nicely together
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. Let’s see a quick demo
  19. 19. 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();
  20. 20. 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:
  21. 21. “I fear no man, no beast or evil, brother.” - HULK HOGAN
  22. 22. And neither should we. ANY QUESTIONS?
  23. 23. 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/