I am a newbie with AEM and I am "arrived" from Frontend Dev, and will be happy to use everywhere (where possible) HTL (Sightly)...
<!--/*
Based on: /libs/wcm/foundation/components/page/page.html
*/-->
<!DOCTYPE HTML>
<html data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<head data-sly-include="head.html">
<sly data-sly-call="${clientlib.css @ categories='flex'}" data-sly-unwrap />
</head>
<body>
<div data-sly-test="${wcmmode.edit}">This text is visible only in edit mode to the authors</div>
<p>TEST TEST TEST</p>
<!-- page content -->
<sly data-sly-use.body="body.js" data-sly-resource="${body.resourcePath @ resourceType='wcm/foundation/components/parsys'}"/>
</body>
</html>
head.html:
<!-- HTML meta-data -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en">
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" />
<title>${properties.title || currentPage.name}</title>
___ but JSP version is working fine!
<%--
boilerplatePage component.
Boilerplate Page's Component to present Touch UI components
--%>
<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<%--<cq:includeClientLib categories="cq.jquery"/>--%>
<cq:includeClientLib categories="flex"/>
<body>
<div class="container">
<h1 data-sly-test="${wcmmode.edit}"Here is where your Touch UI component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</div>
</body>
</html>
