Specificatiile limbajului de programare JavaScript nu prezintă un mod robust pentru a scrie module, în timp s-au dezvoltat mai multe tipare, dar comunitatea avea nevoie de ceva general acceptat și deaceea s-a creat un sitem de standardizare a modulelor și pachetelor, CommonJS.

Node.js a implementat standardul CommonJS pentru module. Să luăm următorul exemplu:

modulul_meu.js

var Persoana = {}; // variabila privata
Persoana.nume = 'necunoscut';
Persoana.membru = true;

// functie privata
var filtru = function (attr) {
  if (typeof( attr ) === 'string') return attr;
  return null;
};

// API-ul modulului, functiile publice
exports.getNume = function () {
  return Persoana.nume;
};
exports.setNume = function (nume) {
  Persoana.nume = nume;
};
exports.isMembru = function () {
  return Persoana.membru;
};
exports.VERSIUNE = "0.0.1";

app.js

var modulul_meu = require('./modulul_meu.js'); // includem modulul

if (modulul_meu.isMembru) {
  modulul_meu.setNume( 'Andrei' );
};

console.log( modulul_meu.getNume() );

Modulul se află într-un fișier separat, funcția require() citește fișierul “modulul_meu.js”, îl evaluează și rezultatul este un obiect de forma:

{
  getNume: [Function],
  setNume: [Function],
  isMembru: [Function],
  VERSIUNE: "0.0.1"
}

Funcția require() are un mod puțin mai complicat de a căuta modulele:
require(‘modulul_meu’):

1. caută în modulele incluse în Node.js, dacă nu este găsit,
2. caută în modulele globale (../node/node_modules/modulul_meu/index.js), dacă nu este găsit,
3. caută în modulele locale (./node_modules/modulul_meu/index.js)

require(‘./modulul_meu.js’): caută în directorul curent
require(‘../modulul_meu.js’): caută în directorul precedent
require(‘./module/modulul_meu.js’): caută în directorul ‘module’, aflat în directorul curent

Managerul pentru module este NPM (Node.js Package Manager). Aici puteți găsi o mulțime de module utile. Instalați NPM pentru a putea instala mai simplu modulele.

Dacă aveți întrebări sau sugestii lăsati un comentariu.

Edit:
Ascultand podcast-ul NodeUp, am aflat ca mai este un site unde sunt prezentate modulele si resurse: toolbox.no.de

Pentru cine nu are instalată o versiune Node.js, accesați pagină de download. Pentru începători recomand ultima versiune (unstable), că să puteți învăța și beneficia de toate funcțiile care au fost adăugate și să evitați folosirea celor care au fost scoase.

Vom folosi exemplul de pe site-ul oficial, îl vom restructura pentru a facilita explicarea lui și vom crea fișierul exemplu.js, ce conține:

var http = require('http');

var port = 9090;
var mesaj = "<h2>Node.js - exemplu server HTTP</h2>";

var userConectat = function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.write( mesaj );
  response.end();
};

var server = http.createServer( userConectat );
server.listen( port );

console.log('Accesati serverul: http://127.0.0.1:9090');

Ca să rulam fisierul:

node exemplu.js

Să disecam codul:

var http = require('http');

Funcția ‘require’ se folosește la încărcarea modulelor, în cazul nostru modulul ‘http’, care face parte din modulele standard.

var userConectat = function (request, response) { ... };

Funcția ‘userConectat’ în cazul nostru va fi un ‘callback’. Pe scurt va fi executată în interiorul altei funcții. Pentru cei familiarizați cu jQuery: $(‘button’).click( callback );

Funcția are 2 obiecte, request (care conține ‘HTTP Request’), respectiv response (care conține ‘HTTP Response’).

Vom folosi obiectul response pentru a transmite un mesaj userului:

  response.writeHead(200, {'Content-Type': 'text/plain'});

Trimitem codul 200 (HTTP status code), care reprezintă recepția cu succes a transmisiei, apoi informăm browserul despre tipul de codare al conținutului (MIME media type), în cazul nostru fiind text/plain. Dacă am fi trimis un string JSON foloseam application/json.

  response.write( mesaj );
  response.end();

