hi
bei der Templating-Engine stimme ich Dir zu; allerdings würde ich eine Trennung von JS und HTML in zwei Dateien immer bevorzugen.
Darum gehts hier doch gar nicht. Vielmehr gehts darum, Platzhalter mit Werten zu beleben. Und wie performant das ist, hängt von der TE ab. Wobei eine TE natürlich nur für eine bestimmte Scriptspache funktionieren kann.
Und selbstverständlich kann man auch JS Code oder ganze JS-Dateien über gerenderte Templates ausliefern.
Platzhalter selbst sind neutral. Ich habe z.B. in jeder Seite im <head> ein Template mit Platzhaltern, ein paar von denen sind:
<script>var SID = "%sid%"; </script>
%loop_hrefcss%
<link rel="stylesheet" href="%hrefcss%" type="text/css">
%endloop%
<title> %title% </title>
und die Werte werden dann zum Ausliefern der Response da reingerendert. Wie zu sehen ist, gibt es einen Platzhalter für die Session-ID, den Seitentitel und eine Loop womit die für die Seite konfigurierten CSS Dateien gelinkt werden. Während die SID am Responseobjekt hängt, wird der %title% per Konfiguration geliefert.
Nützlich ist z.B. ein Platzhalter %url%
z.B. für sämtliche Links die auf die Seite selbst zeigen und natürlich auch für XHR~Issues oder die fetchAPI. Wobei: Sämtliche XHR Requests oder native zu setzende href's mit Parameter zeigen bei mir grundsätzlich auf die Seite selbst in die sie eingebaut sind. Womit auch das action-Atttribute bei sämtlichen Forms entfallen kann aber das nurmalso nebenbei.
Da macht die Sache sehr flexibel, erweiterbar und auch wartungsfreundlich. Für Seiten die keine Platzhalter haben, kann die TE bzw. das Rendern per Seitenkonfig abgeschaltet werden. Der <head> Bereich wird jedoch immer gerendert.
Und natürlich sind auch gerenderte Templates cacheable. Aber bitte nicht auf dem Server sondern am Client, also z.B. per Lastmodified/Expires.
MfG