HTML Natural templating

Historically there has always been a gap in web application development between developers and designers. I have myself been struggled between some warm discussions about where one's responsibilities starts and the other's ends.

Designers know how to craft those beautiful HTML pages filled with images, CSS, JavaScript and standard tags. Developers transform that pleasant thing into something functional, "polluting" that designed template with technology-specific markup such as the JSF namespace markups.

JSF 2.2 brings the new feature of passthrough elements, which complements passthrough attributes. The specification term is "passthrough elements", but I'd like to refer to this feature as "Natural Templating" just like described in other framework's documentation. Why? Because natural templating is what you achieve, and passthrough elements is how you achieve it.

HTML natural templating allows your project's HTML files to become working prototypes. And when I say working prototypes it englobes any CSS or JavaScript code that you might have included in it. It means that any person (designer, customer, boss etc) can point-and-click your HTML files and have them correctly working on (hopefully) any web browser.

Natural templating also means that the designers in your team won't need a full-stack Java development environment to check if the rendered HTML is correct. They can produce their HTML, CSS and JavaScript files in whatever tools they want to and verify the results in their standard web browser by hitting "Refresh".

To add the intended functionality to these HTML templates, JSF developers only need to add custom attributes to standard HTML tags - which will be processed by the JSF implementation later at runtime. Best of both worlds.

If you need to know the attributes and their corresponding JSF component counterparts you will need to check the Javadocs for the TagDecorator class on https://javaserverfaces.java.net/nonav/docs/2.2/javadocs/javax/faces/view/facelets/TagDecorator.html

Notice: JSF 2.2 changed the way that the DOCTYPE instruction is processed. The default behaviour is to render the HTML5 DOCTYPE, so if you need a different DOCTYPE you should override it in the JSF configuration. Since JSF 2.2, the recommended way of coding your XHTML file is omitting the DOCTYPE declaration.

IntelliJ IDEA support for JSF 2.2 Natural Templating (aka passthrough elements).