Serverside HTML gebruiken in JavaScript

[gnoe93]

Beste tweakers

Ik ben bezig met de frontend code van een Symfony project te refactoren door o.a. alle hardcoded HTML uit JavaScript te halen. In de meeste gevallen is dit gewoon kwestie van wat Ajax calls toevoegen/aanpassen, maar voor sommige stukken is een Ajax call niet de geschikte manier.

Stel bijvoorbeeld de markup voor het weergeven van generische foutmeldingen. Als er een probleem met de server is, lijkt het mij niet verstandig deze opnieuw te contacteren voor de foutmelding template op te halen. Een ander voorbeeld is dan weer een stukje van 3 regels dat de overhead van een extra request niet waard is.

Ik zou waar nodig deze HTML gewoonweg als een hidden div in mijn templates kunnen steken, maar dit zorgt in veel gevallen voor problemen met templates die conditioneel stukken weergeven. Dan zou ik het stuk in kwestie uit de normale control flow moeten halen, wat de duidelijkheid van de code er niet echt op verbetert.

Het beste waar ik kan opkomen is in mijn base paginatemplate een verborgen div voorzien waarin ik alle generische stukken zoals een foutmelding steek, zodat ik deze in JavaScript kan ophalen om ze vervolgens op de geschikte plaats in te voegen op de pagina. Een nadeel hierbij is dat elke pagina een hoop extra HTML moet laden, zonder garantie dat deze gebruikt gaat worden.

Enige tips hoe ik dit best kan afhandelen? Iemand met ervaring?

[ Voor 3% gewijzigd door gnoe93 op 15-12-2016 00:16 ]

[Verwijderd]

Een script maken ipv een vast template in html op te nemen ? (gewoon een idee)

[orf]

Je moet dit artikel even lezen: https://www.html5rocks.co...s/webcomponents/template/

Daar staan verschillende technieken met <template> en <script> tags beschreven om templates in je HTML te hebben.

Je moet even tellen hoeveel kB je opneemt in je HTML en of dat een probleem is. Waarschijnlijk is het in bestandsgrootte niet zo veel. En mogelijk kan je nog gzippen.

[Bloemkoolsaus]

Wellicht is dit een interessante link voor je: http://coenraets.org/blog...mplates-with-mustache-js/

[gnoe93]

orf schreef op donderdag 15 december 2016 @ 07:52:
Je moet dit artikel even lezen: https://www.html5rocks.co...s/webcomponents/template/

Daar staan verschillende technieken met <template> en <script> tags beschreven om templates in je HTML te hebben.

Je moet even tellen hoeveel kB je opneemt in je HTML en of dat een probleem is. Waarschijnlijk is het in bestandsgrootte niet zo veel. En mogelijk kan je nog gzippen.

Juist wat ik zocht . De <template> tag heeft maar beperkte browsersupport dus het zal handlebards worden. Voorlopig lijkt het wel zo dat ik mijn bestaande twig includes niet ga kunnen hergebruiken aangezien alles binnen handlebars escaped moet worden (verbatim) om conflicten met twig te vermijden (zie http://stackoverflow.com/...how-to-include-a-template).

Update:

Blijkbaar heeft Twig ook een functie waarmee een template included kan worden zonder deze te renderen: http://twig.sensiolabs.org/doc/functions/source.html. Dan zit ik wel nog met het probleem dat de syntax van Handlebars niet overeenkomt met die van Twig, dus lijkt het me beter om rechtstreeks de JavaScript implementatie van Twig te gebruiken: https://github.com/twigjs/twig.js/wiki.

[ Voor 24% gewijzigd door gnoe93 op 17-12-2016 07:55 ]

[q-enf0rcer.1]

Ik zou je toch aanraden statische HTML bestanden async op te halen. Je argument dat dit niet verstandig is als er een probleem met de server is, is in principe terecht. Maar hier is gelukkig een eenvoudige oplossing voor: een fallback waar de statische HTML bestanden kunnen worden opgevraagd mocht de server met een foutcode reageren op de originele request.

Deze oplossing voorkomt dat je veel onnodige HTML extra moet inladen bij elke bezoeker. Of dit nou als template is of niet, dit is simpelweg extra laadtijd. Naar mijn mening iets wat je niet moet willen.