ugrás a tartalomhoz

Why inline CSS and JavaScript code is such a bad thing

Joó Ádám · 2008. Dec. 14. (V), 11.58
Sajnos még mindig sulykolni kell
 
1

Lehet létjogosultsága

Török Gábor · 2008. Dec. 14. (V), 13.01
A beágyazott stílusoknak szerintem lehet létjogosultsága. A CSS mint megjelenés leválasztása a honlapról ésszerű. Lehetnek azonban olyan komponensek a weboldalon, amelyek időben egyszeriek, és megjelenésük független a weboldal arculatától. Ez esetben teljes felesleges, hogy a többezer bejegyzéses blog mindössze egyetlen posztban megjelenített komponense miatt annak stílusát a blog CSS-e tartalmazza, sokkal kézenfekvőbb szerintem azt inline CSS-sel a markuphoz fűzni.
2

Valóban

janoszen · 2008. Dec. 14. (V), 14.36
Valóban, a hiba ott van, amikor ez nem kerül refaktorálásra.
9

Lehetne

Joó Ádám · 2008. Dec. 15. (H), 22.34
Alapvetően a már meggyökeresedett szokások és a fejlesztői lustaság az oka, hogy ezt is rosszul használjuk mindkét esetben.

Egyrészt, igen, ideális esetben mindig a megfelelő helyen használnánk a stílust: ha csak egyszer kell, akkor soron belül, ha rendszeres, akkor kiemelve. Azonban erre a legtöbb fejlesztő/felhasználó nem hajlandó figyelni, tehát egyszerűbb azt mondani, hogy emeljünk ki mindent, mert még mindig jobb, mintha tele vagyunk inline-nal.

Másrészt, ha nem élne valamiért az az elképzelés a CSS-ről, hogy az valami per definitionem statikus, mi több, sitewide valami, akkor egy bejegyzés kedvéért is lehetne kiemelni, már csak azért is, mert ennyivel többet lehet gyorstárazni. (Pl. a nyáron az egyik munkámban alkalmaztam olyan megoldást, hogy minden felvitt cikk mellé az admin meg tud adni kézzel CSS-t, amit adatbázisban tárolok. Ez külön CSS állományként, dinamikusan van kiszolgálva és a cikk HTML-ében hivatkozva.)

Emellett pedig be kell látni, hogy arányában ritka az az eset, amikor nem inkább tartalmi kérdésről van szó, tehát nem absztrahálható a dolog (tényleg csak dőltté akarom tenni ezt az egy elemet, csak ebben a bejegyzésben, vagy valójában hangsúlyozni akarok valamit?).
16

Egységes megjelenés

Adam · 2008. Dec. 17. (Sze), 23.32
Szerintem az eléggé gáz, ha egy cikkeket felvonultató -- tehát online újság -- oldal nem egységes stílust képvisel megjelenésében, tehát nem elég a teljes oldalhoz egy, azaz egy darab CSS. Pláne rossz megoldás, ha a CSS-t dinamikus feil-ként szolgálják ki. Akkor már vagy előgenerálni statikus file-ra -- pl a cikk azonosítójával --, vagy inline <style /> elemben elhelyezni a forrásban.

Ami meg az utolsó bekezdésedet illeti, szerintem ha valamit ki akarsz emelni, a szemantikus jelölés mellett globális stílusjelölést kell alkalmazni, tehát helye lesz a globális CSS-ben. legrosszabb esetben is egy <strong class="important" /> jelöléssel.

Összegezve: szerintem igenis van létjogosultsága -- sőt, megkockáztatom -- mindig használható megoldás az, hogy a CSS egy (több) statikus file-ban van és nem használ az ember inline CSS-t. Ugyanez érvényes a JS-re is -- mivel ha máshogy nem, ID-val ellátott elemre hivatkozva --, diszkréten meg lehet oldani minden JS-es műveletet és funkciót.
26

Nem

Joó Ádám · 2008. Dec. 21. (V), 00.11
„Szerintem az eléggé gáz, ha egy cikkeket felvonultató -- tehát online újság -- oldal nem egységes stílust képvisel megjelenésében, tehát nem elég a teljes oldalhoz egy, azaz egy darab CSS.”

Tehát pl. az illusztrációk minden egyes cikknél ugyanott kell elhelyezkedjenek. Vagy nem lehet mondjuk a cikk igényeinek megfelelően kialakítani egy táblázatot, nem lehet szemléltetésképp apró célalkalmazást, JS-es animációt elhelyezni a cikkben sít.?

„Pláne rossz megoldás, ha a CSS-t dinamikus feil-ként szolgálják ki. Akkor már vagy előgenerálni statikus file-ra -- pl a cikk azonosítójával --, vagy inline <style /> elemben elhelyezni a forrásban.”

Miért is? Ha állítasz valamit, támaszd is alá, mert ha nem, akkor az élő bizonyíték vagy rá, hogy milyen mereven kapaszkodnak az emberek alaptalan megszokásokhoz ;)

Itt a Laboron is felmerült már, hogy nem mindig lehet értelmes, szemantikus azonosítóval vagy osztállyal ellátni elemeket, mert van, amikor tényleg csak a formázás okán akarunk kiválasztani valamit – ez sajnos a technológia fogyatékossága.
30

Dinamikus CSS rossz

Adam · 2008. Dec. 21. (V), 21.29
Tehát pl. az illusztrációk minden egyes cikknél ugyanott kell elhelyezkedjenek.

Nos, egy illusztráció egy cikkben kb. három féle képpen lehet elhelyezve:
- balra rendezve
- középre rendezve
- jobbra rendezve
Vagy nem lehet mondjuk a cikk igényeinek megfelelően kialakítani egy táblázatot...

Egy táblázat egy táblázat (<table>) csak, és minden részére külön jelölő lehetőséget ad a HTML:
- összegzés (<caption>);
- fejléc (<thead>), tartalmi rész (<tbody>) és lábrész (<tfoot>);
- sorok (<tr>) és cellák (<th> és <td>).
...nem lehet szemléltetésképp apró célalkalmazást, JS-es animációt elhelyezni a cikkben...

