JSP is the de facto standard to generate Web pages in Java world. I have been using JSP since my first job in Canada 12 years ago. First Servlet + JSP, Structs + JSP, then JSF with JSP. Even in my other projects with SpringMVC, I also use JSPX, because I’m so familiar with it. There are several other java based html template engines, like FreeMarker, Velocity, SiteMash. However, I only used JSP in my job, so why bother to learn others? Well, I changed my mind recently, because JSP sucks when working with Bootstrap.

When I first saw Bootstrap, I was shocked. It is exactly what I have wanted for a long time. The reason I didn’t publish my blog website is mostly because I felt my graphic design was ugly. See my First Post. Now with Bootstrap, I can build a fancy website without hiring a graphic designer. I immediately downloaded it and put it into my blog application. The first step was extremely easy, no big change to my code, just add css class attributes into my JSP files, my blog pages looked much better.

Then the problem came. The dropdown menu did not work. I thought it must be something I did wrong. After googling around for a while, I saw several people reported this issue, but none of their issues matched my situation. I did exactly what Bootstrap said. I put bootstrap.js after jquery.js, downloaded the most recent version of jQuery, and copied exactly the same code as the example. But the dropdown menu still didn’t work. That drove me crazy.

Finally I did this: made a very simple html page containing just a menu bar with one dropdown, and made sure it works inside Chrome browser; then copied exactly the same code to a test JSP file, and ran it. It didn’t work. So I compared the html code generated from the server with the original html code line by line. Found it! The only difference is the script element in generated html is a closed empty tag, like <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"/>. But in original html it is <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>.

The problem was found, and solving it was easy. I put a comment line inside the script element, then the generated html will have a close script tag. And the dropdown menu works now.

It is interesting that the majority of my time is spent not on coding, but on trouble shooting, reading on-line documents, searching answers. Putting everything together and getting it to work took me lots of time.

Anyway, I was happy coding again. After I deployed my app to CloudFoundry (AppFog), I felt the website needs more polishing. So I searched the wrapbootstrap, and bought a beautiful theme for my website. This time, I was out of luck. The theme package only contains a couple of css and html files with other resource files. I can open it in browser and all mock up pages look very good. But when I tried to copy into my app, I COULD NOT GET IT RIGHT. The header layout was wrong, the picture was out of position, etc. This time it was even harder for me to pinpoint the problem, because there were so many css and html code. I spent a whole night struggling with it, and finally I said “Enough! this is ridiculous, I have to find another solution”.

I remember somebody from springsource mentioned another open source project to replace JSP. So I opened the springsource website, and found the blog Spring MVC: from JSP and Tile to Thymeleaf. Seems Thymeleaf is a pretty cool project, so let me try it.

I first read through its online documents and tutorials. The documents are excellent. So Thymeleaf is an XML/HTML template engine, just like JSP. But it uses attribute instead of element to do templating. That reminds me the JSF Facelet I used before. Facelet has to be used with JSF together, and I don’t want to touch Java EE in my own project, enough pain suffered already. I choose SpringMVC as Web application framework, and Thymeleaf works with SpringMVC very well. It provides dialect for Spring MVC, and Spring Security. I love it.

Then I followed these steps to replace jsp with Thymeleaf:

• Copy the blog theme html files into my project folder;
• Replace markup content with dynamic data from database using Thymeleaf dialects;
• Open html file directly in browser, making sure the page looks good.
• Run application in STS and navigate to the page with data, making sure it looks the same as the markup page.

The transition process was surprisingly smooth. I had almost no learning curve, just quickly searched the document to find out what attribute to use for what I wanted to do, like iteration, text output, conditional evaluation, etc. Then follow the example to add Thymeleaf attributes, no tag to add or change. I opened two browser windows, one for raw html file and the other for running web app. After every small change, I refresh both windows to see if there is any difference. The only difference I am supposed to see is the content, not the layout or graphic. Thanks to Eclipse IDE, no need to restart the server, just save the file and refresh the browser, and everything works. Amazing!

I really like the way Thymeleaf is designed, so I can keep the original graphic design while adding dynamic content. Which means Developer and Graphic Designer can work on the same set of files through the whole development without compromise. My dream comes true, I can say goodbye to JSP now.