One of the biggest problems I've run into in building browser based applications in HTML5 is the inability to use includes in HTML.
As a result I've started working on a component based HTML includes framework for browser based applications which can extend into the mobile app world.
Example:
<!doctype html>
<html>
<head>
<meta http-equiv="PRAGMA" content="NO-CACHE">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="EXPIRES" content="Tue, 31 Jan 2012 12:00:01 GMT">
<title>Hyper Text Components</title>
<link type="text/css" rel="stylesheet" href="css/body.css"/>
</head>
<body>
<div id="page">
<component id="header" htmlsrc="components/header.html" csssrc="css/header.css"></component>
<component id="nav" htmlsrc="components/nav.html" csssrc="css/nav.css" jssrc="js/nav.js"></component>
<div>
<component id="content" htmlsrc="components/content.html" csssrc="css/content.css" cssclass="content"></component>
<component id="content1" htmlsrc="components/content1.html" cssclass="subcontent"></component>
</div>
<component id="footer" htmlsrc="components/footer.html" csssrc="css/footer.css"></component>
</div>
<div id="loading">
<div id="loadingani">loading...</div>
</div>
</body>
<script type="text/javascript" src="js/HyperTextComponents.js"></script>
</html>
I would really appreciate any feedback, suggestions or help if anyone is interested: gregg@blackchicken.ca
Yes, I realize that the component tag does not comply with HTML standards... but we have to start somewhere.
Next steps for the project:
- add tests for recursive components to determine impact on performance
- try to optimize inclusion with fewer AJAX calls
- browser compatibility