Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Spring I/O 2012: Natural Templating in Spring MVC with Thymeleaf


Published on

Introduction to the Thymeleaf java XML/XHTML/HTML5 template engine by José Miguel Samper and Daniel Fernández at Spring I/O 2012 Madrid, Feb 17th 2012.

Published in: Technology, Business
  • Login to see the comments

Spring I/O 2012: Natural Templating in Spring MVC with Thymeleaf

  1. 1. Who are these guys?José Miguel Samper Thymeleaf active contributor (since the beginning!) OSS author: osSeo, porQual, YAV TagsDaniel Fernández Thymeleaf author & project lead Also jasypt, op4j, javatuples, javaRuntype, javagalician
  2. 2. AGENDA1. Introducing Thymeleaf2. Natural templating3. Lets write templates!4. Present + future
  3. 3. Introducing Thymeleaf1. Introducing Thymeleaf2. Natural templating3. Lets write templates!4. Present + future
  4. 4. The Project· Its a Java Template Engine· Can be used as view layer in Spring MVC· First stable release: July 2011· Currently: 2.0.x· Elegant, configurable, extensible· 21st-century feature set· FUN TO USE!
  5. 5. A template engine? Whats that? (I)· Not a Web Framework· Usually a part of them · Many web frameworks have their own · Takes care of the view layer · Template + Data = Document ${} → John Apricot
  6. 6. Template engines in Spring MVC (II)· Abstraction: · ViewResolver, View· Default: JSP + JSTL + Spring taglibs· Other integrations: · Apache Velocity · FreeMarker · Apache Tiles, XSTL, JasperReports, ...
  7. 7. How does it look like?
  8. 8. The (main) features· Java, DOM-based· Online (Web) or Offline (email, XML data...)· Produces XML, XHTML or HTML5· Expression eval, i18n, URL rewriting...· Full Spring MVC integration · Spring EL, form binding, i18n...· Configurable and extensible· Static prototyping abilities
  9. 9. Some features are special (I)· DOM-based: Especially made for the web · Web UIs are represented as DOM @ browsers · DOM allows powerful processing of documents · Thymeleafs DOM means processing power · Better than sequential text processing
  10. 10. Some features are special (II)· Configurability & Extensibility · Dialects • From "create your own processor libraries"... • ... to "create your own template engine" · Resolvers ("finders"): templates, messages... · Cache strategies · Even "Template Modes" • Decide what you want to call "a template" • If its DOM-able, its processable.
  11. 11. Some features are special (III)· Static prototypes · Static prototyping is not your enemy anymore · UI usually starts with static prototypes · Prototype-to-working-UI usually hard path · A new approach: NATURAL TEMPLATING!
  12. 12. Natural Templating1. Introducing Thymeleaf2. Natural templating3. Lets write templates!4. Present + future
  13. 13. Natural what?· From Wikipedia: Template Engine (web)“Natural Templates = the template can be a document as valid as the final result, the engine syntax doesnt break the documents structure”
  14. 14. How do we evaluate it?· “valid document, dont break structure”· Templates should be statically displayable· Static = Open in browser, no web server· Templates should work as prototypes
  15. 15. How can that be done?· Take profit of browsers display behaviour· Use custom attribs, browsers ignore them <div exec="doit()">...</div>· No expressions inside tag bodies <div exec="substitute_body(hello!)"> Some nice prototyping text... </div>
  16. 16. Can JSP do it?
  17. 17. Can JSP do it? NO :-(
  18. 18. Can JSP+JSTL do it?
  19. 19. Can JSP+JSTL do it? NO :-|
  20. 20. Can Velocity do it?
  21. 21. Can Velocity do it? NO :o(
  22. 22. Can FreeMarker do it?
  23. 23. Can FreeMarker do it? NO :-[
  24. 24. And... can Thymeleaf do it?
  25. 25. And... can Thymeleaf do it? YES! ;-)
  26. 26. Just how bad is not having this? (I)thvsjsp (example app): JSP on web server
  27. 27. Just how bad is not having this? (II)thvsjsp: Thymeleaf on web server
  28. 28. Just how bad is not having this? (III)thvsjsp: JSP statically displayed
  29. 29. Just how bad is not having this? (IV)thvsjsp: Thymeleaf statically displayed
  30. 30. Lets write templates!1. Introducing Thymeleaf2. Natural templating3. Lets write templates!4. Present + future
  31. 31. Writing texts· th:text HTML-escaped text (default)· th:utext unescaped text
  32. 32. Formatting#dates, #calendars, #numbers, #strings...
  33. 33. URLs· @{...} syntax ...produces...· Automatic URL-rewriting is performed
  34. 34. Iteration· th:each ...produces...
  35. 35. Iteration status· th:each...produces...
  36. 36. Conditionals (I)· th:if· th:unless
  37. 37. Conditionals (II)· th:switch / th:case
  38. 38. Forms and bean-binding (I)· th:object, th:field
  39. 39. Forms and bean-binding (II)· Forms integrate fully with Spring · th:field acts exactly as Spring taglib tags • Slightly different behaviour depending on host tag · PropertyEditors work OK · Spring EL expressions in th:field work OK · Validations work OK (th:errors)
  40. 40. Page composition· Declare fragment with th:fragment· Reuse th:include· ...and reuse again...
  41. 41. Inlining· Text, Javascript and Dart inlining· th:inline="text"|"javascript"|"dart"
  42. 42. Present + Future1. Introducing Thymeleaf2. Natural templating3. Lets write templates!4. Present + future
  43. 43. Does anybody use this thing?· OSS = # of users difficult to know· Jul 2011 - Jan 2012: 2,528 downloads · Strongly increasing rate · Top country China (37%) · With Spring integrations @maven: 89%
  44. 44. Thymeleaf in production· · Online classifieds & ecommerce, Turkey · [] rank 625th worldwide, 9th Turkey · Search engine frontend • View layer: Thymeleaf 2.0 • Size: 20 servers • 1 Billion hits/month ~385/sec · Helped in boosting Thymeleaf performance
  45. 45. The Future· Detached template modes – One file for HTML, another for instructions· More performance fine-tuning· More docs, tutorials, example apps...· Maven archetype(s)· ...
  46. 46. Where to go, what to see...· Documentation, articles, code examples· User forum· Twitter @thymeleaf