Dehogynem, viszont a diszkrét JS szintúgy generálhatja a számára szükséges stílusokat, hiszen ahhoz is tartozik.
Miért is? Ha állítasz valamit, támaszd is alá, mert ha nem, akkor az élő bizonyíték vagy rá, hogy milyen mereven kapaszkodnak az emberek alaptalan megszokásokhoz ;)

Mert csak felesleges terhelést rak a szerverekre. Minden egyes cikk megnlzésekor szerveroldalon összerakni a megfelelő CSSt és azt kiszolgálni. Nem látod, hogy ez miért rossz? Felesleges PHP futtatás, felesleges adatbáziskapcsolat kiépítés, lekérdezés futtatása, stb. Mellesleg néha elég lenne, ha a megfelelő emberek, akiknek mondják a véleményt elgondolkoznának, és ők maguk is jönnének rá, hol és hogyan rontják el, és -- hogy idézzelek, -- mereven kapaszkodnak a rossz megszokásokhoz, amiket kitaláltak. Smiley-t nem írok, mert csak elveszítené az írásom a komolyságát.
3

„Google has some crazily

Fraki · 2008. Dec. 14. (V), 15.06
„Google has some crazily talented JavaScript coders, as well as geniuses in other fields, but when it comes to HTML and CSS, they are actually somewhat infamous amongst talented Interface Developers.”

Aha, tehát a tehetséges interface-fejlesztők legnagyobb problémája az, hogy a google stílusa inline vagy nem inline... Azért is hülyeség ez az érvelés, mert a google html-stratégiája nyilván nem tehetség, hanem koncepció kérdése. Arról meg tessék megkérdezni őket.
5

Gyors oldalbetöltés

Adam · 2008. Dec. 15. (H), 16.46
A google-nél a stratégia az, hogy az egyénhez a lehető leggyorsabban eljusson a tartalom. Egy korábbi felmérés során a google esetében az oldal 0,1ms-es lassulása ha jól emlékszem 3-5%-os látogatottság-csökkenést okozott. Még mindig gyorsabb az inline CSS-ek letöltése mindig, mint minden egyes oldalletöltéskor + CSS és image file(ok) betöltése.
7

Ezek az információk honnan

Fraki · 2008. Dec. 15. (H), 18.57
Ezek az információk honnan vannak, amit a google-ról és a yahoo-ról mondtál?

Egyébként a cikknek kis túlzással annyi relevanciája van, mintha a kódolási konvenciókat kérném számon egy minified js-en. Vagyis általában igaz, de felsőbb szintű keretrendszerek és szempontok felülírhatják.
17

Yahoo - High Performance Web Pages prezentáció

Adam · 2008. Dec. 17. (Sze), 23.52
Ezen a címen érhető el.

Az, hogy kódolási konvenciókat számonkérni, igenis van létjogosultsága, pláne ha csapatban dolgoztok. Az pedig, ha egy keretrendszer miatt feladd azt az elvet, amit a cikk is boncol, illetve régóta egy bevett ajánlás, egy nagy hiba. Pont a kliensoldalt tépázni/büntetni egy rosszul megtervezett keretrendszer miatt, nagyon is rossz döntés és gyakorlat!
18

Köszi, így már azért más, a

Fraki · 2008. Dec. 18. (Cs), 07.06
Köszi, így már azért más, a 0,1 ms =/= 100 ms. És a yahoo maga nem csinálja ezt az utántöltősdit, ez csak Souders egy felvetett ötlete. Kifejtve itt, ahol elmondja, hogy az inline kódok egyedi stíluslappal rendelkező nagyobb nyitóoldalakon indokoltak sebesség szempontjából (ezt csinálja a yahoo.com).

És Souders még mindig csak teljesítményről beszélt, tehát önmagában e szempontból sem százas érvényű az elv. Semmi architekturális vagy egyéb szempont, mint ami a linkelt cikkben van. Pl. egy keretrendszer rendermechanizmusa eredményezhet egy csomó inline szkriptet és stílust (l. helperek). És amikor ilyen optimalizációkról meg refaktorálásról beszélünk, ne feledjük, hogy a kliensoldali teljes válaszidőnek mindössze 5%-a a HTML-fetch (Souders-sorozat, 1. poszt).

„Az, hogy kódolási konvenciókat számonkérni, igenis van létjogosultsága”

Egy minified js-en?
19

framework is lehet okosabb

Hodicska Gergely · 2008. Dec. 18. (Cs), 13.19
Pl. egy keretrendszer rendermechanizmusa eredményezhet egy csomó inline szkriptet és stílust (l. helperek).
Ami nem feltétlenül szerencsés, és pont azért keretrendszer, hogy lehessen okosítani rajta.

És amikor ilyen optimalizációkról meg refaktorálásról beszélünk, ne feledjük, hogy a kliensoldali teljes válaszidőnek mindössze 5%-a a HTML-fetch (Souders-sorozat, 1. poszt).
Hát igen, pont ezért fokozottan fontos, hogy ez a rész is rendbe legyen téve. Nálunk pl. ez még várat magára. :(
20

Hogy az 1% (mondjuk az inline

Fraki · 2008. Dec. 18. (Cs), 17.41
Hogy az 1% (mondjuk az inline kód a html 1/5-e) sok-e az adott helyzetben, vagy nem, az relatív.

Ami nem feltétlenül szerencsés
Az ellentétje sem feltétlenül szerencsés, és nem is ismerek ilyen keretrendszert. A helperek lényege szerintem a szerveroldali redundanciamentesítés kliensoldali redundanciaképzéssel. Markup esetén kevésbé eredményez redundanciát, szkript/style esetén inkább, a helper meg nem vizsgálja, hogy mi van benne, és nyitottnak kell lennie arra is, hogy az elem véletlenül generált egyedi kombináció lesz, akkor meg egyenesen hátrány a külön fájlba szervezés.

És ott vannak még az embed kódok flashtől analyticsig...

Persze, a teljes redundanciamentesség általában egy jó dolog, ebben egyetértünk, csak szerintem nem feltétlenül szükséges törekedni rá. És még úgy is lehet létjogosultsága az inline kódnak (l. Souders).
21

helper

Hodicska Gergely · 2008. Dec. 20. (Szo), 13.54
A helperek lényege szerintem a szerveroldali redundanciamentesítés kliensoldali redundanciaképzéssel.
A helper lényege pont annyi, mint bármilyen függvénynek.

Markup esetén kevésbé eredményez redundanciát, szkript/style esetén inkább, a helper meg nem vizsgálja, hogy mi van benne, és nyitottnak kell lennie arra is, hogy az elem véletlenül generált egyedi kombináció lesz, akkor meg egyenesen hátrány a külön fájlba szervezés.
Általában azért egy oldal ugyanúgy néz ki, de ettől függetlenül is megoldható lenne, hogy a helperek által behozott dolgok is végül egy külön fájlban végezzék.
22

A helper lényege pont annyi,

Fraki · 2008. Dec. 20. (Szo), 16.55
A helper lényege pont annyi, mint bármilyen függvénynek.
Szerveroldalon.

Általában azért egy oldal ugyanúgy néz ki, de ettől függetlenül is megoldható lenne, hogy a helperek által behozott dolgok is végül egy külön fájlban végezzék.
De ha az elem teljesen egyedi, akkor ezzel az egésszel mit nyerek? Az elemlétszám is random. Az oldalak általában valóban ugyanúgy néznek ki, csak a helper nem stílus meg funkció meg markup alapján absztrahál, hanem kódblokk alapján. Ezért mondom, hogy természetes jellemzője, hogy kliensoldalon redundanciát képez.
23

miért természetes?

Hodicska Gergely · 2008. Dec. 20. (Szo), 17.45
Szerveroldalon.
Erről beszélünk.

Ezért mondom, hogy természetes jellemzője, hogy kliensoldalon redundanciát képez.
Miért lenne természetes? Úgy programozod le, ahogy akarod, abszolút csak döntés kérdése.
24

Azért természetes, mert a

Fraki · 2008. Dec. 20. (Szo), 19.16
Azért természetes, mert a helper nem stílus meg funkció meg markup alapján absztrahál, hanem kódblokk alapján. Ha a helper nem így viselkedne, akkor nem is volna szükség rá. Minden szájtot úgy programozok le, ahogy akarok, ergó helpert sem kötelező használnom.
25

???

Hodicska Gergely · 2008. Dec. 20. (Szo), 22.44
Azért természetes, mert a helper nem stílus meg funkció meg markup alapján absztrahál, hanem kódblokk alapján. Ha a helper nem így viselkedne, akkor nem is volna szükség rá.
Ezt hogy érted?
28

Kliensoldali kódblokkot lehet

Fraki · 2008. Dec. 21. (V), 02.03
Kliensoldali kódblokkot lehet vele rövidíteni, makrószerűen.

Szerk. De ha te is elmondod, hogy szerinted mit csinál egy helper (azon kívül, hogy egy függvény), akkor lehet, hogy könnyebben meg tudjuk érteni egymást.
29

miért inline?

Hodicska Gergely · 2008. Dec. 21. (V), 18.49
Ez ok, de továbbra sem értem, hogy miért kéne ennek feltétlenül inline kódot generálnia, ez csak megvalósítás kérdése.
31

Miért, te hova rakod a

Fraki · 2008. Dec. 22. (H), 15.01
Miért, te hova rakod a markupot, js-fájlba? Én arról a funkcióról beszélek, ami jelenleg az ismert keretrendszerekben helper néven fut, azok meg tudtommal nem választják szét a helperen belül a különféle kódokat. Ha nem választják szét, akkor annak a HTML-ben van a helye, nem? Vagy a CSS-fájlban? Ha meg szétválasztom, akkor nincs is szükségem helperre, akkor van egy div, meg van egy rárakott JS-viselkedés (azaz kliensoldalon van redundanciamentesítés). Tehát úgy érzem, hogy – legalábbis részben, mert mondjuk egy olyan policyt el tudok képzelni, nem egyetértve vele, hogy helpert csak markupra szabad használni – magával a helperkoncepcióval vitatkozol.

Szerintem vagy hivatkozz, vagy részletezd az elképzelésed, és majd eldöntöm, jó-e az nekem; mert most ez a kérdezz-felelek kb. azon a szinten megy, hogy "miért ne lehetne minden szempontból tökéletes szoftvert írni? Abszolút csak döntés kérdése." (OFF: ezt a drupalos behúzást kb. a 4-5. szintnél korlátozni kéne, vagy kikapcsolni.)

A helper maga egy döntés, amellett, hogy nem kliensoldalon kezelek kliensoldali redundanciát, hanem szerveroldalon.
32

"a helper vajon mi?"

Hodicska Gergely · 2008. Dec. 22. (H), 16.42
az ismert keretrendszerekben helper néven fut, azok meg tudtommal nem választják szét a helperen belül a különféle kódokat.
Ez nem definíció, hanem egy megvalósítási mód, kb. így egyszerű megcsinálni, de ez nem szabályszerű, és messze nem "természetes jellemző", erre akartam csak utalni.

Tehát úgy érzem, hogy – legalábbis részben, mert mondjuk egy olyan policyt el tudok képzelni, nem egyetértve vele, hogy helpert csak markupra szabad használni – magával a helperkoncepcióval vitatkozol.
Egyrészt nem ezzel vitatkozom, másrész nem vitatkozom ;), csak felvetettem, hogy lehet másképp is, nem kell feltétlenül így.

mert most ez a kérdezz-felelek kb. azon a szinten megy, hogy "miért ne lehetne minden szempontból tökéletes szoftvert írni?
Csak kíváncsi lettem volna, hogy miért gondolod természtes jellemzőnek, de erre nem igazán lett válasz (az, hogy így szokott lenne a keretrendszerekben, azt nem érzem igazán érvnek, a "kódblokk alapján absztrahált" meg nem értettem).

Szerintem vagy hivatkozz, vagy részletezd az elképzelésed
A helper is ahogy írtam egy függvény, ami azt jelenti, hogy van valamilyen függősége (paraméter lista - változó rész), illetve a belső működési logikája (ez már fix, ismétlődő). Ezek után simán lehet egy olyan framework-öt is kialakítani, ahol az oldal kódjába csak a markup kerül be, meg esetleg egy minimális init rész: paraméter lista, de ez utóbbira is nyújthat a keretrendszer egy mechanizmust, hogy kód bejuthasson egy bootstrap fájlba.

A helperek közös részének CSS kódja lehet egy külön CSS-ben, a JS része egy külön JS fájlban, de lehet az is, hogy helper családok összevont kódja van CSS-ben és JS-ben. Amikor egy helperre hivatkozol, akkor jelzi a frameworknek, hogy milyen JS, CSS szükséglete van. Ezeknek a behúzását ezután a framework biztosítja. Itt megint lehet pl. egy olyan dolog, hogy az oldal lekér mondjuk egy ilyesmi URL-t: http://example.org/js/jsx;jsy;jsz_versionNumber.js. Ezt a fájlt egy 404 kezelő hozza létre, a versionNumber pedig a résztvevő fájlok revíziószáma közül a legmagasabb.

A JS, CSS "igények" megfelelő csoportosításával sok oldal esetén elég szépen le lehet max pár fájllal fedni a szükségletet, és máris sikerült kiszervezni őket az oldal kódjából. Ezekre a fájlokra megadhatom, hogy 10 év múlva járnak csak le, nem fogja a böngésző újra tölteni őket, alap esetben feltételes kérést sem fog küldeni.

Akár ez a fenti nem is olyan sok melóval simán megvalósítható. Átlag keretrendszben nem nagyon lesz ilyen benne, mert itt eléggé számítanak a konkrét felhasználási esetek ahhoz, hogy tényleg nyerj ezzel, és ne csak behozz egy felelsleges bonyolítást a rendszeredbe. Ezenkívül sok oldal esetén valszeg nincs is akkor jelentősége. De egy nagy látogatottságú oldal esetén teljesen legitim optimalizációs technika lehet.

De pl. mi is használtunk olyan template kezelést, ahol volt egy fordítási fázis, aminek az eredménye egy olyan template volt, ahol már az include-ok (blokk, komponens stb.) feloldásra kerültek, valamint azok a szövegek is le lettek fordítva, amik nem tartalmaztak változókat. Egy ilyen folyamatban is lehet trükközni a helperekkel elég sokat.

A helper maga egy döntés, amellett, hogy nem kliensoldalon kezelek kliensoldali redundanciát, hanem szerveroldalon.
Nem kliens oldali redundaciát kezelsz a helperekkel, hanem az ismétlődő kódokat zárod egy függvénybe. A nem template kódjaidban is ezért használsz függvényeket, objektumokat, mert a DRY elv szerint jársz el, a helper is csak erről szól. Az általam vázolt megoldások pont arról szólnak, hogy nem áldozom fel ezt a teljesítmény oltárán, hanem egy kis többlet munkával ötvözhető a kettő.
33

A "kódblokk alapján

Fraki · 2008. Dec. 23. (K), 07.10
A "kódblokk alapján absztrahált" talán tényleg nem a legjobb megfogalmazás. Onnan jött az absztrahálás szó, hogy ugye a függvényekkel valami ilyesmit csinálunk, csak itt kliensoldali kódegyüttest szerveroldalon fogunk össze. De egyébként nem olyan rossz szó; ha van egy csekboxom, aminek van egy viselkedése, és ennek szerveroldalon adok egy nevet, meg ellátom néhány paraméterrel, akkor ez ugye valahol absztrakció.

Nem kliens oldali redundaciát kezelsz a helperekkel, hanem az ismétlődő kódokat zárod egy függvénybe.
Ismétlődő kliensoldali kódokat. Az ismétlődő kliensoldali (meg akármilyen) kód: redundancia. (Az absztrakció meg redundanciakezelés.)

A koncepció és megvalósítás témájában már volt egy vitánk. Szerintem hogy hol a határvonal, az esetenként meg nézőpontonként változó; ahol te most meghúzod, az nekem önkényesnek tűnik, illetve nem tudom, mi szükség van egyáltalán itt ezt szétválasztani. Amit én a helperek (illetve azok koncepciója) alatt értek, az az, ami a létező megvalósításokból kiolvasható. Mert feltételezem, hogy a koncepció van megvalósítva, nem pedig spekulálok, hogy igazából egy még jobb koncepció van véletlenül mindenhol lustán megvalósítva.

A te leírásod alapján nem tudom, mire gondoljak. Egyrészt nem világos teljesen (például mi az, hogy "a helperek közös része"?), másrészt ezt jó volna megvalósítva is látni, vagy ha leírás szintjén is, de legalább egy létező keretrendszerben alkalmazva (pontosan hogy is nézne ki a függvényhívás stb.). Akkor tudnám csak eldönteni, hogy ez most igazából a javára válik-e a rendszernek (vagy nekem), vagy ahogy te is írod, nem is biztos. És mi van, ha én átlagos keretrendszert akarok használni? (Egyébként a keretrendszerek általában átlagosak, már ha az átlagos alatt most nem minősítést értünk.)

Természetesnek meg azért érzem ezt az "átlagos", vagy "lustán megvalósított", vagy "lustán kigondolt" (nekem mindegy) helper-viselkedést, mert én még leragadtam ott, hogy ha egy markupról leválasztom a szkriptet, akkor onnantól kezdve mi szükségem helperre? A markup megy a html-be, a szkript meg a js-könyvtárba. Most túlzok, mert csak markupokra is jók a helperek.

Szerk. Kénytelen vagyok hozzátenni megint, hogy ez a fórumforma alkalmatlan 10 válasznál nagyobb mélységű párbeszéd megjelenítésére. Kíváncsi vagyok, meddig szűkülnek a dobozok.
8

Nem igaz

Joó Ádám · 2008. Dec. 15. (H), 22.23
Az első látogatás után a külön állományba helyezett JS és CSS gyorsítótárból lesz kiszolgálva, így a HTML mérete csökken, ami gyorsabb kiszolgáláshoz vezet.
11

Cache ellenőrzési idő

Jano · 2008. Dec. 16. (K), 12.16
Ne feledkezz meg arról, hogy ilyenkor is megy a szerver felé egy kérés, hogy van-e frissebb verzió az eltárolt fájlokról. Ezek a kérések mind lassítják a betöltést.
13

ez így nem pontos

Hodicska Gergely · 2008. Dec. 16. (K), 19.58
Attól függ, hogy milyen headerekkel szolgálod ki ezeket a fájlokat, illetve részben attól is, hogy csak simán betölti a user az adott oldalt, vagy pedig force reloadot nyom.

Persze attól még pontatlan, amit Cleriak írt.
27

Adott eset

Joó Ádám · 2008. Dec. 21. (V), 00.18
Igaz, de még így is nyerhetünk vele. Lásd Felhőt, nem feltétlenül megy kérés, másrészt pedig lehet, hogy jobban kijöhetünk ezzel, mintha minden kérésnél lejön a HTML-lel együtt a cucc.
4

első oldal betöltődésének optimalizációja

Hodicska Gergely · 2008. Dec. 14. (V), 21.10
Egy fontos "használati eset" meg sincs említve a cikkben: egy oldal első betöltődésre történő optimalizáció. Ilyenkor összességében jobb lehet a felhasználói élmény ha inline CSS-t, JS-t vagy akár képet használunk. Szóval sulykolni is ésszel kell, tudatosan. ;)
6

Yahoo módszere...

Adam · 2008. Dec. 15. (H), 16.48
...az, hogy első körben inline töltik be a JS és a CSS-t, majd JS segítségével a teljes oldal betöltése után a külső file-okat letöltik (beágyazzák), így következő alkalommal már nem kell azokat inline elhelyezni, és mivel az Expire header eléggé távoli dátumra mutat, ezért a böngésző le sem fogja kérdezni, szimplán cache-ből olvassák majd ki azt, így a következő oldalak megjelenése ugyanolyan gyors lesz, mint az elsőé.
10

;)

Hodicska Gergely · 2008. Dec. 16. (K), 00.50
Ádám, azt a könyvet még én rendeltem meg. ;)
15

A könyvet nem olvastam...

Adam · 2008. Dec. 17. (Sze), 22.22
...még! Bár ahogy átfutottam, ugyanaz, mint a Yahoo YSlow prezentációjuk volt.
12

Egészen pontosan

kalamona · 2008. Dec. 16. (K), 15.34
Egészen pontosan melyik könyvet is? :)

üdv!

I

ui: véletlen nem a szálba került...
14

High Performance Web Sites

Hodicska Gergely · 2008. Dec. 16. (K), 20.03
http://oreilly.com/catalog/9780596529307, de érdemes Steve Souders saját honlapját megnézni, több videó is fent van különböző előadásairól, készülő új könyvéről, ami ezt a témát boncolgatja tovább. Valamint a yslow blogját érdemes végigolvasni.
34

re: A "kódblokk alapján

Hodicska Gergely · 2008. Dec. 23. (K), 12.27
Megoldottam a behúzást. ;)

Onnan jött az absztrahálás szó, hogy ugye a függvényekkel valami ilyesmit csinálunk
Szerintem meg elég rossz szó, egy helper nem absztrahál. Lásd lejebb.

Az absztrakció meg redundanciakezelés.
Hát nagyon nem. Az absztrakció során egy bonyolultabb modelt leegyszerűsítesz úgy, hogy az aktuális nézőpont szempontjából felesleges dolgokat kihagyod annak érdekében, hogy kezelni tud a bonyolultságot. Egy függvény csak egy helyettesítő név egy ismétlődő kódra, de a függvény helyére nyugodtan betehetnéd a függvény kódját, a helper is csak annyit csinál, hogy nem ismételsz meg a template-ben egy adott kódot, hanem kiteszed egy helperbe, és a helpert használod helyette.

A koncepció és megvalósítás témájában már volt egy vitánk. Szerintem hogy hol a határvonal, az esetenként meg nézőpontonként változó; ahol te most meghúzod, az nekem önkényesnek tűnik, illetve nem tudom, mi szükség van egyáltalán itt ezt szétválasztani. Amit én a helperek (illetve azok koncepciója) alatt értek, az az, ami a létező megvalósításokból kiolvasható. Mert feltételezem, hogy a koncepció van megvalósítva, nem pedig spekulálok, hogy igazából egy még jobb koncepció van véletlenül mindenhol lustán megvalósítva.
Szerintem totál túlmisztifikálod ezt a "helper koncepció" dologot, nem egy olyan bonyolult dolog ez: DRY (Don't Repeat Yourself). Ennyi. Van valamennyi kódod, amit alap esetben ismétlődne a templatekben, ehelyett fogod, berakod egy helperbe, és azt használod a templatekben.

A te leírásod alapján nem tudom, mire gondoljak. Egyrészt nem világos teljesen (például mi az, hogy "a helperek közös része"?), másrészt ezt jó volna megvalósítva is látni, vagy ha leírás szintjén is, de legalább egy létező keretrendszerben alkalmazva (pontosan hogy is nézne ki a függvényhívás stb.).
A közös rész, az ami nem függ a helpernek átadott paraméterektől. A helper meghívása nem néz ki másképp, a helper belseje lesz bonyolultabb, illetve a benne használtó infrastruktúra bővebb.

Akkor tudnám csak eldönteni, hogy ez most igazából a javára válik-e a rendszernek (vagy nekem), vagy ahogy te is írod, nem is biztos. És mi van, ha én átlagos keretrendszert akarok használni?
Semmi, használd nyugodtan.
35

Hát pedig már tényleg kezdtem

Fraki · 2008. Dec. 23. (K), 18.33
Hát pedig már tényleg kezdtem kíváncsi lenni, meddig szűkülnek a dobozok. :)

Most én is mondhatnám, hogy túlmisztifikálod az absztrakció fogalmát. Tágabb értelemben bármi, aminek során nevet adsz valaminek, már absztrakció (elvonatkoztatás). Így a helper és minden függvény is az. Szűkebb értelemben csak a parametrizálható függvény absztrakció.

Akkor ott tartunk, hogy én a létező helper megvalósításokról beszélek, amik szerveroldalon szárítanak (ez a huszadik terminusunk ugyanarra a dologra) kliensoldali kódot, és kliensoldalon nem DRY outputot eredményeznek. Neked van egy saját helper-elképzelésed, ami ennél bonyolultabb, és szerinted sem biztos, hogy egy általános keretrendszerben helye van.

Ebből következik, hogy létezik legitim eset arra, hogy kliensoldalon inline kód jöjjön létre szerveroldali architekturális szempontok miatt.

A természetes/nem természetes kérdéshez: a te megoldásodnak is nyilvánvalóan csak akkor van értelme, ha kliensoldalon is DRY outputot ad. Különben tök mindegy, hogy milyen js fájlba szervezed ki a szkriptet, ha a helper által megjelenített elemnek random előfordulásai vannak az oldalon. Viszont ha én kliensoldalon teljesen DRY megoldásban gondolkodom, akkor valószínűleg azt fogom csinálni, hogy egyszerűen beleírok minden viselkedést a js-fájlba, helpert meg max. csak markupra fogok használni, tehát akkor sincs szükségem a jelen megvalósításoknál bonyolultabb helpermechanizmusra.
36

absztrakció

Hodicska Gergely · 2008. Dec. 23. (K), 21.22
Most én is mondhatnám, hogy túlmisztifikálod az absztrakció fogalmát. Tágabb értelemben bármi, aminek során nevet adsz valaminek, már absztrakció (elvonatkoztatás). Így a helper és minden függvény is az. Szűkebb értelemben csak a parametrizálható függvény absztrakció.
Mondhatod, de akár utána is olvashatsz, hogy programozásban mire használják az absztrakció fogalmát. Tök jó, amikor kb. axióma szintű dolgokról kell vitatkozni veled. :-/ (Le is fogok szokni róla, mert általában értelmetlen.)

Akkor ott tartunk, hogy én a létező helper megvalósításokról beszélek
Te lehet. Részemről ott tartunk, hogy van olyan hogy helper, amit adott céllal (kódismétlés megszüntetése) használnak, és ezt meg lehet valósítani többféleképpen. Plusz a "meglévő megoldásokról" annyit, hogy pl. symfony esetén már most is tudnál ilyen helper csinálni (tudsz az oldalhoz programozottan JS-t, CSS-t hozzáadni).

Neked van egy saját helper-elképzelésed
Rövid keresés: http://blog.solnic.eu/2007/10/30/why-javascript-helpers-in-rails-are-evil, úgy látszik más is gondolt erre. És ez tök logikus is, hiszen egyértelműek azok az eszközök, amikkel egy oldalt frontend oldalon optimalizálni lehet, és ha ez fontos valakinek, akkor a helpereit is ehhez igazítja.

és szerinted sem biztos, hogy egy általános keretrendszerben helye van.
Ebből következik, hogy létezik legitim eset arra, hogy kliensoldalon inline kód jöjjön létre szerveroldali architekturális szempontok miatt.
A nem biztos abból fakad, hogy döntés kérdése, hogy megér-e valakinek többlet munkát ez a fajta optimalizáció. Egy top site esetén egyértelműen megéri, mindent meg kell tenni azért, hogy az oldal a lehető leggyorsabban töltődjön be. (Persze észszerűség határain belül, ha sok munkával 100 byte-ot tudok kiszervezni külső fájlba, akkor nem éri meg a szenvedést.)

a te megoldásodnak is nyilvánvalóan csak akkor van értelme, ha kliensoldalon is DRY outputot ad.
Erről volt szó.
37

Absztrakció: ezen

Fraki · 2008. Dec. 24. (Sze), 03.50
Absztrakció: ezen túlléphetünk. Mondtam, hogy nem a legjobb megfogalmazás, amellett, hogy az attól még absztrakció, hogy van még ötven másik eset, amire használják. No meg ugye, mint mondtam, van már húsz terminusunk ugyanarra a dologra, ez egy kényszerátfogalmazás volt, én a redundanciával kezdtem (Solnica is ezt használja, no meg a DRY-t). Ebben a kontextusban, gondoltam, nem okoz majd gondot, hogy nem az OOP elmélet absztrakciójáról beszélek.

kell
Nem kell. (Én eleve azt nem értem, miért szoktál rá.)

Te lehet.
Kösz, hogy ezt meghagyod nekem, akkor ezt tisztáztuk.

úgy látszik más is gondolt erre
Ő sem pontosan arról beszél, amiről te. Inkább arról, amiről én a 35-ös hsz-ban (utolsó bekezdés 2. fele).

Szerk. Egyébként Solnica teljesen unobtrusive megoldása a szkriptes DOM-lekérdezések miatt szerintem még lassabb kimenetet eredményez, mint az inline példái.

pl. symfony esetén már most is tudnál ilyen helper csinálni
Gyanítom, hogy sok más keretrendszerben is tudnék olyat csinálni, ettől ez még a te elképzelésed(nek tűnik). Mindenesetre a symfony demoalkalmazását nézve én egyelőre csak azt látom, hogy a symfony gyári helperei ugyanúgy redundáns kimenetet adnak, mint a RoR-é.

Egy top site esetén egyértelműen megéri
Ezzel nem vitatkozom (és most nem beszélek helperről és keretrendszerről), csak annyit jegyzek meg, hogy ha jól értem, még nálatok sincs a prioritási lista élén.
38

prioritás

Hodicska Gergely · 2008. Dec. 24. (Sze), 04.37
Nem kell. (Én eleve azt nem értem, miért szoktál rá.)
Mert nem szeretem a pontatlan megfogalmazásokat. Csak azzal nem lehet mit ezdeni, ha "eldöntöd", hogy márpedig ez mégis így vagy úgy van. Ezért meddő a dolog. De nyugodtan használhatsz saját terminológiát, csak akkor ne csodálkozz ha valakinek nem tiszta.

ha jól értem, még nálatok sincs a prioritási lista élén.
Ennek folyománya van: ustream egy startup cég, mindenféle külső kényszerek beolyásolják a fejlesztéseket (pl. konkurencia, partnerek plusz még most a piaci helyzet is). Volt nem olyan rég egy nagy oldal redesign, de akkor kb. egy ember kapott az egészre két hetet, így nem volt idő rendesen megcsinálni. Közben ez a kis válság is bekavart, megváltoztak prioritások egyéb fejlesztések tekintetében, így nem volt idő a site-ot rendbe tenni, de ettől függetlenül abszolút fontos. Most jön egy újabb redesign, amire több időnk lesz, és ennek első legfontosabb része lesz a frontend rendbetétele.
39

