Download to read offline
Uploaded byMagnolia
Optimizing Content Managed Rich JavaScript Apps
The document discusses optimizing JavaScript applications using Hogan.js, a lightweight mustache templating engine, by integrating it with Magnolia for better content management. It highlights the benefits of using a command line tool called Hulk for precompiling templates into ready-to-use JavaScript objects and outlines an approach to manage templates on the server side using Java. Additionally, it touches on using the ScriptEngine API for executing ECMAScript from Java and provides a step-by-step guide for setting up the integration in a web application.
Optimizing Content Managed Rich JavaScript Apps
- 1. Optimizing Content Managed JavaScriptApplications with Magnolia
- 2. Hi, I amAdam Galloway Development Lead at NRG Edge We are from Philadelphia, PA WE ARE A BANK TECHNOLOGY SOLUTIONS & SERVICES COMPANY
- 3. Let’s talk aboutHulk Hogan
- 4. I mean Hulkand Hogan… js
- 5. Hogan.js • A lightweightJavaScript 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… • Templatemarkup 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 thering • 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: Intothis:
- 10. It’s getting better Howthis 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 makeit 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 6includes 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.
- 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 simpleexample.ftl Notice the Mustache and Freemarker code playing nicely together
- 16. Now we arecontent 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 Isee 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 putit 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 aquick demo
- 20. What about otherframeworks - 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 otherframeworks – 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 noman, no beast or evil, brother.” - HULK HOGAN
- 23. And neither shouldwe. ANY QUESTIONS?
- 24. Sources • Rocky statueimage 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/