Scriem mesajul nostru (response.write), apoi închidem conexiunea (response.end). Dacă nu închidem conexiunea browserul va rămâne suspendat până la încheierea transmisiei și nu va afișa mesajul.

var server = http.createServer( userConectat );

Funcția http.createServer creează un server HTTP în mod asincron (în afara loop-ului principal). Pentru fiecare user conectat la server se va executa funcția userConectat; funcția este executată în loop-ul principal, nu în mod asincron. Rețineți, totul în Node.js lucrează în paralel, mai puțin codul vostru.

server.listen( port );

Funcția server.listen menține serverul activ și așteaptă evenimente, în cazul nostru conexiunea pe portul ’9090′. Dacă nu atașăm un event listner Node.js va termina execuția fișierului.

Spuneam că programarea în mod asincron prezintă un loop principal (Node.js), detectarea evenimentelor, în cazul nostru server.listen( port ) și manipularea evenimentelor userConectat.

Node.js este un mediu bazat pe evenimente, prin urmare, evenimentele sunt emise și recepționate pe diferite canale. În exemplul de mai sus, recepționarea unui eveniment este efectuată de către server.listen pe canalul ’9090′. Fiecare conexiune emite evenimente, de aceea putem rescrie server = http.createServer( userConectat ) în felul următor:

var server = http.createServer();
server.on( 'request',  userConectat );

Urmeaza: Module și EventEmitter

De ce modelul evented este mai eficient pentru server?

În mare parte serverele sunt proiectate pt. I/O, ceea ce înseamnă că, în majoritatea timpului, așteaptă operațiile I/O (conexiune la server, accesarea unei baze de date, citirea unui fișier de pe HDD, comunicarea cu un serviciu web extern, etc).

Să luăm un exemplu: după ce a terminat de redactat cartea, una din damele din articolul anterior intenționează să o trimită editorului. Se conectează la www.paginalui.ro, face upload la PDF și apăsa submit.

Serverul editorului este programat să ruleze următoarea rutină:

1. primește PDF-ul, salvează-l în folderul: /cărți_needitate/;
2. salvează în baza de date autorul și datele personale;
3. trimite notificare prin sms editorului;
4. după salvarea fișierului trimite răspuns: „Material adăugat cu succes!”;

În modul sincron totul se execută în ordine, de sus până jos, fiecare pas fiind evaluat și procesat, iar utilizatorul primește răspunsul la finalizarea proceselor.

În modul asincron fiecare pas este evaluat, dar nu se așteaptă procesarea pașilor. Fiecare pas este procesat in paralel (în afara loop-ului principal), iar la finalizarea fiecăruia se întorc răspunsurile.

De aceea se poate observă că răspunsul pentru pasul ‘B’ s-a întors înaintea răspunsului pentru pasul ‘A’, deoarece procesarea lui a durat mai puțin.

Trimiterea mesajului prin SMS este mai rapida decat in modul sincron, deoarece că nu se asteaptă ca celelalte procese să termine.

Să zicem că serviciul extern nu a putut trimite SMS-ul și răspunde cu o întrebare “Reîncerc trimiterea?”, iar chestia asta se întâmplă de vreo 40 de ori.

În modul sincron utilizatorul așteaptă procesarea celor 40 de incercari apoi primeste răspunsul HTTP, altfel finalizarea execuției fișierului (ex: process.php) va înceta comunicarea cu serviciul extern de SMS.

În modul asincron, utilizatorul i se livrează răspunsul HTTP și în continuare serverul se va ocupa de trimiterea mesajului.

În Node.js toate operațiile sunt asincron, iar totul rulează în paralel, mai puțin codul tău!

Codul tău este evaluat și procesat în loop-ul principal, nu extern acestuia.

Spre exemplu, dacă se creează o funcție delay(1min) și este procesată în loop-ul principal, în acel interval de 1 minut, loop este blocat (implicit serverul).

În articolul următor vom începe să scriem primele linii de cod și deci..

Urmează: Asynchronous și Callbacks

Datorită evoluției rapide a web-ului și dorinței de comunicare în timp real, serverele HTTP sunt nevoite să evolueze. O soluție eficientă pentru îmbunătățirea comunicării (interacțiunii) dintre utilizator și server o prezintă Node.js – evented I/O bazat pe V8 – JavaScript engine-ul de la Google.

Thread vs Evented

Să luăm un exemplu: 3 persoane se conectează simultan la www.paginata.ro

Site-ul este hostat pe un server cu Apache2, PHP, Linux (LAMP).

Serverul HTTP (Apache2) preia conexiunile și deschide un thread pentru fiecare conexiune. Fiecare thread va rula o instanță a fișierului index.php, îl va evalua integral, de sus până jos (synchronous).

Acum partea importantă: un core al unui CPU nu poate rula mai mult de o instrucțiune odată, pur și simplu așa sunt proiectate. Deci core-ul unui CPU nu poate rula simultan instrucțiunile celor 3 instanțe ale fișierului index.php. Aici intervin thread-urile care împart instrucțiunile fișierelor în diviziuni de timp, ce vor fi procesate de un core.

Imaginați-vă 3 dame sofisticate care vor să scrie o carte, fiecare la aceeași mașină de scris. Simultan nu pot, dar împărțind paginile în diviziuni de timp, fiecare reușește să scrie câteva pagini, apoi cedează rândul și tot așa până se termină dactilografierea cărților.

Thread-urile prezintă o soluție deficitară pt. web, nu o să întru în detalii, cine este interesat poate citi: Threaded vs Evented Servers.

Reluăm exemplul: 3 persoane se conectează simultan la www.paginata.ro
Site-ul este hostat pe un server cu Node.js, Linux.

Serverul HTTP (Node.js) preia conexiunile și inițiază un eveniment (ex: “connected”) pt. fiecare conexiune, pe rând. Fiecare eveniment inițiază o serie de evenimente (asynchronous).

Pentru că un core (CPU) nu poate rula decât o instrucțiune odată, în orice moment din timp, un singur eveniment este procesat (dintr-o serie de evenimente).

Programarea evented (asynchronous) are un loop principal (Event loop) și prezintă 2 componente, detectarea evenimentelor (event detection) și manipularea evenimentelor (event handlers).

Browser-ele sunt Evented, prin urmare au un loop principal pt. detectarea evenimentelor. De aceea întâlnim sintaxa: onClick( afiseazaCeva ). Loop-ul principal detectează evenimentul “click” și rulează funcția “afiseazaCeva”, care este un event handler (callback).

NGINX™ si lighthttpd sunt event based ceea ce le face sa fie mult mai performante ca Apache2.

De ce Node.js?

1. JavaScript
Dacă vrei să scrii aplicații pt. web, inevitabil trebuie să înveți JavaScript și programarea pe evenimente. Datorită V8-ului JavaScript-ul pe server este o bestie!

Engine-ul V8 implementează ECMAScript (ECMA-262, 5th edition) (în prezent) este cel rapid VM pt. JavaScript (folosit și în Google Chrome).

Cei care sunt interesați să învețe JavaScript recomand:
JavaScript the Definitive Guide (a 6-a ediție) apoi JavaScript the Good Parts

2. Comunitatea
Proiectul are jur de 2 ani și jumătate și are 3000+ de module scrise. Nu toate sunt excelente, dar sunt open-source și poți să faci cam orice ai avea nevoie, chiar dacă vrei să-ți aprinzi lumina din cameră (serios vb).

3. Modulele / librăriile și NPM (Node.js Package Manager)

Un lucru foarte important pe care comunitatea a reușit să-l facă, este să creeze standarde. Cât de importante sunt standardele?! Limbajul este un standard, scrisul este un standard; nu am fi evoluat niciodată dacă nu reuşeam să ne conformăm unor seturi de reguli acceptate în comunitate.

Mai sunt și alte lucruri importante dar ar fi articolul prea lung să le trec pe toate.

Urmează: Synchronous (Blocking) și Asynchronous (Non-Blocking)

Problema este că prin utlimele versiuni de jQuery a apărut următorul cod:

Iar requestAnimationFrame pare că funcționează ușor diferit, mai ales în momentul în care se schimbă tabul activ.

Soluția

