Thymeleaf: improving your Spring view layer with natural templates

11,407 views

Published on

Speaker: Emanuel Rabina
With the disconnect between the languages of the web (HTML, CSS, Javascript) and the languages of the server (Java, Groovy, Scala, etc), many libraries and frameworks have been invented over the years to fill this void, often resulting in views filled with back-end code, views filled with specialized syntaxes, or even the invention of completely new view languages abstractions; all for the purpose of transforming our server-side ideas into HTML, and few of which actually look like the HTML that it ends up as.
Enter Thymeleaf - a templating framework that uses HTML to create good old HTML.
In this presentation, you'll be introduced to Thymeleaf, some of its features, how you can use it in your Spring web projects, the growing ecosystem being developed around it, and how it uses natural templates to keep the web designer on your team, and inside each and every one of us, happy.

Published in: Technology, Business

Thymeleaf: improving your Spring view layer with natural templates

  1. 1. Thymeleaf Improving your Spring View Layer with Natural Templates Emanuel Rabina - @u1traq © 2013 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  2. 2. Thymeleaf http://www.thymeleaf.org/ @thymeleaf
  3. 3. Background
  4. 4. <p> Hello World! </p>
  5. 5. www.alanwood.net/unicode/utilities_editors.html
  6. 6. mozillaquest.com/stories_01/Composer-01/Moz_0_8_Composer01_story_02.html
  7. 7. <b> bold </b> <i> italic </i> <blink> ... </blink>
  8. 8. Dynamic Web • Perl • JSP • PHP • ASP • GSP • anything-that-ends-with-P
  9. 9. Dynamic Web • Perl • JSF • JSP • GWT • PHP • ASP • GSP • anything-that-ends-with-P
  10. 10. <h:panelGrid> ... </h:panelGrid>
  11. 11. The Language Barrier
  12. 12. Client-side languages Server-side languages ? Java HTML C# CSS Perl JavaScript Scala Ruby Groovy
  13. 13. sans-pants.com/2010/04/27/great-pants-imagery/
  14. 14. PHP JSP ASP.NET HTML Ruby on Rails GSP CGI ScalaTemplates CFM
  15. 15. www.flickr.com/photos/wgtncc/6834607270/
  16. 16. Enter Thymeleaf
  17. 17. 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
  18. 18. Natural Templates
  19. 19. (JSP example)
  20. 20. (Thymeleaf example)
  21. 21. Natural Templates JSP opened w/ browser Thymeleaf opened w/ browser
  22. 22. <% ... %> <c:forEach...> <?php ... ?> <g:each...> <%= ... %> <ui:repeat...> @for <cfloop...> #foreach
  23. 23. th:attr th:fragment th:attrappend th:if th:attrprepend th:include th:case th:inline th:classappend th:object th:each th:unless
  24. 24. Natural Templates • Quick prototyping • Design in the browser • Encouraged to add text and content • No need to start an app server • It’s HTML
  25. 25. Extending Thymeleaf
  26. 26. Dialects • Prefix • Processors • Expression objects th each, text, utext, ... #dates, #arrays, ...
  27. 27. public class MyDialect extends AbstractDialect implements IExpressionEnhancingDialect { public Map<String,Object> getAdditionalExpressionObjects(...); public String getPrefix(); public Set<IProcessor> getProcessors(); }
  28. 28. public class MyProcessor extends AbstractAttrProcessor { public MyProcessor(); // Constructor public int getPrecedence(); public ProcessorResult processAttribute( Arguments arguments, Element element, String attributeName); }
  29. 29. (Custom dialect example)
  30. 30. Working with Spring
  31. 31. (Spring example)
  32. 32. Ecosystem
  33. 33. Early 2012
  34. 34. Extras / ‘official’ •Eclipse Plugin Content assist (autocomplete/suggestions) support in Eclipse •Tiles 2 Use Apache Tiles 2 to compose your templates •Spring Security 3 Adds attribute processors and utility objects to use Spring Security expressions •Conditional Comments Processing of all the kinds of Internet Explorer conditional comments
  35. 35. Community •Thymol Includes other pages referenced with th:include when viewed statically http://sourceforge.net/u/jjbenson/wiki/thymol/ •Dandelion DataTables Ridiculously customizable tables for the display of data http://dandelion.github.io/datatables •Layout Dialect Inheritance-based page creation, like SiteMesh or JSF + Facelets http://github.com/ultraq/thymeleaf-layout-dialect
  36. 36. 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 •...
  37. 37. Who’s using Thymeleaf? http://scienceblogs.com/thoughtfulanimal/2010/05/24/dog-personalities/
  38. 38. http://www.broadleafcommerce.com/
  39. 39. http://www.onegini.com/
  40. 40. http://www.ppi.de/
  41. 41. http://www.sahibinden.com/
  42. 42. http://www.trabesoluciones.com/
  43. 43. http://www.yobidrive.com/
  44. 44. 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
  45. 45. ??? The future of Thymeleaf
  46. 46. 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
  47. 47. Learn More. Stay Connected. Visit our website: http://www.thymeleaf.org/ Follow us on Twitter: @thymeleaf Talk to us on Twitter: @springcentral Find session replays on YouTube: spring.io/video

×