Avoiding Dynamic Templating for Performance Gains

Subtheme: A Side-by-side Thymeleaf / Freemarker Comparison

On NixMash Spring we created¬†a post list broken out alphabetically by first letter into groups. Here’s what it looks like. We call it Posts A-to-Z!

There’s logic in generating the Alphabetic Navigation Link and Grouped Post Collections, but those collections are cached with Spring Cache. The performance hit was in dynamically generating the HTML with Thymeleaf. It’s not Thymeleaf’s fault, but as the size of the list grows it took longer and longer for the page to load. Here’s that Thymeleaf code.

Pre-generating the HTML For Static Loading

The Post Streams on NixMash Spring are dynamically generated and formatted in HTML on the server with FreeMarker and delivered with Ajax. We’ll take a similar approach with the Posts A-to-Z page, but instead of deliver it with Ajax we’re going to write it out to an INCLUDE file. The final webpage where before we saw the Thymeleaf now looks like this.

The FreeMarker Template

Below is the FreeMarker template which replaces the Thymeleaf above, producing exactly the same output, but saved in an HTML Include file. Sorry there’s no side-by-side graphic to compare the two. You’ll have to download and view in Gimp or something.

The Tests

One important thing to remember in our Integration Test is to separate the Include output from development data and the H2 data used in the tests. This is where our Spring @TestPropertySource annotation comes into play.

We update our Posts A-to-Z Include File after every new post is added or updated in a Published state. Here in our AdminPostsController test we verify the existence of our updated post in the test include file.

Source Code Notes for this Post

All source code discussed in this post can be found in my NixMash Spring GitHub repo and viewed online here.