După ce am încercat inclusiv tămâia și aghiazma, am zis să încerc următoarele chestii:

slide.filter(function(){ return !$(this).is(':animated'); }).animate({ // http://goo.gl/ycCiz
//some awesome animation
});

Merge. Doar că toată povestea aia din filter nu prea îmi place. Prea mare cârnatu’, iar pseudoselectorii de genul :animated pot fi destul de lenți câteodată. Și am încercat și stop():

slide.stop(1,1).animate({ // http://goo.gl/TFRbF
//same awesome animation
});

Merge și asta fără probleme.

Aici găsești o explicație mai detaliată a problemei.

function foo($bar = 0){ // dacă nu este specificată nici o valoare, $bar are valoarea 0

}

În JS nu știam nici o modalitate de a pune o valoare implicită pentru parametri trimiși funcțiilor. Cu toate astea, soluția este destul de simplă:

function foo(bar){
var bar = bar || 0;

}

Mai mulți parametri

Ok, dacă am stabilit cum să setăm o valoare implicită, hai să vedem cum facem dacă avem mai mulți parametri.

Soluția clasică ar fi:

function foo(a, b, c, d, e, f, g, h){

}

Merge, e ok, toată lumea e fericită. Dar… poți uita repede ce reprezintă fiecare parametru și mai ales ORDINEA lor, astfel încât folosirea unei funcții după câteva zile poate fi destul de problematică.

Dacă folosești jQuery, poți abuza liniștit de jQuery.extend(). În loc să trimiți un șir aiurea de argumente, faci frumușel un obiect și…

var params = {
	currency:	'euro',
	price	:	200
};
foo(params);

function foo(params) {
	var o = { // o is for options
		currency:	'USD',
		price	:	0,
		default_param	:	'bar'
	}
	$.extend(o, params);

	console.dir(o);

}

Acum nu mai contează în ce ordine specifici argumentele. Simplu, nu?

1. Am adăugat clasa placeholder pentru elemente. Astfel, poți stiliza diferit respectivul element în funcție de ce conține (valoare legitimă sau placeholder);
2. Am adăugat un container, ce-ți permite să activezi suportul pentru placeholder și pentru elementele injectate în DOM (sau doar pentru anumite elemente; exemplu: enablePlaceholderSupport('#header')). Dacă nu e specificat niciun container, placeholder este activat pentru toate elementele din body;
3. Am îmbunătățit modul în care se afișează atributele value vs placeholder;
4. Și cred că atât.

Enjoy!

function enablePlaceholderSupport(wrap){
	var $ = jQuery,
			wrap = wrap || 'body',
			fakeInput = document.createElement("input"),
			placeHolderSupport = ("placeholder" in fakeInput),
			clearValue = function (e) { if ($(e).val() === $(e).data('placeholder')) { $(e).val(''); } };

	if (!placeHolderSupport) {
		$('input[placeholder]', wrap).each(function(){

			var searchField = $(this),
					originalText = searchField.attr('placeholder'),
					val = $.trim(this.value);
			if(typeof searchField.data('placeholder') !== 'undefined') { return; }

			searchField.data('placeholder', originalText);
			if(val == '') { $(this).val(originalText).addClass("placeholder"); }

			searchField.bind("focus.ntz_placeholder", function () { if(this.value == $(this).data('placeholder')){ $(this).val('').removeClass('placeholder'); } }).bind("blur.ntz_placeholder", function () {
				if (this.value.length === 0) {
					$(this).val(originalText).addClass("placeholder");
				}
			});
		});

		$("form").bind("submit.ntz_placeholder", function () { $('input[placeholder]', this).each(function(){ clearValue(this); });	});

		$(window).bind("unload.ntz_placeholder", function () { clearValue($('input[placeholder]', this)); });
	}
}

jQuery(document).ready(function($){ enablePlaceholderSupport(); });

Aici este varianta minified.

Prin urmare, am purces la căutarea unui script suficient de light pentru a se încărca rapid (având în vedere că toți clienții mei nu au conexiuni rapide – deh, ăsta e dezavantajul de a nu lucra cu români…) dar cu suficiente opțiuni pentru a satisface și cele mai exigente cerințe. De cele mai multe ori, „cele mai exigente cerințe” înseamnă image sets, deci nu am avut nevoie de mare șmecherie.

