Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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 :)

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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]

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Spring I/O 2016 #springio16 #thymeleaf | @danfenz HTML5 allows custom attributes
  • Apricot
  • Apricot
browser display equivalent

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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}]].

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Spring I/O 2016 #springio16 #thymeleaf | @danfenz Fragments with parameters

...

...
...
... fragment can take parameters call fragment as if it were a function

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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
Goodbye Hassle!
# --------------------------------------------------------- %OUTPUT
Hello, Thymeleaf!

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Whatever valid template!

Slide 25

Slide 25 text

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!

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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