ScriptLoader, řešení pro css a js

Zní to užitečně. Nechceš to dát do extras? A třeba vyrobit i nějaké malé demo, abych viděl, co přesně ta třída způsobí?

Byl bych rád aby jste to otestovali.

Demo vyrobím, do extras přidám.

Předvedu co způsobí........

Trošku jsem se odmlčel,

avšak dodal jsem plugin do extras a v ukazce nahore jsem doplnil co je potreba dodat do sablony.

A. napsal(a):

Diky, vypada to na prvni pohled skvele!

Chtel jsem si v budoucnu neco podobneho napsat, ale zatim je to moc dole v todo listu :-).

Jdu to otestovat.

Super dej vedet jak to jde

Majkl578 napsal(a):

měl bych pro tebe ještě takové TODO pokud by se ti to líbílo.
jde o vložení externích obrázků přímo do CSS což sníží počet HTTP requestů
více ZDE v prvním příspěvku, řešení ve druhém (samozřejmě třeba upravit)

Zabýval jsem se tím, dokonce si napsal funkční skript, co mi je tam „embedne“, ale řešení nefunguje v IEčkách :(

EDIT: lol, koukám, že linkuješ na jakpsatweb na můj thread z doby, kdy jsem se o to pokoušel :D

Editoval LastHunter (6. 8. 2009 23:23)

Majkl578 napsal(a):

takže zas IE kazí plány :S
<OT>psal jsem, nedal jsi vědět, zda to pomohlo :D</OT>

Ahoj,

nad tim jsem nepremejslel.

nedokazu si moc predstavit udelat to tak aby to bylo optimalni cena/vykon, spise by se na to melo myslel pri navrhu HTML layuotu, zatim to delat nebudu, avsak nezavrhuju a taky se mi nechce bojovat s IE :D

oktam napsal(a):

Ďakujem za komponentu :)

Neni zac jsem rad ze ji pouzivas :)

Tip na optimalizáciu: z CSS pravidla je možné zmazať bodko-čiarku za posledným atribútom v rámci pravidla.

Ted netusim co tim myslis, tyka se to ScriptLoaderu? Rozepis to vice.

Ešte otázka: je ta medzera na začiatku vygenerovaného CSS zámerne?

vsiml jsem si ji ona vznika pokud mas na zacatku css komentar nebo @..neco..

Vadi necemu?

Editoval matata (21. 8. 2009 9:57)

oktam napsal(a):
Bodkočiarka (;) je v CSS oddeľovač (nie ukončovač atribútu), za posledným atribútom už nemá význam.
(Pozri na rozdiel v tomto kóde.)

uz chapu, urcite mas pravdu a moc si tim nepomuzes (vykonostne), ale pridam to tam

>

Babka k babce, budú kapce :-)

Svata pravda, mrknu zda by to slo nejak lehce odstranit

ScriptLoader nevklada cely JavaScript subor – ak najde znaky // tak oreze lomitka aj obsah suboru, ktory nasleduje za lomitkami.

oktam napsal(a):

Mam dalsi tip: co keby sa nazov vystupneho spojeneho suboru generoval na zakalde casu poslednej zmeny vsetkych zdrojovych suborov (teraz sa robi hash z nazvu suborov)?

hash se tvori z nazvu souboru, ale soubory se obnovuji podle casu, mimo produkce tam je potreba smazat aplikacni temp

Jeste bych chtel dodat ze neni primo ucelem komprimovat a odstranovat zbytecnosti z css a js, pac tim usetris opravdu minimum cca 3–5%, ale pokud mas hodne malinkatejch souboru a udelas z toho jeden velikej je cca 5× rychlejsi coz je zajimavejsi. A to je ukol ScriptLoaderu

Editoval matata (23. 8. 2009 19:45)

oktam napsal(a):
Ak mam 1.000 ludi denne, kazdy z nich stiahne zbytocnych 30kB JavaScriptu, k tomu 5kB zbytocneho CSS, tak mesacne to spravi 1GB zbytocneho traffiku.

Dobre mas pravdu ze ve vetsim meritku to ma smysl. Taky ber v potaz ze prohlizece si taky kesuji JS a CSS, budem brat ze nekesuji. Zajimalo by me kde si vzal zbytecny 30kB JS a 5kB CSS? To mas pred komprimaci a po komprimaci? A jaka je to komprimace?

Zkusil jsi taky zapojit GZIP? (usetri opravdu hodne)

ScripLoader umoznuje nacitat jen potrebne css a js na stranku. Vyuzivas to?

pridal jsem demo

Editoval matata (27. 8. 2009 15:00)

Honza M. napsal(a):

Nemělo by demo třeba běžet někde na webu?

To si pak nebudes moci vyzkouset menit, pridavat a ubirat css a js. Moc k videni by toho nebylo

Nebo nejakej napad?

Chtelo by to tady nejaky piskoviste na vytvoreni ukazek pac web casem zlikviduju a nebude odkaz funkcni

Editoval matata (27. 8. 2009 16:09)

Zdravím!

ScriptLoader jsem vyzkoušel a je to pěkné.
Mám ale pocit, že jsem narazil na dva problémy:

1. v metodě addScript při sestavování jména jako md5 časů participujících souborů může dojít při k vytvoření stejného jména pro různé soubory, pokud soubory budou mít všechny nastaven stejný čas vytvoření. Navrhuji změnu:

<?php
			/* --- Build filename from files --- */

			foreach ($value as $file) {
				$time = filemtime($file);
				if ($time === FALSE) {
					throw new FileNotFoundException('This file "' . $file . '" does\'t exists.');
				}
				//zmena: přidat do jména i jméno souboru
				$name .= $time . $file;
			}

			$fileName = self::md5Name($name . $media) . $this->type;

?>

2. v metodě clearTemp() by asi mělo být použito getMtime(), takhle se mi při dvojnásobném volání generování scriptu při druhém průchodu (první průchod pro css, druhý pro js) mazal výsledek prvního průchodu (na windowsech). Chyba se u mě dala snadno nasimulovat při změně $this->clearTemp(3600); na $this->clearTemp(5)

Edit: A ještě jedna poznámka k názvům metod addCss a addJs, myslím, že přesnější by asi bylo combineCss() a combineJavascript()

Editoval jasir (31. 8. 2009 14:52)

Okej, zkratky/nezkratky je asi jedno, jde mi o to sloveso add.
Od metody addCss($files) bych spíš očekával, že do nějakého objektu přidám soubory. To, že je zároveň i spojí a vrátí výsledek je neintuitivní.

Při addCss() bych očekával, že to bude fungovat nějak jako:

<?php
	$loader->addCss($file1);
	$loader->addCss($file2);
	echo $loader->generate();
?>

Editoval jasir (31. 8. 2009 15:59)

matata napsal(a):

jsem pro zmenit to na set…

Tak to bych řekl že už vůbec ne, set<property> bych doporučil jen pro settery. A od setterů bych neočekával, že spustí generování a vrátí výsledek.

Tak. Jelikož jsem nerozuměl zdrojáku této extrasy, tak při svojí nedůvěřivosti mi nezbylo než naprogramovat vlastní konkurenční… říkám tomu WebLoader, abych se odlišil.

1) Navnadění

Takhle to může fungovat:

{control css 'screen.css', 'ui.css'}
{control js 'jquery.js', 'jquery.livequery.js', 'nette.js', 'web.js'}
{if $user->isAuthenticated()}
	{control js 'jquery.ui.js', 'texyla/texyla.js', 'logged.js'}
{/if}

Další výhody:

• při aktualizaci jednoho ze souborů se změní adresa souboru (hashují se názvy souborů a datum poslední změny nejnovějšího), takže cache prohlížeče nikoho obtěžovat nebude
• zdroják je cca 10× menší
• ovladatelné z presenteru i šablony (metody addFile(s) a removeFile(s) nebo způsob s widgetem výše)
• zkusil jsem zakomponovat Nette\SafeStream, tak by to snad mohlo být thread safe

Vlastnosti:

• cache je potřeba při změně ručně smazat… někdy při chybějící záloze se to může i hodit, co si budeme povídat ;)
• metody pro správu souborů: addFile, removeFile, addFiles, removeFiles, clear
• gettery: getLastModified, getGeneratedFilename, getContent
• metoda render pro widgetování – pokud dostane v argumentech soubory, tak zruší ty co už má a vezme za svoje ty z argumentů
• složky jsou ovladatelné přes veřejné proměnné $sourcePath, $tempPath, $tempBaseUri

2) Plácnutý zdroják

Abstraktní třída WebLoader s potomky JavaScriptLoader a CssLoader.

<?php

/**
 * Web loader
 *
 * @author Jan Marek
 * @license MIT
 */
abstract class WebLoader extends Control
{
	public $sourcePath;

	public $tempPath;

	public $tempBaseUri;

	protected $files = array();

	abstract public function getElement($source);

	public function addFile($filename)
	{
		if (in_array($filename, $this->files)) return;

		$this->files[] = $filename;
	}

	public function addFiles(array $files)
	{
		foreach ($files as $filename) {
			$this->addFile($filename);
		}
	}

	public function removeFile($filename)
	{
		$this->removeFiles(array($filename));
	}

	public function removeFiles($files)
	{
		$this->files = array_diff($this->files, $files);
	}

	public function clear() {
		$this->files = array();
	}

	public function render()
	{
		if (func_num_args() > 0) {
			$this->clear();
			$this->addFiles(func_get_args());
		}

		if (empty($this->files)) return;

		$filename = $this->generate();

		echo $this->getElement($this->tempBaseUri . "/" . $filename);
	}

	public function getContent()
	{
		$content = "";

		foreach ($this->files as $file) {
			$path = $this->sourcePath . "/" . $file;
			$content .= file_get_contents($path);
		}

		return $content;
	}

	public function getLastModified()
	{
		$modified = 0;

		foreach ($this->files as $file) {
			$path = $this->sourcePath . "/" . $file;
			$modified = max($modified, filemtime($path));
		}

		return $modified;
	}

	public function getGeneratedFilename()
	{
		return md5(implode("|", $this->files) . $this->getLastModified());
	}

	protected function generate()
	{
		$name = $this->getGeneratedFilename();

		$path = $this->tempPath . "/" . $name;

		if (!file_exists($path)) {
			if (!in_array(SafeStream::PROTOCOL, stream_get_wrappers())) {
				SafeStream::register();
			}
			file_put_contents("safe://" . $path, $this->getContent());
		}

		return $name;
	}
}

<?php

/**
 * Css loader
 *
 * @author Jan Marek
 * @license MIT
 */
class CssLoader extends WebLoader
{
	public $media;

	public function getGeneratedFilename()
	{
		return parent::getGeneratedFilename() . ".css";
	}

	public function getElement($source)
	{
		return Html::el("link")
			->rel("stylesheet")
			->type("text/css")
			->media($this->media)
			->href($source);
	}
}

<?php

/**
 * JavaScript loader
 *
 * @author Jan Marek
 * @license MIT
 */
class JavaScriptLoader extends WebLoader
{
	public function getGeneratedFilename()
	{
		return parent::getGeneratedFilename() . ".js";
	}

	public function getElement($source)
	{
		return Html::el("script")->type("text/javascript")->src($source);
	}
}

3) Příklad presenteru

class BasePresenter extends Presenter
{
	// ...

	protected function createComponentJs()
	{
		$js = new JavaScriptLoader;
		$js->sourcePath = WWW_DIR . "/js";
		$js->tempBaseUri = Environment::getVariable("baseUri") . "webtemp";
		$js->tempPath = WWW_DIR . "/webtemp";
		return $js;
	}

	protected function createComponentCss()
	{
		$css = new CssLoader;
		$css->sourcePath = WWW_DIR . "/css";
		$css->tempBaseUri = Environment::getVariable("baseUri") . "webtemp";
		$css->tempPath = WWW_DIR . "/webtemp";
		return $css;
	}
}

4) Plány do budoucna

• Přidat podporu pro filtry (například komprimace JS)
• Spojit se s autorem původní extrasy, zjistit co ta umí líp a vybrat z obou to lepší (pokud bude souhlasit)
• A taky dokumentační komentáře :-D

Editoval Honza M. (2. 9. 2009 23:18)

_Martin_ napsal(a):
Ovšem toto řešení – přes widget přímo v šabloně – to je cesta=)

Taky to bylo v planu resili jsme to s jasirem na posledni sobote v praze, ovsem jsem rad ze uz si s tim nemusim lamat hlavu a zapojil se nekdo dalsi.

Honza M. napsal(a):
Spojit se s autorem původní extrasy, zjistit co ta umí líp a vybrat z obou to lepší (pokud bude souhlasit)

Souhlasim :) komunikace viz ICQ bo mail nebo tu na foru

Důležitější než komprimace bude přepisování relativních url adres obrázků v CSS. To má kolega, já to mám v rané fázi rozpracování.

Napadlo mě, že když už s tím budu dělat taková kouzla, tak určitě nebude složité přidat podporu pro CSS proměnné, což by mohl být příjemný bonus oproti normálním CSS souborům.

Příklad s JS packerem od Deana Edwardse zveřejním do několika dnů, až budu mít čas.

Vyvíjí se to suprově! Ve spojení s novými šablonami, kde bude blok výchozích stylů a skriptů a každá šablona si to bude moct podědit a změnit nebo doplnit, se to stane dost killing featurou!

LastHunter napsal(a):
Tady máš bezpečnostní problém. Do APP_DIR nesmí mít Apache, potažmo uživatel, přístup.

Leda pokud použije v cestě globálně ovladatelnou proměnnou. Což asi ne.

Aha, sorry, ani jednu z těch tříd jsem zatím nezkoumal. Ale tohle mě praštilo do očí :)

Honza M. napsal(a):

I tak nastává otázka jak poznat absolutní cestu. Že začíná / anebo písmeno:\?

Asi nejsnazší řešení… Myslím, že to bude fungovat všude.