@danfenz #Devoxx #thymeleaf Bridging the gap between designers and devs with server-side templates Daniel Fernández http://www.thymeleaf.org | @thymeleaf

@danfenz #Devoxx #thymeleaf •A template engine for Java •Open Source — Apache 2.0 License •First version 2011 — Currently 2.1.4, 3.0.0.BETA01 •It processes HTML, XML, JavaScript, CSS, text •Usually view layer in SpringMVC or MVC1.0 apps What is thymeleaf?

@danfenz #Devoxx #thymeleaf Name Price Oranges 0.99 What does it look like?

@danfenz #Devoxx #thymeleaf The design-development roundtrip issue

@danfenz #Devoxx #thymeleaf Designers do nice HTML designs…

@danfenz #Devoxx #thymeleaf …which then devs turn into code

@danfenz #Devoxx #thymeleaf “My HTML is not HTML anymore, but that's OK because the UI design phase is already finished.” Web developers, lying to themselves — since epoch.

@danfenz #Devoxx #thymeleaf •Most times developers will do those…
 …restarting the app for each shade of blue •Yes, JRebel exists… but a running server still needed •More importantly: working Java code still needed •There must be a better way So, what about style changes?

@danfenz #Devoxx #thymeleaf “Natural Templates: templates can be documents as valid as the final result, the engine syntax doesn't break the document structure.” “Comparison of web template engines” [Wikipedia]

@danfenz #Devoxx #thymeleaf •Use non-standard attributes •Browsers ignore them •And they don't have influence on the DOM! The trick

• Apricot

@danfenz #Devoxx #thymeleaf HTML5 allows custom attributes

• Apricot

• Apricot

browser display equivalent

@danfenz #Devoxx #thymeleaf Now we can prototype! browser display equivalent output of running webapp

@danfenz #Devoxx #thymeleaf •No need for double attributes: src + th:src, etc. •No need for prototyping text •Expression can be inlined Yet prototyping is very optional Welcome to our e-shop, [[${session.user.name}]].

@danfenz #Devoxx #thymeleaf •Write natural template prototypes for some pages •e.g. those that are most representative •Enough to conform a design agreement •Best: have the right tool to do what you please Virtue is in the middle (usually)

@danfenz #Devoxx #thymeleaf More cool features

@danfenz #Devoxx #thymeleaf Page composition / layout ... ... also th:include, th:replace somewhere in our footer.html

@danfenz #Devoxx #thymeleaf Markup selectors ... ... our banner server returns plain HTML (no th:fragment)

@danfenz #Devoxx #thymeleaf Parameterizable fragments ... ... call fragment as if it were a function fragment can take parameters

@danfenz #Devoxx #thymeleaf •Hierarchical layouts with the Layout Dialect •Apache Tiles 2 integration •thymol.js: JS library for static fragment insertion More on composition

@danfenz #Devoxx #thymeleaf Text processing. And JS. And CSS. Dear [(${customer.name})], This is the list of our products: [# th:each="prod : ${products}"] - [(${prod.name})]. Price: [(${prod.price})] EUR/kg [/] Thanks, The Thymeleaf Shop new in Thymeleaf 3.0

@danfenz #Devoxx #thymeleaf JavaScript natural templates var greeter = function() { var username = /*[[${session.user.name}]]*/ 'John Apricot'; alert('Hello ' + username); }; both and .js files var greeter = function() { var username = 'Martin Grapefruit'; alert('Hello ' + username); }; processing result

@danfenz #Devoxx #thymeleaf Decoupled templates(*) Green Plum Round-oval shape and smooth-textured, pale green flesh new in Thymeleaf 3.0 template logic, separate file (*) yet to be implemented as of 3.0.0.BETA01

@danfenz #Devoxx #thymeleaf •Offline template processing (no Servlet API) •Full SpringMVC integration •Extensibility: dialects •Testability: automated testing for templates •Documentation •Tooling So many features, no time :(

@danfenz #Devoxx #thymeleaf ? http://www.thymeleaf.org | @thymeleaf

@danfenz #Devoxx #thymeleaf Thanks!