Slimbox 2

Și am dat peste Slimbox. Ultima actualizare e de prin 2010, dar nu-i problemă, pentru că funcționează excelent cu ultima versiune de jQuery.

Să optimizăm!

Așa cum am precizat, avem nevoie de viteză. Pagina trebuie să se încarce rapid, iar artificiile mai puțin importante pot aștepta.

Prin urmare, toată povestea asta este executată dacă există link-uri spre fișiere imagine, dacă sistemul de operare e suficient de inteligent să nu impună restricții de CSS (cum ar fi position:fixed) și doar după ce s-a terminat pagina de încărcat (DOM ready):

if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
	var links2img = $('a[href$=jpg], a[href$=gif], a[href$=png]');
	if(links2img.length>0){
		if(typeof $.slimbox == 'undefined'){
			$.getScript('js/slimbox2.js', function(){
				links2img.slimbox();
			});
		}else {
			links2img.slimbox();
		}
	}
}

Pentru a evita probleme neplăcute (de exemplu încărcarea slimbox de mai multe ori), am inserat și condiția typeof $.slimbox .....

OK, și dacă folosesc alt script?

E o țară liberă, poți folosi orice script dorești. Fie că e Slimbox, Lighbox, *box, toată treaba de mai sus va funcționa. Sigur, va trebui să înlocuiești numele funcției slimbox(), dar în rest va funcționa fără probleme.

Eu prefer să pun toată șmecheria asta direct în head, nu în fișier extern pentru că este destul de mic și nu se merită să blochez încărcarea paginii cu un request razna. Cu toată povestea asta de mai sus se rezolvă pagina curentă. DAR…

Ce se întâmplă dacă adaugi elemente în DOM cu js?

Ex: încarci o parte dintr-o pagină cu AJAX?

Evident, IE ne-o trage masiv. Și ce am învățat despre HTML acum zece ani se aplică: atunci când browserul nu recunoaște un tag îl ignoră (de cele mai multe ori asta înseamnă că nu i se afișează conținutul).

Cum se rezolvă?

Dacă scriptul prezentat anterior se numește HTML 5 Shiv (ușor modificat, but still), rezolvarea vine cu… innerShiv. Nu mă interesează cum se comportă cu alte librării (sau chiar fără), dar cu jQuery treaba stă în felul următor:

$.get('html5test.html', function(data){ // html5test.html este un fișier ce conține diverse tag-uri html... 5
    if($.browser.msie && $.browser.version < 9){
        $(innerShiv(data, false)).appendTo('body');
    }else {
        $(data).appendTo('body');
    }
});

Și… Cam atât.

Tot cârnatul ăsta este o adaptare a unui alt cârnat găsit cu ceva timp în urmă, pentru care am adăugat suport pentru textarea și am eliminat input type="file" din ecuație deoarece trântește erori de securitate.

var fakeInput = document.createElement("input"),
		placeHolderSupport = ("placeholder" in fakeInput),
		clearValue = function (e) {
			if ($(e).val() === $(e).data('placeholder')) {
				$(e).val('');
			}
		};
if (!placeHolderSupport) {
	$('input[placeholder], textarea[placeholder]').each(function(){
		var searchField = $(this),
				originalText = searchField.attr('placeholder'),
				val = this.value;
		if(this.type.toLowerCase()=='file') {return ;}
		searchField.data('placeholder', originalText);

		if(val == '') { this.value = originalText; }else {
			searchField.addClass("placeholder")
		}

		searchField.bind("focus blur", function (e) {
			var t = this;
			switch(e.type){
				case "blur":
				default:
					if (t.value.length === 0) { $(t).val(originalText).addClass("placeholder"); }
				break;
				case "focus":
					if(t.value == originalText ) {t.value = '';}
				break;
			}
		});
	});

	$("form").bind("submit", function () {
		clearValue($('input[placeholder]', this));
	});

	$(window).bind("unload", function () {
		clearValue($('input[placeholder]', this));
	});
}

Varianta minified este aici.