Mert nem szeretem a pontatlan

Fraki · 2008. Dec. 24. (Sze), 06.54
Mert nem szeretem a pontatlan megfogalmazásokat. Csak azzal nem lehet mit ezdeni, ha "eldöntöd", hogy márpedig ez mégis így vagy úgy van. Ezért meddő a dolog. De nyugodtan használhatsz saját terminológiát, csak akkor ne csodálkozz ha valakinek nem tiszta.
Bocs, de most ehhez megint volna egy megjegyzésem, attól függetlenül, hogy a félreértés teljesen korrekt; a többi témát meg leokézhatjuk (részemről). Szóval először is ez egy mellékszál. Másodszor attól, hogy ennek a szónak vannak programozástechnikai alkalmazásai (terminus technicus), még van egy hétköznapi értelme, amiben fel lehet használni egy történetesen fejlesztői témájú vitában. Ez történt itt is, nekem volt egy elsődleges megfogalmazásom, amit elismételtem egy-kétszer, nem jött be, hát megpróbálkoztam ezzel. Még jó, hogy a DRY-jal sikerült szinkronba kerülni valamelyest (én meg azzal nem tudtam mit kezdeni, hogy "függvény", de most ez más kérdés).

De hadd magyarázzam el mégegyszer, miért is absztrakció. Ha van egy elemem, ami huzigálható az egérrel, és én ezt a huzigálható viselkedést egy js-fájlban megírom, akkor a viselkedést elvonatkoztatom a markuptól. Itt nincs helper. Itt van egy markup (jó, annak lehet helpere), meg van egy js-könyvtár (vö. Solnica). A helperrel meg (ez most nem a te helper fogalmad, sorry, hanem az én önkényes és eldöntött helper fogalmam, ami az ismert megvalósításokon alapul, és nem azon, amit még te sem láttál) a markupomat meg a ráírt viselkedésemet egy kódblokkba teszem, és szerveroldalon ezt a kevert kódblokkot elvonatkoztatom. És igen, itt DRY-ról meg redundanciáról van szó, és mégis ugyanarról.

Na de boldog karácsonyt.
40

függvény

Hodicska Gergely · 2008. Dec. 24. (Sze), 14.23
én meg azzal nem tudtam mit kezdeni, hogy "függvény"
Van a templatjeidben valamilyen ismétlődő kód. Nem fogod mindig ezt ismételgetni minden előfordulási helyen, hanem helyette kiteszed egy helperbe, a változó (paraméterezhető) részek lesznek a helper paraméterei, majd ahol használni szeretnéd, ott meghívod a helpert. Ebben mi az ami nem függvény?

De hadd magyarázzam el mégegyszer, miért is absztrakció.
Még hétköznapi értelemben sem jó a szó szerintem. Valaminek az absztrakciója pont azt jelenti, hogy elvonatkoztatsz a valami bizonyos nem fontos részeitől, és csak egyéb, az adott kontaxtusban fontos részekre koncentrálsz. A helper ezzel ellentétben nem csinál ilyet, pont annyit valósít meg, mint aminek a kiváltására létrehoztad (a huzogatós helper pontosan azt a kódot fogja generálni, amit akkor használnál, ha nem használnál helpert).

Na de boldog karácsonyt.
Viszont kívánom neked is, illetve minden kedves weblabor olvasónak! Na jó, a nem kedveseknek is, mégiscsak Karácsony van! ;) És szégyelje magát, aki ezt ma olvassa ;), és nem a családdal tojáslikört kortyolgat.
41

off

gex · 2008. Dec. 24. (Sze), 15.24
És szégyelje magát, aki ezt ma olvassa ;)

ezt a vitát olvasgatva pont az merült fel bennem, hogy nektek nincs jobb dolgotok? :D

boldog karácsonyt!
42

kimenő

Hodicska Gergely · 2008. Dec. 24. (Sze), 16.40
Fél 6-tól jön a Jézuska, addig még kimenőm van (család alszik). :) Január 7-én megy ki élesbe eddigi talán legfontosabb fejlesztésünk, így most még tesztelgetek.
43

Ebben mi az ami nem

Fraki · 2008. Dec. 27. (Szo), 23.20
Ebben mi az ami nem függvény?
Ebben minden függvény. Ami miatt nem tudtam mit kezdeni vele, az az, hogy ez triviális. A függvény egy tágabb fogalom. Olyan, mintha a számítógépes infrastruktúrában a billentyűzet lényegét azzal magyaráznám, hogy hát az is egy elektronikus eszköz: felvesz áramot, és jól átalakítja. Te egy nagyon lényeges pontot kihagysz ebből, nevezetesen hogy kliensoldali kódot helyettesítesz szerveroldalon, azaz az ismétlődés megmarad kliensoldalon. Ez a működés már elég ahhoz, hogy valamit helpernek nevezzünk (ellenben ha írok egy függvényt, az még csakúgy önmagában nem lesz helper, tehát ez kevés kritérium), és a létező helperek így is működnek. A te nem létező helpered nem így működik, de erre már elmondtam, hogy ha én kliensoldalon eleve szárítok (elvonatkoztatok viselkedést markuptól), akkor nem lesz már többé szükség helperre (vagy csak markup-helperre lesz szükség), hiszen az a viselkedés nem ismétlődve fog szerepelni egy js-fájlban.

Valaminek az absztrakciója pont azt jelenti, hogy elvonatkoztatsz a valami bizonyos nem fontos részeitől, és csak egyéb, az adott kontaxtusban fontos részekre koncentrálsz. A helper ezzel ellentétben nem csinál ilyet
Hogyne csinálna, a helper tartalma a nem fontos rész, az ő reprezentációja (függvénynév és paraméterek) a fontos.

a huzogatós helper pontosan azt a kódot fogja generálni, amit akkor használnál, ha nem használnál helpert
Na és? A tömörítés is absztrakció. Egyébként nem jellemező, hogy a helperek olyan kódot generálnak, melyre azt mondhatnánk, hogy a használatuk nélkül is ez születne. Ugyanis ha én nem használnék helpert, akkor a DRY elvet kliensoldalon "manuálisan" alkalmaznám. Itt jön be az a választás, a helper lényege, hogy a DRY-t szerveroldalon valósítjuk meg kliensoldal helyett, merthogy a keretrendszerekben elsősorban szerveroldalon kódolunk. Ez egy architekturális döntés.
44

