Search the Community

Warning: it's going to be TL;DR so proceed with caution In an effort to come up with an optimized development workflow, I have come up with the idea of implementing most of the required template files in the form of static HTML files first (based on a "CSS framework" which will also serve as the CSS base of the site). Basically I want to implement most of the frontend without touching ProcessWire in the first place. The advantage of this approach is that it is a lot faster to work with only HTML/CSS/JS during the frontend design phase of the project, and the end result of the design phase can be "similar" to a wireframe/mockup which can be presented to a client, but this "mockup" actually represents (say) 80% of the final design, so it is something that is rather good to work with when the backend development with ProcessWire begins. This also means that my ProcessWire template files will be mostly implemented with <?php echo ... ?> and alternative syntax control structures that can be "just injected" into the above mentioned static HTML template files to turn them into ProcessWire template files later on. So far so good, but my ProcessWire template files are going to be separated into "template file partials", and I also want to implement the static HTML template files in the same way, so that they are also separated into "template file partials", and ideally organized in the very same structure. E.g. I will include the site's navigation in the ProcessWire template file like this: <?php echo $navigation ?> So I want to do the same in the corresponding static HTML template file, something like this: <div data-template="partials_navigation"></div> If it can be done recursively, then I can implement the same in both cases. With ProcessWire, I use wireRenderFile() to render partials recursively, so I just had to figure out what to use in the case of the static HTML template files. What else to use if not JavaScript? I started off by googling around, looking for some pre-made solutions... I did not find too much that could help me, the only thing useful I could dig up is "HTML Imports", for example: http://blog.teamtreehouse.com/introduction-html-imports Note, that currently this technique only works in Chrome(-ium), but that is my choice in frontend development anyway. I've read somewhere that other browsers might never implement "HTML Imports", but that is to be seen... I have found a lot of articles explaining the basics of "HTML Imports", but I could not find any libraries or frameworks nor even something similar to what I need, so I implemented a proof of concept version of mine: I'm quite happy with the result so far. The JavaScript code needs some additional error handling, but otherwise it seems to do what I need. Here it is in action (Chrome(-ium) only!!!): [...no longer live...] And here is the source code for those who want to take a closer look: [...old stuff, I removed it to save space...] However, I'm pretty sure that someone must have already come up with this idea, so I'm asking the ProcessWire community if anyone can point me to similar solutions, something that I can study and/or use. So any piece of advice that might help me to take it to the next level, or any objections to this "HTML Imports" technique, any disadvantages? Thank you in advance