Erstellen von HTML mit Vorlagen versus Erstellen in JavaScript?

Question

Ich habe vor kurzem begonnen, Web-Apps zu erstellen, und während ich einige Sachen mache, die funktionieren, bin ich mir der Best Practices nicht sicher.

Bisher habe ich hauptsächlich die Templating-Systeme von Django, web.py und PHP verwendet. Aber jetzt, wo ich jQuery und nette Ajaxy Magie benutze, um Daten vom Server zu erhalten, ohne den Client zu aktualisieren, sehe ich die Vorteile, HTML direkt in Javascript zu erstellen (also kann ich einfach ein kleines json Objekt an den Client senden und lass ihn herausfinden, was er ändern soll und wie).

So jetzt habe ich einige Bits, die mit Vorlagen gerendert werden, und einige, die in Javascript erstellt werden, und sogar ein schrecklicher Fall, wo es eine Mischung aus beiden gibt, eine web.py Vorlage, die eine JavaScript-Funktion erzeugt, die ein HTML erstellt Tisch - fühlt sich wieder wie C-Makros an! (Ich werde das irgendwann wegrefaktorieren)

Ist das ein häufiges Problem in der Webentwicklung? Empfohlene Best Practices wie "json für alles verwenden, so viel wie möglich in JavaScript rendern", "Bibliothek foo verwenden" usw.? Irgendwelche guten Heuristiken für was mit Templates umgehen und was mit Javascript umgehen?

Suche ein bisschen hier, fand ich jemanden asking about javascript templates, die scheint wie eine mögliche Lösung.

Answer 1

Bitte verwenden Sie kein Javascript zum Layout Ihrer Seiten. Verwenden Sie es nur dort, wo es benötigt wird.

Trotz der jüngsten Verbesserungen und Standardisierungen, Javascript ist immer noch in der Regel langsam, schwer vollständig kompatibel zu sein (denke alten IE und andere), und nicht so kompatibel mit einigen Screenreadern und Scraper/Suchmaschinen.

Wenn Sie es schaffen, indem Sie glattes HTML zurückgeben, dann ist das normalerweise die Art, wie Sie gehen möchten.

Answer 2

Niemals die Funktionalität Ihrer Website auf Javascript basieren. Wenn Sie dies tun, werden Sie alle Besucher mit deaktiviertem JavaScript verlieren. Wenn Sie wirklich möchten, müssen Sie entweder Benutzer mit deaktiviertem JavaScript erkennen und sie umleiten. oder stellen Sie <noscript> Alternative zur Verfügung. Außerdem können Crawler zwar jetzt ein paar Tage Javascript jagen, es ist aber immer noch massiver Schaden an der SEO der Website. Es gibt auch Kompatibilitäts- und Gemeinkostenprobleme, die bei heutigen mobilen Geräten, Netbooks usw. problematisch sein können.

Answer 3

Ich bin einige Zeit in die gleichen Schwierigkeiten geraten. Ich habe eine Webseite, die etwas mit web.py Templates darstellt und eine Ajax Paginierung hat. Also musste die nächste Seite mit Javascript gerendert werden. Am Ende habe ich die web.py-Templating-Engine erweitert, um eine Javascript-Funktion zu generieren, die dieselbe Template-Ausgabe rendert.

dieses Blog-Post Sehen Sie für weitere Informationen:

http://anandology.com/blog/javascript-templating-with-webpy/

Answer 4

gibt es eine leicht question hier bezogen.

Sie könnten möglicherweise die gleichen Vorlagen für beide verwenden - this library sieht interessant aus.

Sie könnten Vorlagen nur auf dem Server rendern ... the question oben hat eine Möglichkeit, es effizient zu tun.

Sie könnten bestimmte Vorlagen bei Bedarf in JavaScript duplizieren - versuchen Sie jqtemplate.

Persönlich würde ich wahrscheinlich HTML nur auf der Serverseite rendern, um Template-Duplizierung zu vermeiden.Ich würde JS-Templates machen, wenn mein Server mehr wie ein JSON-Web-Service wäre und möglicherweise auch andere Clients bedient.

Das heißt, wenn Ihre Website zugänglich und nicht-js freundlich ist wichtig für Sie (es sollte sein) dann schreiben Sie Ihre Website vollständig ohne js, und dann progressively enhance es.

Answer 5

AngularJS ist eine beliebte Lösung für Client-seitiges Templating, die ich Jahre nach dem Stellen dieser Frage entdeckt habe. Sie können HTML-Templates ("Partials") ein bisschen wie in Django schreiben und dann mit Javascript nach Bedarf abrufen und interpretieren - so erhalten Sie das Beste aus beiden Welten, eine dynamische Website mit sauberer Trennung von Code und Layout.