goto -1

Hodicska Gergely · 2008. Dec. 28. (V), 00.45
A függvény egy tágabb fogalom.
A minden helper függvény az nem jelenti azt, hogy minden függvény helper. Szerintem ez nem bonyi.

de erre már elmondtam, hogy ha én kliensoldalon eleve szárítok (elvonatkoztatok viselkedést markuptól), akkor nem lesz már többé szükség helperre (vagy csak markup-helperre lesz szükség)
Nincs olyan, hogy helper, meg markup helper. Attól, hogy a JS kódodat külön fájlba szervezed, attól még az insertRichTextBox helperednek még valahogy érvényre kell juttatnia némi inicializációs kódot.

és a létező helperek így is működnek. A te nem létező helpered nem így működik
Próbáltam már utalni neked arra, hogy pl. akár symfony-ban LÉTEZŐ view funkcionalitással simán tudsz kevésbé rendundáns kimenetet generáló helpert készíteni.

Hogyne csinálna, a helper tartalma a nem fontos rész, az ő reprezentációja (függvénynév és paraméterek) a fontos.
Nem hiszem el, hogy nem látod (be?) a különbséget. Hagyjuk.

Itt jön be az a választás, a helper lényege, hogy a DRY-t szerveroldalon valósítjuk meg kliensoldal helyett, merthogy a keretrendszerekben elsősorban szerveroldalon kódolunk. Ez egy architekturális döntés.
Nincs ilyen, hogy szerver oldalon kliens oldal helyett. A helper egyetlen célja, hogy egyszerűbbé tegye az életed, amikor a templateket készíted. Az ismétlődő elemekre érdemes egy helpert írni, annak érdekében, hogy ha módosítanod kell, akkor elég legyen egy helyen megtenni. Az már valóban archtekturális döntés, hogy a helpereket hogyan valósítod meg.
45

A minden helper függvény az

Fraki · 2008. Dec. 28. (V), 04.28
A minden helper függvény az nem jelenti azt, hogy minden függvény helper.
Oké, tehát egy tágabb fogalommal magyaráztad a lényegét. Az ilyen definícióval nem tudok mit kezdeni.

Nincs olyan, hogy helper
Ezt nem is tudtam :)

meg markup helper.
Hogy mire utalok vele, ahhoz goto vissza.

Attól, hogy a JS kódodat külön fájlba szervezed, attól még az insertRichTextBox helperednek még valahogy érvényre kell juttatnia némi inicializációs kódot.
Kezdem elveszteni a fonalat, hogy most van-e helper vagy nincs, meg hogy milyen inicializációs kódot kell megoldanom velük. (Azt nem tudom kiszervezni a js-fájlba?)

Próbáltam már utalni neked arra, hogy pl. akár symfony-ban LÉTEZŐ view funkcionalitással simán tudsz kevésbé rendundáns kimenetet generáló helpert készíteni.
Oké, szeretnék látni konkrét példát, lehetőleg konkrét megvalósítással. Nekem egyelőre a symfonyban lévő helper ugyanolyannak tűnik, mint az összes többi keretrendszerben.

Nem hiszem el, hogy nem látod (be?) a különbséget. Hagyjuk.
Nem tetszik, hogy az absztrakció? Nem értem, mi a problémád.

Nincs ilyen, hogy szerver oldalon kliens oldal helyett. A helper egyetlen célja, hogy egyszerűbbé tegye az életed, amikor a templateket készíted. Az ismétlődő elemekre érdemes egy helpert írni, annak érdekében, hogy ha módosítanod kell, akkor elég legyen egy helyen megtenni. Az már valóban archtekturális döntés, hogy a helpereket hogyan valósítod meg.
Ismételjük magunkat, az első mondattól eltekintve egyébként egyetértek.

Arra azért kíváncsi volnék, hogy a redundáns markuptól eltekintve mit nem tudnék helper (tehát szerveroldal) nélkül DRY módon megvalósítani csak kliensoldalon. Tehát mi szükségem az általad vázolt okos helperre.
46

hópihe

Hodicska Gergely · 2008. Dec. 28. (V), 06.40
Kezdem elveszteni a fonalat, hogy most van-e helper vagy nincs, meg hogy milyen inicializációs kódot kell megoldanom velük. (Azt nem tudom kiszervezni a js-fájlba?)
Van egy helpered, ami JS-t igényel. A helpert vagy használod, vagy nem. Ha használod, akkor valamilyen módon hozzá kell kötni a HTML elemhez, amire vonatkozik (ez lenne az inicializálás).

Oké, szeretnék látni konkrét példát, lehetőleg konkrét megvalósítással. Nekem egyelőre a symfonyban lévő helper ugyanolyannak tűnik, mint az összes többi keretrendszerben.
Olvasd el a view fejezetet, elég jól le van írva minden.

Nem tetszik, hogy az absztrakció? Nem értem, mi a problémád.
Nincs problémám, csak azt gondolom, hogy elég egyértelmű mi a különbség egy függvény és az absztrakció között.

Arra azért kíváncsi volnék, hogy a redundáns markuptól eltekintve mit nem tudnék helper (tehát szerveroldal) nélkül DRY módon megvalósítani csak kliensoldalon.
Értelmetlen a felvetés, hiszen ha van egy optimális kimenet, akkor azt nyilván többféle szerver kóddal (helperrel vagy anélkül) el tudod érni.

Helper nélkül viszont nehezebben karbantarhatóvá válna a kód, hiszen az amúgy helper által keretbe foglalt kód több helyen jelenne meg a rendszerben. És mégegyszer: a helpert azért használod, hogy a kód könyebben karban tartható, az egy másodlagos szempont, hogy az helper kimenetét optimalizálod vagy sem.

Tehát mi szükségem az általad vázolt okos helperre.
Nincs szükséged, csak felvetettem (mint lehetséges megvalósítás), amikor arról volt szó, hogy a helper szükség szerűen (természeténél fogva) redundáns kódot eredményez.