© 2015 Spring, by Pivotal JSTL to Thymeleaf: Transitioning Your Template Phil Dutson, Front-end/Mobile Solution Architect, ICON Health & Fitness @dutsonpa +PhilDutson

2 2 Agenda §  What is Thymeleaf §  JSTL to Thymeleaf §  Other Template Solutions

3 3 What is Thymeleaf? §  Thymeleaf is an XML / XHTML / HTML5 template engine §  A substitute for JSP files (when used with Spring MVC) §  “Tagless” syntax that uses attributes for processing §  Extensible §  Stable and production ready §  Maintained by core developers as well as contributors

4 4 Where Thymeleaf Fits: §  Simple MVC overview: Model Data View Presentation Controller Logic

5 5 Where Thymeleaf Fits: §  Simple MVC overview: Model Data View Presentation Controller Logic

6 6 Thymeleaf Rendering: §  Sample HTML without Thymeleaf:

7 7 Thymeleaf Rendering: §  Sample HTML with Thymeleaf

8 8 Thymeleaf Rendering: §  Dynamic output with sample HTML (Thymeleaf included)

9 9 Learning from the Example §  Thymeleaf takes static HTML and gives you dynamic powers §  You can still create pages with a static fallback value that is very useful for working with 3rd parties and others §  Thymeleaf isn’t all that different from working with similar template engines that use data-attributes to manipulate data §  When combined with SpringMVC (or a similar) you can add data and put logic where it should be, rather than on the page and rendered at runtime §  Take the 5-minute Getting Started Guide at http://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

10 10 JSTL to Thymeleaf TL;DR edition

11 11 JSTL to Thymeleaf – c:out §  JSTL: §  Thymeleaf:

12 12 JSTL to Thymeleaf – c:out escapeXml=“false” §  JSTL: §  Thymeleaf:

13 13 JSTL to Thymeleaf – c:out (inline) §  JSTL: §  Thymeleaf:

14 14 JSTL to Thymeleaf – Comments §  JSTL: §  Thymeleaf:

15 15 JSTL to Thymeleaf – c:forEach §  JSTL: §  Thymeleaf:

16 16 JSTL to Thymeleaf – fn:replace §  JSTL: §  Thymeleaf:

17 17 JSTL to Thymeleaf – c:if §  JSTL: §  Thymeleaf:

18 18 JSTL to Thymeleaf – JavaScript §  JSTL: §  Thymeleaf:

19 19 JSTL to Thymeleaf – JavaScript Continued To pass a string inside of a JavaScript function you need to use " so that when the page renders the quotes will be in the correct place:

20 20 JSTL to Thymeleaf – Template/Include/Import §  JSTL: §  Tiles §  Sitemesh §  JavaServer Faces §  jsp:include §  jsp:import §  Thymeleaf: §  th:block •  layout:decorator •  layout:fragment •  th:include and th:replace

21 21 JSTL to Thymeleaf – Template/Include/Import (continued) fullPageLayout product layout:fragment

22 22 JSTL to Thymeleaf – Template/Include/Import (continued)

23 23 Other Template Solutions Buzz words, JavaScript, and Components!

24 24 Other Template Solutions: Handlebars.js §  Rather famous for the inclusion with Ember.js, Handlebars is a JavaScript solution that can be picked up and plugged into almost any project. §  Uses double {{ }} for data binding and manipulation §  Allows for comments that will be stripped out of final render §  Is a robust system for managing data in Single Page Applications or for more mundane uses §  http://handlebarsjs.com/

25 25 Other Template Solutions: AngularJS §  Of the JS framework buzzwords, Angular is probably the most popular §  Backed by Google §  Dynamic HTML web app sugar §  Uses the familiar {{ }} for data binding with data-attributes (ex: ng- model) §  Also uses data-attributes for logic processing (ng-repeat, ng-submit, etc) §  Well documented with a very active community §  https://angularjs.org/

26 26 Other Template Solutions: Jade §  Jade is a template engine that is used with Nodejs §  It feels comfortable to Ruby users who don’t want to waste their time working with extra characters to create web pages §  It uses a tabbed approach to working with creating elements and placing data into them §  It supports working with filters to include formats such as Markdown to allow quick deployment of assets §  Syntactic sugar abounds for those who enjoy working with Mixins, inheritance, and conditionals §  http://jade-lang.com/

27 27 Other Template Solutions: Polymer §  Web Components allow you to package the look, feel, and logic of an element and re-use it in different applications §  Modular §  Component library that is community driven and growing §  Can be used on any platform, on any stack, and viewed on any browser §  Similar to AngularJS, and yet different §  https://www.polymer-project.org

28 28 Thank You! Questions, comments, concerns: @dutsonpa +Phil Dutson https://dutsonpa.com/ Visit http://www.altrarunning.com/ to see an eCommerce site built with Thymeleaf on Broadleaf Commerce