Thymeleaf, will it blend?

Apr 18, 20134 likes6,934 views

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.

Will it blend?
Jasha Joachimsthal
@jashaj
1

Thymeleaf, will it blend? 18-04-2013
Background
• 1995: My <blink>ﬁrst</blink> html page
• 1998: CSS & Java
• 1999: PHP
• 2003:ASP
• 2006: XSLT
• 2009: JSP
• 2010: Spring MVC & Freemarker
• 2012: Ruby,Thymeleaf
http://www.phdcomics.com/comics/archive/phd012113s.gif
2

Thymeleaf, will it blend? 18-04-2013
Thymeleaf
• Java library
• XML/XHTML/HTML5 template engine
• support for static and dynamic content
• http://www.thymeleaf.org
3

Thymeleaf, will it blend? 18-04-2013
Project timeline
• Wireframes
• Design in Photoshop
• Clickable with static HTML
• Converted into dynamic pages with JSP,
ASP, PHP...
4

Thymeleaf, will it blend? 18-04-2013
Copied from design
• CSS
• Javascripts
• static images
5

Thymeleaf, will it blend? 18-04-2013
The 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 miniﬁed during build
6

Thymeleaf, will it blend? 18-04-2013
Preview JSP in browser?
7

Thymeleaf, will it blend? 18-04-2013
Preview Thymeleaf!
8

Thymeleaf, will it blend? 18-04-2013
Preview Thymeleaf!
9

Thymeleaf, will it blend? 18-04-2013
JSP tagsoup
<c:if test="${foo}">
<c:set var="cssClass"
value=" class=‘myclass’"/>
</c:if>
<div${cssClass}>
<p>some other stuff...</p>
</div>
10

Thymeleaf, will it blend? 18-04-2013
Thymeleaf template
<div th:class=”${foo} ? ‘myclass’”>
<p>some other stuff...</p>
</div>
11

Thymeleaf, will it blend? 18-04-2013
Paths and labels change
<c:url=”/corporate/news?page=$
{nextPage}” var=”link”/>
<fmt:message=”more.news”
var=”linkText”/>
<a href=”${link}”>${linkText}</a>
12

Thymeleaf, will it blend? 18-04-2013
Paths and labels
<a href=”news-list.html
th:href=”@{/corporate/news(page=
${nextPage})}”
th:text=”#{more.news}”>
More news</a>
13

Thymeleaf, will it blend? 18-04-2013
Thymol
• Javascript for the static templates
• Resolves fragments
• Parses simple if statements
• http://sourceforge.net/u/jjbenson/wiki/
thymol/
14

Thymeleaf, will it blend? 18-04-2013
Fragments
• Frequently used parts like header, footer
• Deﬁne fragment once
• Call fragment from every page
• Can be rendered by Thymeleaf (server side)
and Thymol (client side)
15

Thymeleaf, will it blend? 18-04-2013
Fragment: footer
<footer th:fragment=”footer”>
<ul>
<li>© 2013 My Company</li>
<li><a href=”text.html”
th:href=”@{/privacy}”>Privacy</a>
</ul>
</footer>
<footer th:include=”fragments ::
footer”/>
16

Thymeleaf, will it blend? 18-04-2013
Caveats of Thymol
• Cannot handle complex if statements
• Is the DOM ready?
• Do all the elements have a layout?
• Links must have a text
17

Thymeleaf, will it blend? 18-04-2013
Break the preview
• Hide elements behind complex if
statements without alternative
• Forget to add static labels, links, classes etc.
• Create new ﬁle without including Thymol
18

Thymeleaf, will it blend? 18-04-2013
Break the server side
• Create valid HTML that is not valid XML
<input name=”foo” required>
• Forget to update the HTML inside the
complex if statement
• Forget to update dynamic paths to CSS,
Javascripts and images
19

Thymeleaf, will it blend? 18-04-2013
Will it blend?
• It depends on the...
• team
• complexity of the application
• need of having an up to date preview
after initial design
20

- The document discusses various Java template engines that can be used on the JVM including Thymeleaf, Mustache, Jade, and Scalate. - A benchmark project was created to test the performance of these template engines in a Spring MVC application that renders a list of presentations. - The results showed that Thymeleaf used more memory and was slower than commonly used engines like Freemarker and Velocity. Mustache performed very well. Scalate was over 100 seconds slower due to its layout mechanism.

Shootout! Template engines for the JVMJeroen Reijn

Modern Java web applications with Spring Boot and ThymeleafLAY Leangsros

Java™ in Web 2.0elliando dias

This document discusses how Java supports the creation of Web 2.0 services. It outlines technologies like SOA, web services, AJAX, and dynamic languages that are supported by the Java platform. It also discusses Java EE 6 and future trends like multi-screen applications, mixing frameworks and languages, and new APIs. The document provides links to resources for technologies like OpenESB, SailFin, GlassFish, Jersey, JavaFX, and JRuby.

Web a Quebec - JS DebuggingRami Sayar

Have you ever cried yourself to sleep unable to find the cause of a horrendous bug in your node app? Cry no more, your tears will be reshaped into blinding swords as we explore uncharted territories laced with mystical creatures. JavaScript debugging is an often avoided topic due to the uncertainty of how best to accomplish it and the lack of powerful introspective tools. This talk will explore new territory and showcase tools that help you debug complex and difficult issues in your node or frontend app. Libraries and tools such as node-inspector, Time-Travel Debugging, Visual Studio Code, vorlon.js, Vantage and memory leak catchers will be used to slay dragons. No more shall you fear building complex apps with JavaScript!

1.6 米嘉 gobuildwebLeo Zhou

The document provides an overview of the author's experience building web applications using Go. It discusses the author's background with various backend and frontend technologies. It then summarizes building web apps in Go, covering routing, handlers, middleware, models, rendering, frameworks, and packages. The author advocates composing simple packages together rather than relying on magic or large frameworks. The document also touches on developer tools for assets, hot reloading, and distribution packaging.

PHP7.1 New Features & PerformanceXinchen Hui

PHP 7.1 includes several new features and performance improvements. Some key new features are nullable types for typehints, void return types, support for iterable pseudo-types, class constant visibility modifiers, and the ability to catch multiple exception types in a single catch block. PHP 7.1 also provides over a 10% performance improvement compared to previous versions, due to enhancements like type specific opcode handlers and a new type inference system.

Best Practices for WordPress in EnterpriseTaylor Lovett

10up open sourced their WordPress Best Practices (PHP, JavaScript, tools, and workflows) in late 2014. As the Director of Web Engineering at 10up, I drove this project and am the lead contributor to the docs. These Best Practices allow developers to build sites that scale, perform, and are secure one sites receiving millions of page views per day. They also standardize development practices in such a way that facilitates team collaboration. This talk will highlight some important parts of the Best Practices and reveal some valuable tips about how we (10up) engineer some of the most complex and most viewed WordPress sites in the world.

Introduction to LaravelVin Lim

Best Practices for Building WordPress ApplicationsTaylor Lovett

This document provides best practices for WordPress applications, covering topics like caching, database reads/writes, search queries, maintainability, security, third-party code, teams, and workflows. It recommends tools and techniques to optimize performance, including using Redis for caching, Elasticsearch for complex queries, feature plugins, documentation, testing, linting, and managing dependencies with Composer.

Ch5 beeing an applicationManolis Vavalis

Best Practices for WordPressTaylor Lovett

This document provides best practices for WordPress development including caching, database reads/writes, search, browser performance, maintainability, security, third party code, and teams. It recommends using Redis for caching, understanding WP_Query parameters, writing modular feature plugins, thorough documentation, testing, sanitizing inputs, using nonces, and conducting internal code reviews.

Web development basics (Part-7)Rajat Pratap Singh

The document discusses various JavaScript concepts including ECMAScript, the difference between ES5 and ES6, web crawlers, DOM manipulation, OOPs in JavaScript, data structures like Set and Map, symbols, JavaScript engines, and recursion. ECMAScript is the standardized language specification while JavaScript is the programming language. Key differences between ES5 and ES6 include new features added in ES6 like modules and default parameters. Web crawlers systematically browse pages on the web to index content. JavaScript allows OOPs concepts like abstraction, encapsulation, inheritance and more through its prototype-based approach. Common JavaScript engines include V8, SpiderMonkey and Chakra.

Automating Your Daily Tasks with Scripting - RubyConf 2015 TaiwanAdler Hsieh

This talk aims to go through basic scripting skills in Ruby. Participants will have a better understanding in managing their daily tasks with scripting. For example, we can setup automated scripts to delete old files on a daily basis instead of doing it manually. These can be done with Bash, Perl and many other scripting languages, but among of which Ruby is better known for its readability. It is easier to write, maintain, and reuse. It saves some time on system management and allows us to put more focus on the projects.

They why behind php frameworksKirk Madera

Jekyll, static websites generatorFrancesco Napoletano

Jekyll is a simple, blog-aware static site generator written in Ruby. It allows users to write content in Markdown or HTML and generate static websites that are fast, secure, and customizable through themes and plugins. The document provides an overview of why to use Jekyll, how it is simple for site operators, developers and content creators, and includes steps to install and use Jekyll to create a basic website with pages and posts.

Introduction to LaravelEli Wheaton

Introduction to blogging with JekyllEric Lathrop

See the blog post and video here: http://ericlathrop.com/2013/05/introduction-to-blogging-with-jekyll/ Use Jekyll to generate static blogs. Static web sites don't need any special server software, or databases. They're super-fast, and Jekyll gives you complete control over the output HTML. You will learn how to: * set up a HTML layout template * write a post in Markdown * build a index page with a list of posts * set up an RSS feed * extend Jekyll with plugins * host your blog on GitHub Pages

Fighting Ruby code smellolegshpynov

This document discusses code quality tools for Ruby code and how RubyMine can help. It introduces static and runtime tools for finding code smells, metrics for measuring qualities like duplication, and testing and coverage tools. RubyMine integrates many of these tools and performs on-the-fly code inspections to help improve code quality. The document encourages attendees to try RubyMine's code quality features themselves.

Jekyll Presentation SlidesCurtis Miller

Web development basics (Part-3)Rajat Pratap Singh

This document provides an overview of CSS and JavaScript concepts. It discusses CSS transitions, transforms, grid properties, and using media queries with CSS grid. For JavaScript, it covers data types, operators, strings, arrays, objects, functions, and loops. It also provides examples of transform properties, grid column/row definitions, spanning, min-max properties, and template areas in CSS grid.

An Introduction to the Laravel Framework (AFUP Forum PHP 2014)daylerees

This document is an introduction to the Laravel PHP framework presented by Dayle Rees. It discusses Laravel's history and growth from 2011 to present, how Rees became involved as an early user and contributor, and key features of Laravel like its dependency injection container, Eloquent ORM, queues, authentication, caching and more. It also promotes resources like Laravel Forge and Homestead for getting started with Laravel development.

Modernizing WordPress Search with ElasticsearchTaylor Lovett

You Got React.js in My PHPTaylor Lovett

This document discusses building isomorphic web applications using WordPress and Node.js. It introduces NodeifyWP, a framework that allows using PHP to execute JavaScript (Node.js) on the server, enabling WordPress sites to benefit from modern front-end technologies like React.js. An example theme called Twenty Sixteen React is provided to demonstrate integrating NodeifyWP with React and Redux to create an isomorphic WordPress site.

Saving Time with WP-CLITaylor Lovett

I18nize Scala programs à la gettextNgoc Dao

This document discusses internationalizing (i18n) Scala programs using the gettext approach. It describes marking strings for translation, extracting them to template files, loading translation files, and translating at runtime. Tools are introduced for extracting strings from Scala code and templates, editing translation files, and parsing loaded files. The approach works for various Scala template engines and frameworks like Play.

Great Tools Heavily Used In Japan, You Don't Know.Junichi Ishida

The document discusses Japanese Perl developers who attended YAPC::EU 2015. It introduces many popular Perl modules created by Japanese developers, such as WebService::Simple for making web service requests, Riji for creating blogs, and GrowthForecast for visualizing metrics graphs. It encourages attendees to talk to the Japanese developers about their work or any questions. It emphasizes that Japanese developers prioritize speed and simplicity in their modules due to their culture of valuing efficiency.

Introducing thymeleafeiryu

Thymeleaf IntroductionAnthony Chen

Thymeleaf is a Java-based template engine that can operate outside of the web context. It integrates seamlessly with Spring MVC and has a rich ecosystem of add-ons. Templates are written using HTML syntax with additional XML tags for expression processing. Expressions allow accessing variables and performing common text manipulation. Helper objects provide functionality for working with dates, numbers, strings, and other objects. Templates can be extended through custom attribute processors or dialects.

More Related Content

What's hot (20)

Best Practices for WordPress in EnterpriseTaylor Lovett

Introduction to LaravelVin Lim

Best Practices for Building WordPress ApplicationsTaylor Lovett

Ch5 beeing an applicationManolis Vavalis

Best Practices for WordPressTaylor Lovett

Web development basics (Part-7)Rajat Pratap Singh

Automating Your Daily Tasks with Scripting - RubyConf 2015 TaiwanAdler Hsieh

They why behind php frameworksKirk Madera

Jekyll, static websites generatorFrancesco Napoletano

Introduction to LaravelEli Wheaton

Introduction to blogging with JekyllEric Lathrop

Fighting Ruby code smellolegshpynov

Jekyll Presentation SlidesCurtis Miller

Web development basics (Part-3)Rajat Pratap Singh

An Introduction to the Laravel Framework (AFUP Forum PHP 2014)daylerees

Modernizing WordPress Search with ElasticsearchTaylor Lovett

You Got React.js in My PHPTaylor Lovett

Saving Time with WP-CLITaylor Lovett

I18nize Scala programs à la gettextNgoc Dao

Great Tools Heavily Used In Japan, You Don't Know.Junichi Ishida

Best Practices for WordPress in EnterpriseTaylor Lovett

Introduction to LaravelVin Lim

Best Practices for Building WordPress ApplicationsTaylor Lovett

Ch5 beeing an applicationManolis Vavalis

Best Practices for WordPressTaylor Lovett

Web development basics (Part-7)Rajat Pratap Singh

Automating Your Daily Tasks with Scripting - RubyConf 2015 TaiwanAdler Hsieh

They why behind php frameworksKirk Madera

Jekyll, static websites generatorFrancesco Napoletano

Introduction to LaravelEli Wheaton

Introduction to blogging with JekyllEric Lathrop

Fighting Ruby code smellolegshpynov

Jekyll Presentation SlidesCurtis Miller

Web development basics (Part-3)Rajat Pratap Singh

An Introduction to the Laravel Framework (AFUP Forum PHP 2014)daylerees

Modernizing WordPress Search with ElasticsearchTaylor Lovett

You Got React.js in My PHPTaylor Lovett

Saving Time with WP-CLITaylor Lovett

I18nize Scala programs à la gettextNgoc Dao

Great Tools Heavily Used In Japan, You Don't Know.Junichi Ishida

Viewers also liked (20)

Introducing thymeleafeiryu

Thymeleaf IntroductionAnthony Chen

Broadleaf Presents ThymeleafBroadleaf Commerce

Introduction to thymeleafNexThoughts Technologies

Spring Framework - MVCDzmitry Naskou

This document provides an overview of Spring MVC, the model-view-controller framework for building web applications in Spring. It discusses Spring MVC's request processing workflow including the front controller and application context. It also covers controllers, mapping requests, returning views and data representation. Key topics include RESTful design, annotations like @RequestMapping and return types, and view resolvers for resolving JSP and other view technologies.

Thymeleafのすすめeiryu

Spring User Group Thymeleaf 08-21-2013Justin Munn

DSpace UI Prototype Challenge: Spring Boot + ThymeleafTim Donohue

Introduction to jQueryCollaboration Technologies

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

Introduction to spring bootSantosh Kumar Kar

This document provides an overview of developing a web application using Spring Boot that connects to a MySQL database. It discusses setting up the development environment, the benefits of Spring Boot, basic project structure, integrating Spring MVC and JPA/Hibernate for database access. Code examples and links are provided to help get started with a Spring Boot application that reads from a MySQL database and displays the employee data on a web page.

Spring BootPei-Tang Huang

Spring Boot is a framework for creating stand-alone, production-grade Spring based applications that can be "just run". It takes an opinionated view of the Spring platform and third-party libraries so that new and existing Spring developers can quickly get started with minimal configuration. Spring Boot aims to get developers up and running as quickly as possible with features like embedded HTTP servers, automatic configuration, and opinions on structure and dependencies.

Introduction to JPA FrameworkCollaboration Technologies

Java Persistence API is a collection of classes and methods to persistently store the vast amounts of data into a database which is provided by the Oracle Corporation. Generally, Java developers use lots of code, or use the proprietary framework to interact with the database, whereas using JPA, the burden of interacting with the database reduces significantly. It forms a bridge between object models (Java program) and relational models (database program).

Introduction to Spring Boot!Jakub Kubrynski

Spring Boot is a framework that makes it easy to create stand-alone, production-grade Spring based Applications that can be "just run". It takes an opinionated view of the Spring platform and third-party libraries so that new and existing Spring developers can quickly get started with minimal configuration. Key features include automatic configuration of Spring, embedded HTTP servers, starters for common dependencies, and monitoring endpoints.

OAuth2 and Spring SecurityOrest Ivasiv

The document discusses OAuth2 and Spring Security. It provides an overview of OAuth2 concepts including the four main roles (resource owner, resource server, client, and authorization server), four common grant types (authorization code, implicit, resource owner password credentials, and client credentials), and how to implement OAuth2 flows in Spring Security. Sample OAuth2 applications using Spring Security are also mentioned.

REST with Spring Boot #jqfkToshiaki Maki

Spring Boot TutorialNaphachara Rattanawilai

Spring Boot is a framework for creating stand-alone, production-grade Spring based Applications that can be "just run". It provides starters for auto-configuration of common Spring and third-party libraries providing features like Thymeleaf, Spring Data JPA, Spring Security, and testing. It aims to remove boilerplate configuration and promote "convention over configuration" for quick development. The document then covers how to run a basic Spring Boot application, use Rest Controllers, Spring Data JPA, Spring Security, and testing. It also discusses deploying the application on a web server and customizing through properties files.

JPA and Hibernateelliando dias

JPA and Hibernate are specifications and frameworks for object-relational mapping (ORM) in Java. JPA is a specification for ORM that is vendor-neutral, while Hibernate is an open-source implementation of JPA. Both use annotations to map Java classes to database tables. JPA queries use JPAQL while Hibernate supports both JPAQL and its own HQL. Additional features covered include relationships, inheritance mapping strategies, custom types, and querying.

ORM, JPA, & Hibernate OverviewBrett Meyer

Brett Meyer gave an overview of Hibernate ORM and JPA. He discussed that ORM maps Java objects to relational databases for persistence beyond the life of a program. JPA is the Java standard for ORM that provides portability, while Hibernate is a full-featured JPA implementation with additional native features. Hibernate allows focusing on business logic rather than data access details and provides performance, concurrency, and extensibility benefits over traditional JDBC usage.

Overview of JPA (Java Persistence API) v2.0Bryan Basham

JPA (Java Persistence API) is a JCP Standard for Object-Relational Mapping (ORM) persistence for the Java platform, both JavaSE and JavaEE. This talk will discuss and show examples from the latest version of the spec: JPA v2.0. Based upon influences from a variety of technologies that competed with the original JavaEE EJB specification for Entity beans, JPA promotes the use of light-weight POJO-based Entity objects and a simple EntityManger interface to control the CRUD operations to the backend RDBMS. Even with the rise of NoSQL data stores, there are still many applications that are well suited to a relational database solution and JPA is my favorite ORM tool for Java development. In the talk I will present: * Entities * Entity Operations * Query Language * Containers & Deployment * "In Practice" common problems, solutions and patterns of use

JPA Best PracticesCarol McDonald

The document discusses best practices for using the Java Persistence API (JPA). It covers: - The entity manager and persistence context manage entities within a scope like a transaction. - Entities transition between managed, detached, and removed states that impact database synchronization. - Queries retrieve and manage entities from the persistence context and database. - Transactions and locking strategies like optimistic and pessimistic concurrency control how changes are made. - Extended and transaction scoped persistence contexts determine entity lifetime and caching. - The second level cache can improve performance by caching entities across contexts.

Introducing thymeleafeiryu

Thymeleaf IntroductionAnthony Chen

Broadleaf Presents ThymeleafBroadleaf Commerce

Introduction to thymeleafNexThoughts Technologies

Spring Framework - MVCDzmitry Naskou

Thymeleafのすすめeiryu

Spring User Group Thymeleaf 08-21-2013Justin Munn

DSpace UI Prototype Challenge: Spring Boot + ThymeleafTim Donohue

Introduction to jQueryCollaboration Technologies

Introduction to spring bootSantosh Kumar Kar

Spring BootPei-Tang Huang

Introduction to JPA FrameworkCollaboration Technologies

Introduction to Spring Boot!Jakub Kubrynski

OAuth2 and Spring SecurityOrest Ivasiv

REST with Spring Boot #jqfkToshiaki Maki

Spring Boot TutorialNaphachara Rattanawilai

JPA and Hibernateelliando dias

ORM, JPA, & Hibernate OverviewBrett Meyer

Overview of JPA (Java Persistence API) v2.0Bryan Basham

JPA Best PracticesCarol McDonald

Similar to Thymeleaf, will it blend? (20)

Spirit-teknologiapäivät Petri Niemi HTML5 & JavaScript DevelopereilleTieturi Oy

This document provides an overview of HTML5, JavaScript, and new JavaScript APIs. It introduces the presenter and their focus on JavaScript. It then discusses the history and standards of JavaScript and ECMAScript. It explains that while HTML5 provides semantics, most interactive functionality comes from JavaScript. It outlines some new JavaScript APIs like geolocation, files, web workers, and web sockets. It discusses how JavaScript is important for rich interactive applications and single page applications. It provides examples of these APIs and discusses challenges of developing complex single page applications. It concludes with an example of variable scoping in JavaScript.

Drawing the Line with Browser Compatibilityjsmith92

This document discusses browser compatibility and strategies for supporting older browsers like Internet Explorer 6. It addresses common layout issues in IE6 like the double margin bug and float containers. It also provides techniques for conditional comments, CSS hacks, frameworks and tools. The document then covers new technologies like HTML5 video, geolocation, CSS3 features and strategies for mobile browsers.

Headless Magento - Meet Magento Poland 2017Sander Mangel

The document discusses headless architecture and implementing it for Magento. It describes taking business logic and data out of Magento and exposing it via APIs that can then be consumed by various clients like Magento and other systems. This allows isolating domains and insulating systems from future changes. It recommends using lightweight PHP frameworks and standard libraries to build the APIs and services, and addresses issues like data storage, caching, and output formatting.

Chapter 2 introduction to html5nobel mujuji

HTML5 is the newest version of the Hypertext Markup Language (HTML). It introduces several new elements and attributes that help improve the semantic structure of web pages and make them more engaging. Some key features of HTML5 include new semantic elements like <header>, <footer>, and <section>; forms improvements; local storage; WebSockets; and multimedia elements like <video> and <canvas>. The HTML5 specification is still under development by the W3C and WHATWG organizations.

Paving the way with Jakarta EE and Apache TomEE - itkonekt 2020César Hernández

[In Control 2010] HTML5Christopher Schmitt

This document discusses HTML5 and provides examples of new HTML5 elements and features such as audio, video, and the canvas element. It demonstrates how to add audio and video to a basic HTML5 page structure and provides code samples using the canvas element to draw shapes. It also discusses HTML5 support in different browsers and techniques for improving compatibility, such as using JavaScript to add support for new elements in older browsers.

Html5Oliver Zico Mendes

HTML5 is the next evolution of the HTML standard that aims to make web pages more engaging and allow for richer content and interactivity. It introduces many new elements and features such as audio and video elements, canvas for drawing graphics, and semantic elements that divide content into headers, footers, articles and sections. While still under development, browser support is increasing and some features can already be used, though the specification may still change. HTML5 aims to unify web development by replacing separate technologies and providing powerful new APIs for building web applications.

Html vs xhtmlYastee Shah

Introduction to HTML5 and CSS3 (revised)Joseph Lewis

Joseph R. Lewis of Sandia National Laboratories gave a presentation on HTML5 and CSS3 at Oak Ridge National Laboratory. The presentation provided an overview of the history that led to the development of HTML5, described new HTML5 semantic elements and attributes, and covered features of HTML5 like Canvas, SVG, and MathML. It also covered new CSS3 properties and exercises for attendees to experiment with the new technologies.

Polymer & PWA: Understanding the “why”Ashrith Kulai

Performance tuning of WebsitesmuHive Technologies

Open Source Secret Sauce - Lugor Sep 2011Ted Husted

The document discusses the "Open Source Secret Sauce" - how open source projects are able to create compelling software through a volunteer model. It explains that open source projects use portals, repositories, issue trackers, mailing lists, and automated builds (PRIMA) to coordinate work. The Apache Software Foundation is provided as a successful example, with its meritocratic process allowing developers to do work and make decisions through consensus-based voting. The opportunity for open source is that it can produce successful software to solve problems like failed commercial projects.

West Yorkshire Meetup #3Francis Edwards

Slides and links used for the explanation of how a RAML library and specification was written to describe and extend an existing http exceptions, mule project. The project was then mavenised and saved to a jar file using the maven build plugin and added to subsequent mule app as a maven dependency. Thus a raml library, together with an exceptions mule app added as a jar dependency, referenced by a spring bean can be used to extend apikit projects with standardised 4xx error messages.

HTML 5Prof. Erwin Globio

Prof. Erwin M. Globio gave a presentation on HTML5 that covered: 1) The history and development of HTML5 by groups like WHATWG and its adoption by W3C. 2) New features in HTML5 like audio, video, and canvas elements to enable richer content as well as geo-location APIs for mobile apps. 3) Issues with older standards like HTML4 and XHTML2 that HTML5 aims to address and improve cross-browser compatibility. 4) Questions around browser support for HTML5 and implications for web designers in adopting the new standard.

HTML5: The Next Internet GoldrushPeter Lubbers

Killing the Angle Bracketjnewmanux

Sooner or later we all have to work with HTML, despite its verbosity. Those of us who claim to love HTML may just be victims of Stockholm Syndrome, both praising yet secretly loathing it. Basho designer John Newman is making the trek from the swamps of Florida to show us the way. In the modern world of markup preprocessors, these alternative syntaxes allow you to write simpler, cleaner, more concise code in a shorter amount of time. Certain techniques can even allow your team members who may be less-tech-savvy to contribute content directly without forcing you to wire up a WYSIWYG style CMS. This talk explores great alternatives to plain HTML and CSS, and covers how Basho put these tools together to facilitate a painless, team-oriented approach to building sites and web apps.

Web ComponentsFITC

Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada More info at www.fitc.ca/webu Web Components with Jeff Tapper OVERVIEW Web Components provide a necessary element for large scale applications: the ability to build Web Apps as a set of encapsulated, maintainable and reusable components. In order to use Web Components, a series of emerging web platform features such as the Shadow DOM, HTML Imports and Custom elements need to be used, each of which have varying support in browsers today. However, with the help of the Polymer project – a set of polyfills and an application framework using these principles – Web Components can be used today. In this session Jeff Tapper will explore Web Components, and walk through the creation of a Web Component for a modern JavaScript project. OBJECTIVE Learn to use Web Components to create reusable elements for your web application. TARGET AUDIENCE JavaScript Developers looking to understand how to build large scale applications. ASSUMED AUDIENCE KNOWLEDGE Audience should be comfortable working in JavaScript and manipulating the DOM. FIVE THINGS AUDIENCE MEMBERS WILL LEARN What are Web Components What is the current state of support for Web Components When do I need to use the Polymer Project to implement Web Components How to build a Web Component How to use a Web Component

Pavimentando el Camino con Jakarta EE 9 y Apache TomEE 9.0.0César Hernández

Paving the way with Jakarta EE and apache TomEE at cloudconferencedayCésar Hernández

Html5 Peeyush Chandel

Spirit-teknologiapäivät Petri Niemi HTML5 & JavaScript DevelopereilleTieturi Oy

Drawing the Line with Browser Compatibilityjsmith92

Headless Magento - Meet Magento Poland 2017Sander Mangel

Chapter 2 introduction to html5nobel mujuji

Paving the way with Jakarta EE and Apache TomEE - itkonekt 2020César Hernández

[In Control 2010] HTML5Christopher Schmitt

Html5Oliver Zico Mendes

Html vs xhtmlYastee Shah

Introduction to HTML5 and CSS3 (revised)Joseph Lewis

Polymer & PWA: Understanding the “why”Ashrith Kulai

Performance tuning of WebsitesmuHive Technologies

Open Source Secret Sauce - Lugor Sep 2011Ted Husted

West Yorkshire Meetup #3Francis Edwards

HTML 5Prof. Erwin Globio

HTML5: The Next Internet GoldrushPeter Lubbers

Killing the Angle Bracketjnewmanux

Web ComponentsFITC

Pavimentando el Camino con Jakarta EE 9 y Apache TomEE 9.0.0César Hernández

Paving the way with Jakarta EE and apache TomEE at cloudconferencedayCésar Hernández

Html5 Peeyush Chandel

Recently uploaded (20)

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

This session is designed to equip developers with the skills needed to build mission-critical, end-to-end processes that seamlessly orchestrate agents, people, and robots. 📕 Here's what you can expect: - Modeling: Build end-to-end processes using BPMN. - Implementing: Integrate agentic tasks, RPA, APIs, and advanced decisioning into processes. - Operating: Control process instances with rewind, replay, pause, and stop functions. - Monitoring: Use dashboards and embedded analytics for real-time insights into process instances. This webinar is a must-attend for developers looking to enhance their agentic automation skills and orchestrate robust, mission-critical processes. 👨‍🏫 Speaker: Andrei Vintila, Principal Product Manager @UiPath This session streamed live on April 29, 2025, 16:00 CET. Check out all our upcoming Dev Dives sessions at https://community.uipath.com/dev-dives-automation-developer-2025/.

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

How analogue intelligence complements AIPaul Rowe

Artificial Intelligence is providing benefits in many areas of work within the heritage sector, from image analysis, to ideas generation, and new research tools. However, it is more critical than ever for people, with analogue intelligence, to ensure the integrity and ethical use of AI. Including real people can improve the use of AI by identifying potential biases, cross-checking results, refining workflows, and providing contextual relevance to AI-driven results. News about the impact of AI often paints a rosy picture. In practice, there are many potential pitfalls. This presentation discusses these issues and looks at the role of analogue intelligence and analogue interfaces in providing the best results to our audiences. How do we deal with factually incorrect results? How do we get content generated that better reflects the diversity of our communities? What roles are there for physical, in-person experiences in the digital world?

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Hybrid Growth Mandate Model with TrsLabs Strategic Investments, Inorganic Growth, Business Model Pivoting are critical activities that business don't do/change everyday. In cases like this, it may benefit your business to choose a temporary external consultant. An unbiased plan driven by clearcut deliverables, market dynamics and without the influence of your internal office equations empower business leaders to make right choices. Getting things done within a budget within a timeframe is key to Growing Business - No matter whether you are a start-up or a big company Talk to us & Unlock the competitive advantage

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Artificial intelligence is changing how businesses operate. Companies are using AI agents to automate tasks, reduce time spent on repetitive work, and focus more on high-value activities. Noah Loul, an AI strategist and entrepreneur, has helped dozens of companies streamline their operations using smart automation. He believes AI agents aren't just tools—they're workers that take on repeatable tasks so your human team can focus on what matters. If you want to reduce time waste and increase output, AI agents are the next move.

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Want to learn practical tips for designing systems that can scale efficiently without compromising speed? Join us for a workshop where we’ll address these challenges head-on and explore how to architect low-latency systems using Rust. During this free interactive workshop oriented for developers, engineers, and architects, we’ll cover how Rust’s unique language features and the Tokio async runtime enable high-performance application development. As you explore key principles of designing low-latency systems with Rust, you will learn how to: - Create and compile a real-world app with Rust - Connect the application to ScyllaDB (NoSQL data store) - Negotiate tradeoffs related to data modeling and querying - Manage and monitor the database for consistently low latencies

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

At InData Labs, we have been keeping an ear to the ground, looking out for AI-enabled digital transformation trends coming our way in 2025. Our report will provide a look into the technology landscape of the future, including: -Artificial Intelligence Market Overview -Strategies for AI Adoption in 2025 -Anticipated drivers of AI adoption and transformative technologies -Benefits of AI and Big data for your business -Tips on how to prepare your business for innovation -AI and data privacy: Strategies for securing data privacy in AI models, etc. Download your free copy nowand implement the key findings to improve your business.

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

The MCP (Model Context Protocol) is a framework designed to manage context and interaction within complex systems. This SlideShare presentation will provide a detailed overview of the MCP Model, its applications, and how it plays a crucial role in improving communication and decision-making in distributed systems. We will explore the key concepts behind the protocol, including the importance of context, data management, and how this model enhances system adaptability and responsiveness. Ideal for software developers, system architects, and IT professionals, this presentation will offer valuable insights into how the MCP Model can streamline workflows, improve efficiency, and create more intuitive systems for a wide range of use cases.

Cyber Awareness overview for 2025 month of securityriccardosl1

Greenhouse_Monitoring_Presentation.pptx.hpbmnnxrvb

Procurement Insights Cost To Value Guide.pptxJon Hansen

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

How analogue intelligence complements AIPaul Rowe

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

AI and Data Privacy in 2025: Global TrendsInData Labs

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

Cyber Awareness overview for 2025 month of securityriccardosl1

Greenhouse_Monitoring_Presentation.pptx.hpbmnnxrvb

Procurement Insights Cost To Value Guide.pptxJon Hansen

Thymeleaf, will it blend?

1. Will it blend? Jasha Joachimsthal @jashaj 1

2. Thymeleaf, will it blend? 18-04-2013 Background • 1995: My <blink>ﬁrst</blink> html page • 1998: CSS & Java • 1999: PHP • 2003:ASP • 2006: XSLT • 2009: JSP • 2010: Spring MVC & Freemarker • 2012: Ruby,Thymeleaf http://www.phdcomics.com/comics/archive/phd012113s.gif 2

3. Thymeleaf, will it blend? 18-04-2013 Thymeleaf • Java library • XML/XHTML/HTML5 template engine • support for static and dynamic content • http://www.thymeleaf.org 3

4. Thymeleaf, will it blend? 18-04-2013 Project 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-2013 Copied from design • CSS • Javascripts • static images 5

6. Thymeleaf, will it blend? 18-04-2013 The 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 miniﬁed during build 6

7. Thymeleaf, will it blend? 18-04-2013 Preview JSP in browser? 7

8. Thymeleaf, will it blend? 18-04-2013 Preview Thymeleaf! 8

9. Thymeleaf, will it blend? 18-04-2013 Preview Thymeleaf! 9

10. Thymeleaf, will it blend? 18-04-2013 JSP 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-2013 Thymeleaf template <div th:class=”${foo} ? ‘myclass’”> <p>some other stuff...</p> </div> 11

12. Thymeleaf, will it blend? 18-04-2013 Paths 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-2013 Paths and labels <a href=”news-list.html th:href=”@{/corporate/news(page= ${nextPage})}” th:text=”#{more.news}”> More news</a> 13

14. Thymeleaf, will it blend? 18-04-2013 Thymol • 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-2013 Fragments • Frequently used parts like header, footer • Deﬁne 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-2013 Fragment: footer <footer th:fragment=”footer”> <ul> <li>© 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-2013 Caveats of Thymol • Cannot handle complex if statements • Is the DOM ready? • Do all the elements have a layout? • Links must have a text 17

18. Thymeleaf, will it blend? 18-04-2013 Break the preview • Hide elements behind complex if statements without alternative • Forget to add static labels, links, classes etc. • Create new ﬁle without including Thymol 18

19. Thymeleaf, will it blend? 18-04-2013 Break the server side • Create valid HTML that is not valid XML <input name=”foo” required> • Forget to update the HTML inside the complex if statement • Forget to update dynamic paths to CSS, Javascripts and images 19

20. Thymeleaf, will it blend? 18-04-2013 Will it blend? • It depends on the... • team • complexity of the application • need of having an up to date preview after initial design 20

Thymeleaf, will it blend?

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Thymeleaf, will it blend? (20)

Recently uploaded (20)

Thymeleaf, will it blend?