spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Peter Širka 15.12.2012
Hodnoť článok:
4 0

partial.js - nový webový framework pre node.js

Predstavujem Vám ukážku nového webového frameworku partial.js, ktorý bol napísaný v našej malej krajine. Framework obsahuje všetko to najlepšie, s čím som sa počas tvorby webových stránok stretol.

Základné informácie o frameworku

Framework je ešte v mojej testovacej verzii a v priebehu niekoľkých dní vytvorím v Node Packaged Modules package na jednoduchú inštaláciu frameworku. Momentálne som na tom tak, že potrebujem framework poriadne otestovať.

partial.js

Nižšie uvádzam prehľadnú štruktúru webovej stránky. Pod štruktúrou popíšem presný popis adresárov a súborov.

	--- [controllers]
	--- [node_modules]
	--- [public]
	--- [resources]
	--- [templates]
	--- [tmp]
	--- [views]
	index.js

--- [controllers]
Obsahuje *.js súbory, ktoré obsahujú funkcie na spracovanie stránky. Každý jeden súbor musí obsahovať základnú deklaráciu controllera. Nižšie uvádzam príklad jedného controllera, ktorý som pomenoval global.js. Pozorne si treba pozrieť každý jeden riadok. Nižšie uvádzam len taký divoký príklad, pretože Controller by mal obsahovať v sebe určitú sekciu, napr. ak prevádzkujeme obchod, tak by mal byť controller: objednavky.js, tovary.js, uzivatel.js, atď.. Funkcia v Controlleri sa vyvolá ak platí podmienka s flagmi v partial.route();

	// global.js

	exports.init = function(partial) {
		partial.route("/", homepage);

		partial.route("/shop/{category}/", shop);
		partial.route("/shop/{category}/{subcategory}/", shop);

		// ukážka nastavenia flagov [] na controller
		partial.route("/registration/", registrationSave, ["post", "ajax"]);
		partial.route("/registration/", registration);

		partial.route("#404", error404);
		partial.route("#500", error500);
	}

	function homepage() {
		this.repository.title = "Welcome";
		this.view("homepage", { say: 'Hello, this is model' });
	}

	function shop(category, subcategory) {
		this.repository.title = "Shop";
		this.view("shop");
	}

	function registration() {
		this.repository.title = "New registration";
		this.view("registration");
	}

	function registrationSave() {

		// this.req.formPost.FirstName;
		// this.req.formPost.LastName;
		// this.req.formPost.Age;

		this.json({ r: true });
	}

	function error404() {
		this.repository.title = "Error 404";
		this.view("404");
	}

	function error500() {
		this.repository.title = "Error 500";
		this.view("500");
	}

--- [node_modules]
Obsahuje jadro frameworku, o tomto písať zatiaľ nebudem, pretože by to bolo zbytočné.

--- [public]
Adresár public obsahuje všetky publikované súbory - dostupné z URL adresy. V public by mali byť uložené statické súbory, štýly, javascripty, atď..

--- [resources]
Obsahuje *.json súbory, ktoré slúžia ako zdroje. Resources sa dajú volať všade v Controlleri. Resources slúžia hlavne pre multijazyčné stránky.

--- [templates]
Obsahujú *.html súbory, ktoré slúžia ako template. Slovo template má veľký význam, ale tento template je trošku iný. Viac ako moje slová povie nižšie uvedený príklad:

	// template products.html
	<div>
		<div>{name}</div>
		<div>{price} EUR</div>
		<div><button>buy</div></div>
	</div>

Ako využiť takýto template? Jednoducho, do funkcie vložíme názov a ako ďalší parameter vložíme pole objektov s vlastnoťami name a price. Nižšie uvedený príklad slúži len ako ukážka:

	template('products', [{ name: 'Produkt 1', price: '32.34' }, { name: 'Produkt 2', price: '55.00' }])

	// výsledok

	<div>
		<div>Produkt 1</div>
		<div>32.34 EUR</div>
		<div><button>buy</div></div>
	</div>
	<div>
		<div>Produkt 2</div>
		<div>55.00 EUR</div>
		<div><button>buy</div></div>
	</div>

--- [tmp]
Obsahuje všetky dočasné súbory, ale o tom inokedy.

--- [views]
Obsahuje všetky HTML šablony. Šablony môžu byť aj v pod-adresároch. Šablona _layout.html obsahuje základnú šablonu, ktorá obsahuje hlavičku a footer stránky.

	404.html
	500.html
	homepage.html
	shop.html
	registration.html
	news.html
	_layout.html
	// _layout.html
	<!DOCTYPE html>
	<html>
	<head>
	    <title>@{readRepository('title')}</title>
	    <meta charset="utf-8" />
		<meta http-equiv="content-language" content="sk" />
		<meta http-equiv="X-UA-Compatible" content="IE=10" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="viewport" content="width=1024, user-scalable=yes" />
		<meta name="robots" content="all,follow" />
		<link type="text/css" rel="Stylesheet" href="@{routeCSS('p.css')}" />
		<script type="text/javascript" src="@{routeJS('p.js')}"></script>
	</head>
	<body>

		@{body}

	</body>
	</html>
	// homepage.html

	Welcome partial.js developer! @{model('say')}

	<br />

	@{template('products', [{ name: 'Shoes', price: '32.34 €'}, { name: 'Shoes', price: '32.34 €'}])}

	// vyrenderuje do html view news
	@{partial('news')}
	// vysledok

	<!DOCTYPE html>
	<html>
	<head>
	    <title>Welcome</title>
	    <meta charset="utf-8" />
		<meta http-equiv="content-language" content="sk" />
		<meta http-equiv="X-UA-Compatible" content="IE=10" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="viewport" content="width=1024, user-scalable=yes" />
		<meta name="robots" content="all,follow" />
		<link type="text/css" rel="Stylesheet" href="/data/p.css" />
		<script type="text/javascript" src="/data/p.js"></script>
	</head>
	<body>

		Welcome partial.js developer! Hello, this is model
		<br />

		<div>
			<div>Produkt 1</div>
			<div>32.34 EUR</div>
			<div><button>buy</button></div>
		</div>
		<div>
			<div>Produkt 2</div>
			<div>55.00 EUR</div>
			<div><button>buy</button></div>
		</div>

		// vyrenderuje do html view news
		<ul>
			<li>novinka 1</li>
			<li>novinka 2</li>
			<li>novinka 3</li>
		</ul>

	</body>
	</html>

index.js
index.js je inicializačný súbor, ktorý spúšťa aplikáciu a sú v nej naloadované controlleri.

	var http = require('http');
	var app = require('partial.js');
	var port = 8005;

	app.clean().init(http).listen(port);

	app.onAuthorize = function (req, res) {
		return false;
	};

	require('./controllers/global.js').init(app);

	// príklad ======================
	// require('./controllers/objednavky.js').init(app);
	// require('./controllers/produkty.js').init(app);
	// require('./controllers/uzivatel.js').init(app);

	console.log("http://127.0.0.1:" + port);

Doplnkové informácie

Zistil som, že opísať framework nie je jednoduché. Čo by som ešte k tomu povedal, že Framework podporuje:

- automatický compress JavaScriptov
- LESS CSS
- cacheovanie na báze ETagu
- jednoduché prepínanie módu DEBUG (TRUE|FALSE)
- upload súborov s možnosťou nastavenia veľkosti
- vlastná cache (toto je problém, ktorý musím otestovať)
- session postavená trochu inak
- a mnoho ďalšieho.

V prípade, že by bol informačný záujem o tento framework, mohol by som popísať framework podrobnejšie. Neviem či kóderov na SK zaujíma node.js.

Framework som skúšal na hostingu http://nodejitsu.com/ a ide bez problémov. Na Slovensku by som chcel vytvoriť webhosting s node.js. Už to začínam riešiť a ak by ste vedeli o niekom zapálenom pre node.js hosting - bol by som rád. K frameworku treba napísať ešte poriadnu dokumentáciu. Ďakujem, že som mohol predstaviť prvý slovenský framework partial.js napísaný v node.js.

======================================================================
Podrobnejšie informácie o partial.js:
Viac informácii o frameworku partial.js
Môj blog o kódovaní

Skrytá reklama:
Tvorba web stránok Web Site Design s.r.o.
======================================================================

Peter Širka Peter Širka

Moja práca je moje hobby.


Hodnoť článok:
4 0

3 komentáre k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Peter Širka 16.12.2012 20:36:58
Ďakujem, to som písal ručne len na ukážku.
Opravené
0 0 Milan Dvorský 16.12.2012 18:59:42
mozno sa mylim, ale v templates mas drobnu chybicku. otvaras button a zatvaras div :)
0 0 Martin Maricak 15.12.2012 16:43:12
Neviem síce posúdiť framework bez toho aby som ho vyskúšal, ale páči sa mi, že aj u nás sa tvorí niečo zaujímavé. Určite teda držím palce.
Zajtra.sk > Programovanie > JS/jQuery > partial.js - nový webový framework pre node.js


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama