Meerdere HTML snippets in enkele AJAX response

[gnoe93]

Ik werk aan een website waar alle views (html) serverside gegenereerd worden met twig. Sommige delen van de website worden dynamisch herladen met een simpele ajax call die het html stuk in kwestie vervangt door het nieuwe.

Dit werkt perfect zolang elke ajax response slechts 1 stuk html bevat, maar dus niet als ik vanuit één enkele request 2 stukken html wil terugkrijgen. Ik zou natuurlijk een aparte request kunnen maken voor elk stuk benodigd html, maar dan wordt de server dubbel belast voor iets wat in feite in een enkele bewerking kan.

De meest voor de hand liggende manier om dit probleem op te lossen lijkt me de verschillende html stukken in een JSON object te encoderen:

code:

return json_encode(array(
    'htmlSnippet1' => '<div id="item-1"></div>'
    'htmlSnippet2' => '<div id="item-2"></div>'
));

Een andere mogelijke oplossing lijkt me gebruik maken van <template>/Mustache/Handlebars. Een bijkomend probleem bij deze methode is dat ik de HTML snippets niet meer direct kan includen omdat ze in een template/mustache/handlebars tag gewrapped moeten worden.

Hoe doen anderen het? Zijn er betere manieren; indien ja, hoe en waarom?

Ik wil nog even vermelden dat het specifiek de bedoeling is html van de server terug te krijgen en geen json voor client-side templating.

[Room42]

gnoe93 schreef op vrijdag 24 maart 2017 @ 05:49:
[...]

Ik wil nog even vermelden dat het specifiek de bedoeling is html van de server terug te krijgen en geen json voor client-side templating.

En als je een json met meerdere HTML-blokken terugstuurt?

Hoe doen anderen het? Zijn er betere manieren; indien ja, hoe en waarom?

Wél enkel het noodzakelijke terugsturen en met Javascript de boel client-side op zijn plek zetten. For obvious reasons.

[ Voor 22% gewijzigd door Room42 op 24-03-2017 05:59 ]

[gnoe93]

Room42 schreef op vrijdag 24 maart 2017 @ 05:57:
En als je een json met meerdere HTML-blokken terugstuurt?

Wat ik eigenlijk bedoel is de gehele template ophalen van de server i.p.v. enkel data om dan vervolgens de template client side te genereren

Room42 schreef op vrijdag 24 maart 2017 @ 05:57:
Wél enkel het noodzakelijke terugsturen en met Javascript de boel client-side op zijn plek zetten. For obvious reasons.

Dit is juist wat ik probeer te vermijden; zowel op server als client dezelfde html genereren is dubbel werk en moeilijk te onderhouden. Als het mogelijk is bestaande html te wijzigen zonder deze opnieuw te genereren, dan haal ik de nieuwe gegevens uiteraard effectief als data op, en niet als html. M.a.w. in sommige gevallen is het noodzakelijk html terug te sturen i.p.v. zuivere data, tenzij ik het dubbel genereren op zowel server als client niet als een probleem beschouw.

[GewoonRoy]

Wat ik lees uit je verhaal is dat je specifieke elementen op je website wilt herladen middels een AJAX call. Heb je al eens gekeken naar AngularJS?

Deze richt zich namelijk specifiek op het wijzigen van je DOM elementen op de website. Door alleen de gegevens te wijzigen in javascript die van toepassing zijn zal de website zich direct er op aanpassen.

[BarôZZa]

De methode die je nu hebt kan je prima gebruiken. Een eenvoudige oplossing is is bijvoorbeeld data-attributen aan de elementen te hangen waar de snippets moeten komen. Bijvoorbeeld <div data-snippet="htmlSnippet1"></div>

Na de ajax call parse je de JSON, zoek je de elementen en knal je de snippets erin. Paar regels code.

GewoonRoy schreef op zondag 26 maart 2017 @ 14:14:
Wat ik lees uit je verhaal is dat je specifieke elementen op je website wilt herladen middels een AJAX call. Heb je al eens gekeken naar AngularJS?

Deze richt zich namelijk specifiek op het wijzigen van je DOM elementen op de website. Door alleen de gegevens te wijzigen in javascript die van toepassing zijn zal de website zich direct er op aanpassen.

Angular gaan gebruiken voor een eenvoudige AJAX call . Half MB aan JavaScript includen in je head.

[MeZZiN]

Angular is meer voor applicaties dan websites.... een beetje creatief met jquery kom je ook ver. Maar goed het is altijd sneller om alleen JSON van de server terug te krijgen en lekker op de frontend de templates te hebben.

Maar waarom eigenlijk iets lastig doen. De requests gaan parallel. De snelheid heb je al omdat je alleen update wat nodig is. Dus per pagina rond de 4-8 requests extra. (of je moet veel sub templates gaan doen) Misschien beter eerst al je resources (je statics) zoals jquery / css samenvoegen in een Js en een CSS bestand + minify dat scheelt het meeste. Gzip aan op de server (als het al niet aanstaat). Je javascript / css + static templates op cloudfront zetten en moet je eens kijken hoe rap het gaat

[q-enf0rcer.1]

HTML op de server genereren is echt een enorm slecht idee. Zo verlies je de vrijheid om in de clientside de structuur te bepalen. Het zou beter zijn om via JSON de properties en values te sturen, en op basis van deze gegevens HTML te genereren op de clientside.

@BarôZZa, AngularJS is rond de 50kb minified en gzipped, dat is een nogal groot verschil met wat jij nu zegt. Naar mijn mening overigens nog steeds te groot voor deze use case. Vue.js past hier denk ik beter bij, is lichter van gewicht en kan ook voor enkele componenten op een pagina worden gebruikt.

[BarôZZa]

@q-enf0rcer.1 Gzipped misschien. Nog steeds lomp groot qua geheugen en initialisatie. Overigens past geen framework hier beter bij. Het is een paar regels javascript.

HTML serverside genereren is niet zo erg als alles nu toch al serverside wordt gegenereerd, zoals bij het gros van de websites (en dan vooral het type met html en php). Is vaak ook sneller.