WN

WN (https://www.wn.se/forum/index.php)
-   Allmänt (https://www.wn.se/forum/forumdisplay.php?f=2)
-   -   HTML generering, klient eller server? (https://www.wn.se/forum/showthread.php?t=1047359)

jayzee 2011-03-26 16:47

HTML generering, klient eller server?
 
Sitter just nu och funderar om ett PHP skript som anropas via Ajax skall returnera färdigformaterad HTML kod som Javaskript bara skall lägga i ett element eller om skriptet skall returnera data som JSON och sedan kan Javaskriptet formatera upp det med tex. templates.

Enda nackdelen med server-side genereringen jag kommer på är att mer data skickas.
Vilka Er era åsikter, vilket är bäst och mer framtidssäkert?

pelmered 2011-03-26 17:42

Det kommer troligen inte märkas någon större skillnad för användaren eller för belastningen på din server om det inte är stora mängder data med massa fält.

Är det en hel sida tycker jag du ska generera HTML på servern.
Är det delar eller enskilda fält beror det på hur många olika fält är det som ska uppdateras. Hur många är det?

jayzee 2011-03-26 17:49

Det är en meddelande-sida, där man har ett antal flikar (inkorg, skickat, skicka nytt, ...). Antalet meddelanden kan vara svårt att förutse men så som det är nu funderar jag på att begränsa det till 20st.

dAEk 2011-03-26 18:25

Låt servern svara med endast data eftersom:
  • det blir lättare att återanvända kod och du får bättre struktur i projektet. Låter du servern skicka med markup är du låst till t.ex en ul-lista om du nu returnerar en sån. I framtiden kanske samma data ska användas på en annan sida men märkas upp på ett annat sätt, och då vill man ju helst inte kopiera den gamla funktionen och ändra Html:n eller lägga in fula if-elses i den befintliga funktionen.

  • underhållsarbetet blir lättare. Ingen tycker om att leta efter och ändra Html-kod i server-kod.

  • det blir mindre overhead i svaren. Svarar servern med markup och funktionen anropas 100 gånger skickas markuppen 99 gånger i onödan. Oftast är det här knappast ett problem men ändå. :)

Det blir lite mer jobb för webbläsarna men jag tycker att fördelarna är fler och väger tyngre än nackdelarna.

Syke 2011-03-26 23:13

Jag skulle nog köra JSON-data från servern som sedan läggs in i html-template (ex. mustache) mha javascript. Mina $0.02.

jayzee 2011-03-27 09:22

Tack grabbar, vi tänker i samma bana. JSON is a way to go.

pelmered 2011-03-27 10:21

Citat:

Ursprungligen postat av dAEk (Inlägg 20399727)
Låt servern svara med endast data eftersom:

det blir lättare att återanvända kod och du får bättre struktur i projektet. Låter du servern skicka med markup är du låst till t.ex en ul-lista om du nu returnerar en sån. I framtiden kanske samma data ska användas på en annan sida men märkas upp på ett annat sätt, och då vill man ju helst inte kopiera den gamla funktionen och ändra Html:n eller lägga in fula if-elses i den befintliga funktionen.


underhållsarbetet blir lättare. Ingen tycker om att leta efter och ändra Html-kod i server-kod.

I beg to differ.
Jag skulle säga att det är väldigt mycket enklare att få bra struktur på server side-genereringen än om man ska hantera massa logik med JavaScript. JavaScript-kod är i min mening mycket svårare att strukturera, felsöka och underhålla. Därför tycker jag inte man ska ha för mycket logik där om det inte finns en uppenbar vinst med det(vilket jag är osäker på att det finns i det här fallet).

Gör man dessutom någon form av template där man stoppar in datan får man bra struktur med separering av data och och markupen.

Citat:

Ursprungligen postat av dAEk (Inlägg 20399727)
det blir mindre overhead i svaren. Svarar servern med markup och funktionen anropas 100 gånger skickas markuppen 99 gånger i onödan. Oftast är det här knappast ett problem men ändå. :)


Det blir lite mer jobb för webbläsarna men jag tycker att fördelarna är fler och väger tyngre än nackdelarna.

Jag tvivlar att på att det blir någon större skillnad på belastningen. Det som kostar prestanda är generellt sett att hämta datan från databasen(eller likande), inte att generera HTML-koden. Vid stora trafikvolymer är det väl nog endast på bandbreddsanvändningen som man skulle märka någon skillnad.
Med den här lösningen lägger du istället över mycket av beräkningarna på klienten så användare med långsammare datorer eller webbläsare med långsamma JavaScriptmotorer vilket mycket väl kommer ge en märkbar prestandaförsämring.

tartareandesire 2011-03-27 12:34

Citat:

Ursprungligen postat av dAEk (Inlägg 20399727)
[*] underhållsarbetet blir lättare. Ingen tycker om att leta efter och ändra Html-kod i server-kod.

Fast du kan ju lägga html-koden i en template-fil, då får du bättre struktur och slipper leta.

jayzee 2011-03-27 13:40

Citat:

Ursprungligen postat av ITisGood.se (Inlägg 20399795)
I beg to differ.
Jag tvivlar att på att det blir någon större skillnad på belastningen. Det som kostar prestanda är generellt sett att hämta datan från databasen(eller likande), inte att generera HTML-koden.

HTML koden genereras utifrån resultaten från databasen.

randis 2011-03-27 14:05

Jag håller med ITisGood till 100%. Det finns inget som hindrar dig från att jobba med View separat på servern även vid ett Ajax anrop. Jag tycker inte javascript ska användas för layout. Det är inte vad det är avsett för i min mening. PHP/Asp däremot är avsett för att generera HTML kod dynamiskt.

Du har ju sannolikt en template för hur sidan ska se ut som används av serversidan redan. Varför man då ska göra ytterligare en template för klientsidan att använda förstår jag inte. Det om något skapar ju problem vid uppdateringar.

Om inkorg visas som standard när man laddar "mina meddelanden" så gissar jag att inkorgen inkluderas redan på serversidan, och att det inte är förrän man byter till "skickat" eller annan flik i "mina meddelanden" som den utnyttjar Ajax. Sålunda har du ju redan allt på serversidan som krävs för att generera den layout du vill ha.

dAEk 2011-03-27 14:11

Citat:

Ursprungligen postat av ITisGood.se (Inlägg 20399795)
Jag tvivlar att på att det blir någon större skillnad på belastningen.

Utan att veta något om själva mallen borde man väl inte anta någonting? Det skulle kunna vara en enkel u-lista eller en komplex tabell med diverse olika klasser för klientbeteende (sortable, draggable t.ex.).

Extra markup påverkar responsiviteten och det behövs inte mycket data förrän det blir påtagligt. Det är ju en av anledningarna till att man hellre använder JSON istället för XML.

randis 2011-03-27 14:20

Med dagens uppkopplingar anser jag inte att det är försvarbart att optimera så. om det handlar om 0.5 - 1kb så är den hastighetsförlusten marginell jämfört med vad själva httpRequesten och svaret tar att generera. Men om vi pratar om stora datasamlingar med 50000 rader kan man säkert göra en noterbar vinst i nedladdningstid genom att bara svara med någon typ av ren data. Men då är det frågan hur snabbt klienten kan bygga upp sidan. Speciellt om den ska använda en separat template.

Alla webbläsare är inte så snabba som Chrome på att hantera Javascript.

dAEk 2011-03-27 15:12

Citat:

Ursprungligen postat av randis (Inlägg 20399829)
Med dagens uppkopplingar anser jag inte att det är försvarbart att optimera så.

Blir det snabbare är det förstås trevligt men det är inte därför man gör på det sättet.

Citat:

Ursprungligen postat av randis (Inlägg 20399829)
Alla webbläsare är inte så snabba som Chrome på att hantera Javascript.

Nä, och de är heller inte lika långsamma som den långsammaste heller.

Båda sätten funkar och vilken väg man väljer beror på hur man vill jobba. För- och nackdelar finns alltid.

randis 2011-03-27 15:22

Vad är det mer specifikt du syftar på med responsivitet då?

dAEk 2011-03-27 19:00

I det här fallet: tiden det tar för klienten att läsa in data.

randis 2011-03-27 19:44

Ja man får väl väga de 100-delar man tjänar på ett normalstort dokument jämfört med enkelheten att underhålla och införa ändringar när man har det med samma mallar som övriga siten.

Vad du inför genom att låta javascript hantera data är ytterligare än felkälla då du först ska låta serversidan hantera och formater datan, och sedan ska den hanteras ytterligare en gång på klienten med javascript.

Jag kan inte föreställa mig när JSON-data innebär fördelar när innehållet i en hel div ska bytas ut. Ett tu tre vill du ha en flik som heter almanacka eller något som inte passar med de satta UL-listorna med satta klasser. Då måste du arbeta på flera ställen istället för att bara skapa en ny controller och template för serversidan som genererar hela innehållet åt dig. Nya javascript och jobbig logik på klientsidan behövs inte. Bara en ny flik som gör en korrekt httprequest behövs.

Du skapar dessutom möjligheter för de som inte har javascript att komma åt sidan genom att göre en include på serversidan.

JSON-data har helt klart användningsområden det med.

dAEk 2011-03-27 22:16

Hmm, vi verkar inte vara på samma bana. Jag försöker förklara lite mer konkret.

Citat:

Ursprungligen postat av randis (Inlägg 20399867)
Ja man får väl väga de 100-delar man tjänar på ett normalstort dokument jämfört med enkelheten att underhålla och införa ändringar när man har det med samma mallar som övriga siten.

Mitt förslag var aldrig att skapa en ny mall för Ajax-anropen utan att använda den befintliga Html-koden som levereras av servern när man går in på sidan. Låt oss säga att vi har sidan /messages, i Html:n finns fliksystemet och om vi väljer ut en av flikarna skulle innehållet i den kunna se ut såhär:
HTML-kod:

<h3>Skickade meddelanden</h3>
<ul id="sent-messages">
        <li class="template">
                <span class="date"></span>
                <span class="title"></span>
                [...]
        </li>
</ul>

Man kan också tänka sig att servern skickar med dom n senaste posterna när man går in på /messages om man vill använda progressive enhancement för SEO-syften till exempel. Jag har inte sett någon nämna det i den här tråden men det är hur som helst möjligt.

För att fylla sidan med meddelanden anropar vi servern med ett Ajax-anrop. När svaret levererats fyller vi vyn med innehåll och det gör vi genom att klona templaten, loopa igenom svaret och för varje post använder vi klonen genom att lägga till innehåll i respektive placeholder (.date, .title etc). Sedan lägger vi till klonen i en container som inte är kopplad till DOM-trädet. Först när loopen är klar lägger vi till containern på sidan. Ja, klienterna får jobba lite mer. Fördelarna är som jag skrev förut att man kan ändra struktur i vyerna, använda olika templates på olika ställen men fortsätta använda samma metod som hämtar data utan att behöva ändra i nån logik. Den här lösningen passar kanske inte för alla scenarion men det är det inte mycket som gör. Så länge det inte finns några särskilda krav tycker jag att det här är en bra lösning.

Citat:

Ursprungligen postat av randis (Inlägg 20399867)
Vad du inför genom att låta javascript hantera data är ytterligare än felkälla då du först ska låta serversidan hantera och formater datan, och sedan ska den hanteras ytterligare en gång på klienten med javascript.

Servern hanterar inte datan förutom att göra den till JSON. Använder man en JSON-serialiserare behöver man inte tänka på den biten. Man kan låta en Html-sida, Flash, Silverlight eller ngn annan form av app anropa servern om den bara returnerar data. Det är så jag vill ha det. Bakas Html in i svaret blir det mycket krångligare att hantera det. Antar att man kan säga att jag ser Ajax-metoderna som en WebService där det brukar vara upp till frågeställaren att bestämma hur svaret ska formateras/presenteras.

Citat:

Ursprungligen postat av randis (Inlägg 20399867)
Jag kan inte föreställa mig när JSON-data innebär fördelar när innehållet i en hel div ska bytas ut. Ett tu tre vill du ha en flik som heter almanacka eller något som inte passar med de satta UL-listorna med satta klasser. Då måste du arbeta på flera ställen istället för att bara skapa en ny controller och template för serversidan som genererar hela innehållet åt dig. Nya javascript och jobbig logik på klientsidan behövs inte. Bara en ny flik som gör en korrekt httprequest behövs.

Jag ser Ajax som ett sätt att transportera data och gärna så koncist som möjligt så ja, det stämmer. Någon tipsade om ett Mustache tidigare och det såg ju ut att vara smidigt.


Citat:

Ursprungligen postat av randis (Inlägg 20399867)
Du skapar dessutom möjligheter för de som inte har javascript att komma åt sidan genom att göre en include på serversidan.

Se ovan (progressive enhancement). Det är inte ett problem.

randis 2011-03-27 23:58

Jag köper det mesta du skriver, även om det inte passar mitt sätt så bra. Liknelsen med en web service var bra och kommer göra att jag tänker en gång till innan jag väljer tillvägagångssätt nästa gång.

När det gäller exemplet med almanackan håller jag inte med dig, men jag vet inte om jag orkar utveckal scenariot så det är förståeligt utan att använda bilder att förklara med. Det är väl just det scenariot som gjort att jag generellt låter PHP baka ihop hela kakan åt mig och javascriptet får bara byta ut innehållet i diven. Motsvarande jquery.load() helt enkelt.

dAEk 2011-03-31 19:25

Den biten var jag inte helt med på verkar det som. Det finns säkert scenarion där det är bättre att baka ihop Html:n i svaret men jag kommer troligen göra som jag brukar ändå. :D

linusoleander 2011-04-01 10:49

icanhazjs.com

Citat:

Ursprungligen postat av icanhazjs
Simple & powerful client-side templating for jQuery or Zepto.js



Alla tider är GMT +2. Klockan är nu 14:41.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson