Headjs – ultimátní řešení pro načítání javascript z jakékoliv šablony bez beforeRender i z Controlu

Filip Procházka

Zdravím,
http://headjs.com/ je šikovná knihovna na načítání js souborů
a pokud ty benchmarky nelžou, tak načítání je rychlejší zhruba 5–10× což je docela síla.

Tak jsem si řekl, že si na to udělám pěknou komponentu https://gist.github.com/735345

kterou když inicializuji

	protected function createComponentHeadjs($name)
	{
		$headjs = new Kdyby\Component\Headjs($this, $name);
		$headjs->package = Kdyby\Component\Headjs::PACKAGE_MIN; // výchozí hodnota
		$headjs->javascriptDir = $headjs->template->basePath.'/js';

		// jak mě to napadlo, nevím, ale je to tam... volitelně
		$headjs->cache = Nette\Environment::getCache('Kdyby.Js');

		// přidám si nějaké výchozí, abych na ně v šabloně nezapoměl
		$headjs->addScript('jquery-1.4.2.min.js');
		$headjs->addScript('netteForms.js');

		return $headjs;
	}

budu moct takhle pěkně volat v šabloně

	{capture $onready}
	{*
		psát to do uvozovek do makra control by vypadalo určitě hrozně :)
		jediná nevýhoda je syntax highlight...
	*}
		function () { alert("all loaded"); }
	{/capture}

	{control headjs "jquery.jcarousel.min.js", "front.js", $onready}

	{control headjs "jquery.jcarousel.min.js", "front.js"}

	{control headjs "something.js"}

vygeneruje mi následující kód

<script type="text/javascript" src="/js/head.min.js"></script>
<script type="text/javascript">
	head.js("/js/jquery-1.4.2.min.js", "/js/netteForms.js", "/js/jquery.jcarousel.min.js", "/js/front.js", function () { alert("all loaded"); });
</script>


<script type="text/javascript">
	head.js("/js/something.js");
</script>

protože headjs script přidá do hlavičky automaticky znovu a vůbec mu nevadí, jestli už je načtený.

Mně osobně velice nevyhovuje Webloader, protože se mi nelíbí jak to vytváří další soubory s javascriptem na základě toho, čím to nakrmím. Protože když změnim nějaký soubor, něco malinkého přidám, vytvoří to novou cache se všemi ostatními, které patří do konkrétní stránky a úplně celý kód se stahuje znovu, to je přece zbytečné! Já chci přidat jen jeden soubor a kvůli němu budu stahovat celé jQuery a všechny další knihovny znovu? Ale dost nářků, komu to vyhovuje, masochizmu zdar! :)

Webloader je samozřejmě super utilitka, ale každý máme jiné potřeby a myslím, že jsem dokonce i vidět přepínátko na vypnutí zabalování javascriptů do jednoho souboru, ale to je na jinou diskuzi

Další věc je, že Webloader většina lidí asi použív s HeaderControlem. Pokud chci mít specifické scripty pro nějakou komponentu tak to všecko dohromady pro svoje vypsání vyžaduje berličky jako je beforeRender, že? S Headjs mě tohle vůbec nezajímá, v šabloně komponenty si zavolám {control $presenter['headjs'], "muj.script.js"} a Headjs mi vloží do hlavičky <script> a po načtení ho spustí.

A teď můžeme pohřbít javascriptovou část webloaderu, amen.

Na závěr malá specialitka: Během ladění se mi stalo, že jsem vypsal samotné head.js(function(){ ... }) a nic se nestalo. Nechce se mi zjišťovat jestli je to chyba, nebo vyžadované chování, ale podle dokumentace je to vcelku logické, nic se přece nenačítalo, tak není potřeba vykonávat funkci po načtení. Pro zatím jsem to vyřešil tak, že vyvolám E_USER_WARNING. Až mi to začne vadit, přepíšu to tak, aby to vygenerovalo kód, který funkci vykoná, pokud už soubory předané makru jsou načtené.

Pro další funkce Headjs jsem zatím nenašel využití, pokud by někdo měl nějaký nápad na rozšíření tak sem s ním :)

Editoval HosipLan (9. 12. 2010 23:38)

na1k

HeadJS vypadá jako hodně nadupaná věcička, kterou rozhodně vyzkouším :)

Navíc dlouhodobě hledám řešení právě ve stylu Webloaderu/HeaderControlu, který mi ale taky nějak nesednul. Tady je to navíc s bonusem pro CSS, což je paráda :)

Jen nechápu, jak samotné zrychlení načítání probíhá. Ty dvě testovací stránky co tam mají se opravdu načítají v dost rozdílných časech, ale přenáší se stejný počet souborů, v obou případech paralelně (nečekají na sebe), a jediný rozdíl je, že bez HeadJS je to pomalejší. Může mi prosím někdo vysvětlit čím to je?

Filip Procházka

V momentě kdy se ti zpracují všechny elementy v hlavičce a začnou se načítat, tak stránka „zmrzne“.

Headjs dělá to, že tím, že je jediný javascript, stačí načíst něj a stránka se začne vykreslovat, v momentě kdy se stránka začne vykreslovat tak Headjs připojí do hlavičky další javascripty a ty se začnou načítat až při vykreslování stránky.

To co ty testy měří není rychlost načtení zdrojáků, ale vykreslení stránky.

// samozřejmě tenhle předpoklad závisí na tom, že jsem to dobře pochopil. Případně mě opravte :)

Filip Procházka

Ještě bych chtěl poprosit, každého kdo je ochotný a líbi se mu Headjs,
aby dal hvězdičku http://code.google.com/…ssues/detail?… pro zařazení Headjs do google-api,
kvůli rychlejšímu načítání (=externímu z google code)

Lopo

ako vidim tak mam dalsiu vec minimalne na obzretie …

ak sa mi zapaci tak budem mozno spekulovat ako ju skombinovat s WebLoader-om :)

kompakcia pomocou webloader-u: robi sa to kvoli tomu, aby sa co najviac veci natiahlo v rami 1 http poziadavku, tj nestracal sa cas posielanim zbytocnych hlaviciek – tuto vec sleduje napr aj YSlow a nasledne pinda ze sa ma prenasat menej js/css suborov, ktore maju byt packovane, nemaju byt v body ale header-i a pod.
pri zmene jedneho sa taha vsetko – ako casto po spusteni webu menis zlozenie posielanych js/css suborov ? myslim ze je to minimum takze vobec nevadi ta kompakcia s cache

Honza Marek

WebLoader vůbec nebyl zamýšlený tak, že by měl načítat na každé stránce jiné CSS/JS. Pokud jsi schopný v BasePresenteru nebo @layout.phtml nadefinovat všechny CSS a JS, tak WebLoader funguje dobře – spojí všechny soubory do jednoho, čímž stáhneš jeden soubor jedním HTTP požadavkem a na dalších stránkách už nemusíš stahovat nic (cache).

HeaderControl mi vždycky přišel zbytečný, tak ho nepoužívám. Předpokládám, že zdaleka nejsem sám.

iguana007

Super, díky! Hned jak bude chvilka, tak to nasadím ;)

Filip Procházka

Já tohle vím Honzo, jenom se mi zdá, že všude, kde je zmínka o webloaderu tak tam lidi packují javascripty a brečí že to nejde dělat automatizovaně z komponent, tak jsem chtěl poukázat na fakt, že tohle konkrétní řešení, je lepší.

Vyki

Honza Marek napsal(a):
HeaderControl mi vždycky přišel zbytečný, tak ho nepoužívám. Předpokládám, že zdaleka nejsem sám.

Nejsi. Také mi to přijde přehlednější si hlavičky nadefinovat v layoutu ručně. Webloader je super věc, to spojování při větším počtu js souborů o poznání zrychlí načtění stránky. Nenašel jsem nikde nějaký filtr, který by dokázal minifikovat i css a ne ho pouze spojit. Nemáš prosím nějaký tip?

Lopo

Vyki napsal(a):
Nenašel jsem nikde nějaký filtr, který by dokázal minifikovat i css a ne ho pouze spojit. Nemáš prosím nějaký tip?

minifikacia Css je mozna maximalne zmazanim nepotrebnych \n, medzier, tabov, tj whitespacov a k tomu este komentarov …
inac uz z principu sa css samo osebe viac minifikovat neda … neda sa totiz pouzit packovanie, encoding a pod. veci ako v pripade JS ktory sa dokaze sam rozbalit

Vyki

Lopo napsal(a):
inac uz z principu sa css samo osebe viac minifikovat neda … neda sa totiz pouzit packovanie, encoding a pod. veci ako v pripade JS ktory sa dokaze sam rozbalit

To ja vim že to lze pouze na urovni odstraneni zbytecnych znaku, ale neco takoveho by bodlo. Nechce si mi to psat jestli uz to nekde exituje hotove :o)

Honza Marek

http://code.google.com/p/cssmin/

Lopo

Honza Marek napsal(a):

http://code.google.com/p/cssmin/

mno to je z 90% to co som napisal – vyhodenie komentarov, whitespacov … navyse to ma podla popisu len detekciu prazdnych blokov …

dalsie veci ako css3 prepis a nieco ako premenne uz patria skor do oblasti programovania na co je podla mna lepsie pouzit less/sass

rozhodne ale si ten projekt pozrem blizsie a mozno nieco z neho naportujem do WebLoader-u v BailIff-e

Oggy

Chtěl jsem vyzkoušet head.js .. narazil jsem na tuhle komponentu, která vypadá skvěle..
ale asi dělám někde chybku :-) .. vypadá, že se scripty načtou (headjs přidá html styly, na konec stránky headjs přidá ty načítané skripty atd…), ale např. netteForms.js neběží.. formuláře se validují pouze na straně serveru.

používáte je až po nějakém head.ready ? apod.. nebo jsem někdě něco opomněl?

Filip Procházka

Můžeš mi ukázat kousek šablony? co konkrétně ti neběží?

Takhle komponenta jenom „usnadňuje“ zápis, neměla by ovlivňovat funkčnost.

Oggy

HosipLan napsal(a):

Můžeš mi ukázat kousek šablony? co konkrétně ti neběží?

Takhle komponenta jenom „usnadňuje“ zápis, neměla by ovlivňovat funkčnost.

jasně .. ale není co ukazovat :-)
presenter

<?php
protected function createComponentHeadjs($name)
        {
                $headjs = new Headjs($this, $name);
                $headjs->package = Headjs::PACKAGE_MIN; // výchozí hodnota
                $headjs->javascriptDir = $this->template->staticUri;

                // jak mě to napadlo, nevím, ale je to tam... volitelně
                $headjs->cache = Nette\Environment::getCache('Kdyby.Js');

                // přidám si nějaké výchozí, abych na ně v šabloně nezapoměl
                $headjs->addScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
                $headjs->addScript('netteForms.js');

                return $headjs;
        }
?>

šablona

<?php
<head>
...
{control headjs}
...
</head>
?>

konkrétně neběží js validace formulářů .. netteForms.js ..

ale ty soubory ..jquery a netteForm jsou načteny ..

Filip Procházka

zkus v konzoli prohlížeče otestovat jestli existují ty objekty (jquery a základní třída netteForms) a jestli mají formuláře callbacky

Oggy

HosipLan napsal(a):

zkus v konzoli prohlížeče otestovat jestli existují ty objekty (jquery a základní třída netteForms) a jestli mají formuláře callbacky

objekty existují.. teď si nejsem úplně jist jaké callbacky myslíš, ale jestli atribut data-nette-rules ..tak ano..

je to zvlaštní..pokud ten nette script načtu klasicky, funguje.

Filip Procházka

tam bude nějaký problém s inicializací, asi se na to budu muset kouknout taky :-/

Oggy

chová se to stejně, pokud upustím od tvé komponenty a načitám netteForms jen přes head.js .. tak jsem se chtěl zeptat, jestli head.js někdo používá a úspěšně?

Matúš Matula

Ahoj,
prave som vyskusal priamo head.js [nie komponentu] a bezi to ako ma. Nemas niekde inde v js chybu, kvoli ktorej sa to nedostane po netteForms.js?

Filip Procházka

head.js je v aktivním vývoji, třeba to spravili

Oggy

jo jo.. už to funguje.. po stažení verze 0.5 ..díky za upozornění.