Your SlideShare is downloading. ×
Thymeleaf, will it blend?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Thymeleaf, will it blend?

5,537

Published on

Presentation for fontend developers about the (backend) templating engine Thymeleaf. Frontend and backend developers can modify the same HTML templates and both see a complete page in the …

Presentation for fontend developers about the (backend) templating engine Thymeleaf. Frontend and backend developers can modify the same HTML templates and both see a complete page in the browser.
The Pecha Kucha format required 20 slides which are only presented for 20 seconds on the screen.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,537
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Will it blend?Jasha Joachimsthal@jashaj1
  • 2. Thymeleaf, will it blend? 18-04-2013Background• 1995: My <blink>first</blink> html page• 1998: CSS & Java• 1999: PHP• 2003:ASP• 2006: XSLT• 2009: JSP• 2010: Spring MVC & Freemarker• 2012: Ruby,Thymeleafhttp://www.phdcomics.com/comics/archive/phd012113s.gif2
  • 3. Thymeleaf, will it blend? 18-04-2013Thymeleaf• Java library• XML/XHTML/HTML5 template engine• support for static and dynamic content• http://www.thymeleaf.org3
  • 4. Thymeleaf, will it blend? 18-04-2013Project timeline• Wireframes• Design in Photoshop• Clickable with static HTML• Converted into dynamic pages with JSP,ASP, PHP...4
  • 5. Thymeleaf, will it blend? 18-04-2013Copied from design• CSS• Javascripts• static images5
  • 6. Thymeleaf, will it blend? 18-04-2013The big challenge• HTML is divided over several templates• Logic is added to show/hide elements• Links are different• Labels are translated• CSS/Javascript may be minified during build6
  • 7. Thymeleaf, will it blend? 18-04-2013Preview JSP in browser?7
  • 8. Thymeleaf, will it blend? 18-04-2013Preview Thymeleaf!8
  • 9. Thymeleaf, will it blend? 18-04-2013Preview Thymeleaf!9
  • 10. Thymeleaf, will it blend? 18-04-2013JSP tagsoup<c:if test="${foo}"><c:set var="cssClass"value=" class=‘myclass’"/></c:if><div${cssClass}><p>some other stuff...</p></div>10
  • 11. Thymeleaf, will it blend? 18-04-2013Thymeleaf template<div th:class=”${foo} ? ‘myclass’”><p>some other stuff...</p></div>11
  • 12. Thymeleaf, will it blend? 18-04-2013Paths and labels change<c:url=”/corporate/news?page=${nextPage}” var=”link”/><fmt:message=”more.news”var=”linkText”/><a href=”${link}”>${linkText}</a>12
  • 13. Thymeleaf, will it blend? 18-04-2013Paths and labels<a href=”news-list.htmlth:href=”@{/corporate/news(page=${nextPage})}”th:text=”#{more.news}”>More news</a>13
  • 14. Thymeleaf, will it blend? 18-04-2013Thymol• Javascript for the static templates• Resolves fragments• Parses simple if statements• http://sourceforge.net/u/jjbenson/wiki/thymol/14
  • 15. Thymeleaf, will it blend? 18-04-2013Fragments• Frequently used parts like header, footer• Define fragment once• Call fragment from every page• Can be rendered by Thymeleaf (server side)and Thymol (client side)15
  • 16. Thymeleaf, will it blend? 18-04-2013Fragment: footer<footer th:fragment=”footer”><ul><li>&copy; 2013 My Company</li><li><a href=”text.html”th:href=”@{/privacy}”>Privacy</a></ul></footer><footer th:include=”fragments ::footer”/>16
  • 17. Thymeleaf, will it blend? 18-04-2013Caveats of Thymol• Cannot handle complex if statements• Is the DOM ready?• Do all the elements have a layout?• Links must have a text17
  • 18. Thymeleaf, will it blend? 18-04-2013Break the preview• Hide elements behind complex ifstatements without alternative• Forget to add static labels, links, classes etc.• Create new file without including Thymol18
  • 19. Thymeleaf, will it blend? 18-04-2013Break the server side• Create valid HTML that is not valid XML<input name=”foo” required>• Forget to update the HTML inside thecomplex if statement• Forget to update dynamic paths to CSS,Javascripts and images19
  • 20. Thymeleaf, will it blend? 18-04-2013Will it blend?• It depends on the...• team• complexity of the application• need of having an up to date previewafter initial design20

×