Bringing new life to the view layer of Spring web apps with Thymeleaf Daniel Fernández @danfenz

Spring I/O 2016 #springio16 #thymeleaf | @danfenz What is Thymeleaf? • A server-side template engine for Java ‣ Open Source — Apache 2.0 License ‣ First version 2011 — Currently 3.0.0 May 2016! ‣ 75,000+ downloads (core) April 2016 • Processes HTML, XML, JavaScript, CSS, text • View layer in Spring MVC apps ‣ Also MVC 1.0, vert.x, ratpack, Spring Reactive

Spring I/O 2016 #springio16 #thymeleaf | @danfenz What does it look like? Name Price Oranges 0.99

Spring I/O 2016 #springio16 #thymeleaf | @danfenz The design-development roundtrip issue

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Designers(?) create HTML…

Spring I/O 2016 #springio16 #thymeleaf | @danfenz …which devs turn into code

Spring I/O 2016 #springio16 #thymeleaf | @danfenz “My HTML is not HTML anymore, but that's OK because the UI design phase is already finished.” err… nope :)

Spring I/O 2016 #springio16 #thymeleaf | @danfenz So what about style changes? • Most times developers will do those… …restarting the application 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

Spring I/O 2016 #springio16 #thymeleaf | @danfenz “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]

Spring I/O 2016 #springio16 #thymeleaf | @danfenz The trick • Use non-standard attributes • Browsers ignore them • And they don't have influence on the DOM!

• Apricot

Spring I/O 2016 #springio16 #thymeleaf | @danfenz HTML5 allows custom attributes

• Apricot

• Apricot

browser display equivalent

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Now we can prototype! browser display equivalent output of running webapp

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Yet prototyping is very optional • No need for double attributes, just a tool: src + th:src, href + th:href... • Virtue is in the middle (usually) ‣ Natural templates for some design-representative pages ‣ Most compact possible code for the rest of them Welcome to our e-shop, [[${session.user.name}]].

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Some more cool features

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Page composition / layout ... ... somewhere in our footer.html also th:replace

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Markup selectors ... ... our banner server returns plain HTML (no th:fragment)

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Fragments with parameters ... ... fragment can take parameters call fragment as if it were a function

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Extending Thymeleaf • Dialects: add attributes, resolvers, utilities… • Not even the Standard Dialect (th:*) required • Can be a template engine framework

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Testing the view layer • Fully automated — tests are mere text files %TEMPLATE_MODE HTML # --------------------------------------------------------- %CONTEXT myvar = 'Thymeleaf' # --------------------------------------------------------- %INPUT # --------------------------------------------------------- %OUTPUT

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Thymeleaf 3.0

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Thymeleaf 3.0 in space and time • Dev of the 3.0 branch started July 2014 • Almost complete rewrite of the engine • 63K+ lines of code 85% new • 77K+ lines of test 40% new • 220 litres of coffee 100% arabica

Spring I/O 2016 #springio16 #thymeleaf | @danfenz A new architecture

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Improved performance • Rendering time — Memory footprint — Latency 2.1.4 3.0.0

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Full HTML5 support • New parsing system • No longer XML-based • Created from scratch with Thymeleaf in mind

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Improved inlining • Output values without a supporting tag ‣ Already existed th:inline="text" Thymeleaf 2.1 • Now a 1st-class citizen, no th:inline needed ‣ In fact, better remove them

This product is called [[${product.name}]] and it's great!

Spring I/O 2016 #springio16 #thymeleaf | @danfenz 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

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

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Fragment expressions • Generalised syntax of th:insert, th:replace • Can be used elsewhere… even as parameters! Awesome - Main

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Decoupled templates Green Plum Round-oval shape and smooth-textured, pale green flesh fruits.html fruits.th.xml

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Reactive friendliness • Server-side rendering in reactive frameworks ‣ Usually unoptimised: Memory, Latency, Scalability • Hybrid rendering starting to be a thing ‣ Rendering being (partially?) pushed back to the server • Thymeleaf 3.0 ‣ Full independence from the Servlet API for web apps ‣ Three reactive-friendly operation modes

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Reactive-friendly operation modes Publisher Data Iterable CONTEXT "\n\n..." String Publisher OUTPUT CHANNEL Publisher Data Iterable CONTEXT Publisher OUTPUT CHANNEL Publisher CONTEXT Publisher OUTPUT CHANNEL 1 DATA-DRIVEN BUFFERED NORMAL

Spring I/O 2016 #springio16 #thymeleaf | @danfenz ? http://www.thymeleaf.org | @thymeleaf

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Thanks! http://www.thymeleaf.org | @thymeleaf