© 2013 SpringOne 2GX. All rights reserved. Do not distribute without permission.

ThymeleafImproving your Spring View Layer with Natural Templates

Emanuel Rabina - @u1traq

http://www.thymeleaf.org/

@thymeleaf

Thymeleaf

Background

Hello World!<p> </p>

www.alanwood.net/unicode/utilities_editors.html

mozillaquest.com/stories_01/Composer-01/Moz_0_8_Composer01_story_02.html

<b> bold </b>

<i> </i>italic

<blink> </blink>...

Dynamic Web• Perl• JSP• PHP• ASP• GSP• anything-that-ends-with-P

Dynamic Web• Perl• JSP• PHP• ASP• GSP• anything-that-ends-with-P

• JSF• GWT

<h:panelGrid>

...

</h:panelGrid>

The Language Barrier

Client-side languages Server-side languages

HTML

CSS

JavaScript

Java

C#Ruby

PerlGroovy

Scala

?

sans-pants.com/2010/04/27/great-pants-imagery/

HTML

PHP

JSP

ASP.NET

Ruby on Rails

GSP

CGI

ScalaTemplates

CFM

www.flickr.com/photos/wgtncc/6834607270/

Enter Thymeleaf

Natural Templates

“The template can be a document as valid as the final result, the engine syntax doesn’t break the document structure.”

en.wikipedia.org/wiki/Comparison_of_web_template_engines

Natural Templates

(JSP example)

(Thymeleaf example)

Natural Templates

JSP opened w/ browser Thymeleaf opened w/ browser

<% ... %>

<?php ... ?>

<%= ... %>

<g:each...>

<c:forEach...>

@for <cfloop...>

<ui:repeat...>

#foreach

th:attr

th:attrappend

th:attrprepend

th:case

th:classappend

th:each

th:fragment

th:object

th:if

th:inline

th:unless

th:include

Natural Templates• Quick prototyping• Design in the browser• Encouraged to add text and content• No need to start an app server• It’s HTML

Extending Thymeleaf

Dialects• Prefix• Processors• Expression objects

theach, text, utext, ...#dates, #arrays, ...

public class MyDialect extends AbstractDialect implements IExpressionEnhancingDialect {

public Map<String,Object> getAdditionalExpressionObjects(...);

public String getPrefix();

public Set<IProcessor> getProcessors();

}

public class MyProcessor extends AbstractAttrProcessor {

public MyProcessor(); // Constructor

public int getPrecedence();

public ProcessorResult processAttribute( Arguments arguments, Element element, String attributeName);

}

(Custom dialect example)

Working with Spring

(Spring example)

Ecosystem

Early 2012

Extras / ‘official’

•Conditional CommentsProcessing of all the kinds of Internet Explorer conditional comments

•Spring Security 3Adds attribute processors and utility objects to use Spring Security expressions

•Tiles 2Use Apache Tiles 2 to compose your templates

•Eclipse PluginContent assist (autocomplete/suggestions) support in Eclipse

Community

•ThymolIncludes other pages referenced with th:include when viewed statically

http://sourceforge.net/u/jjbenson/wiki/thymol/

•Dandelion DataTables

http://dandelion.github.io/datatables

Ridiculously customizable tables for the display of data

•Layout Dialect

http://github.com/ultraq/thymeleaf-layout-dialect

Inheritance-based page creation, like SiteMesh or JSF + Facelets

Community

And many more:•modules for the Play Framework•a JRebel plugin option to not cache in development mode•integration with Apache Shiro•client-side form validation using your JSR-303 Bean Validation annotations•runtime optimization of JS/CSS resources•creation of arbitrary data-* attributes•Thymeleaf + Spring MVC Maven archetype•...

Who’s using Thymeleaf?

http://scienceblogs.com/thoughtfulanimal/2010/05/24/dog-personalities/

http://www.broadleafcommerce.com/

http://www.onegini.com/

http://www.ppi.de/

http://www.sahibinden.com/

http://www.trabesoluciones.com/

http://www.yobidrive.com/

How companies have used Thymeleaf• Migrate from other technologies• Take advantage of a Spring-integrated technology (thus making

use of the Spring developer community)• Improve workflow / communication• Allow front-end specialists to really hack the view

The future of Thymeleaf

? ? ?

Future plans• Attoparser• data-* attribute processors• Template fragments as variables• Template-only comments! :)• ‘TEXT’ template mode• Spring/Global formatters• De-coupling processing instructions from templates

Visit our website: http://www.thymeleaf.org/Follow us on Twitter: @thymeleaf

Talk to us on Twitter: @springcentralFind session replays on YouTube: spring.io/video

Learn More. Stay Connected.