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 generating the HTML on the client 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.
Moving HTML Generation to the Server
The Post Streams on NixMash Spring are 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 client Thymeleaf above, but which produces the same output in the 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 test for 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.