WADe 2017-2018 Tutorial (1/3): Web Application Development with Node.js – An Introduction

Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Dezvoltarea aplicațiilor Web
⍟JavaScript la nivel de server – node.js
(aspecte esențiale)

„Cine a văzut vreodată o bijuterie frumos cizelată
de bijutier cu ajutorul ciocanului?”
Jan Amos Comenius

node.js: caracterizare
“Node.js® is a JavaScript runtime built on Chrome’s
V8 JavaScript engine. Node.js uses an event-driven,
non-blocking I/O model that makes it lightweight and
efficient. Node.js’ package ecosystem – npm – is the largest
ecosystem of open source libraries in the world.”
“Node.js is designed to build
scalable network applications.”

Ryan Dahl concepe Node.js (2009) – nodejs.org
rulează pe mașini respectând POSIX + Windows (2011)
adoptat de industrie (din 2012)
e.g., Cloud9 IDE, eBay, Google, LinkedIn, Netflix, Storify, Twitter
hackernoon.com/@nodejs
Node.js Foundation (2015)
IBM, Intel, Joyent, Microsoft, RedHat, SAP, The Linux Foundation,…
io.js – o variantă Node.js concepută în ES6
al cărei cod-sursă a fost încorporat în Node.js 4 (2015)
Node.js 6.11.4 LTS – Long Term Support (octombrie 2017)
versiune stabilă actuală pentru uz în producție
Node.js 8.6.0 – varianta curentă (octombrie 2017)
https://github.com/nodejs/node

node.js
Oferă un mediu de execuție în linia de comandă,
pe baza unor biblioteci C++ și a procesorului V8
node program.js

node.js
Permite dezvoltarea de aplicații Web
la nivel de server în limbajul JavaScript
recurge la V8 – procesor (interpretor) JavaScript
creat de Google, implementat în C++ și disponibil liber
https://developers.google.com/v8/

Oferă suport pentru cele mai importante
protocoale Web și Internet
HTTP (HyperText Transfer Protocol)
DNS (Domain Name System)
TLS (Transport Layer Security)
functionalități de nivel scăzut (socket-uri TCP)

node.js

Intern, se recurge la
diverse biblioteci open source C sau C++
libuv (asynchronous I/O) – docs.libuv.org
c-ares (asynchronous DNS requests) – c-ares.haxx.se
OpenSSL (crypto & SSL/TLS) – www.openssl.org
zlib (compression) – zlib.net
V8 (JavaScript engine) – v8docs.nodesource.com

node.js: caracterizareUzual, o aplicație Web realizează un număr mare de
operații – în acest caz, asincrone – de intrare/ieșire
G. Yeh (2014): www.slideshare.net/garyyeh165/basic-understanding-and-implement-of-nodejs

Operațiile de intrare/ieșire sunt asincrone
fiecare cerere (operație) adresată aplicației
– e.g., acces la disc, la rețea, la alt proces – poate avea
atașată o funcție de tratare a unui eveniment specific
evented I/O

cod JS executat de
client (browser Web)
cod JS rulat pe partea
de server (node.js)
așteaptă și tratează
evenimente de
interacțiune
(onclick, onmouseover,
onkeypressed,…)
procesare
bazată pe
evenimente
evented/
event-based
așteaptă și tratează
cereri (evenimente)
provenite de la client(i)
programul trebuie să fie
responsiv atunci când
așteaptă încărcarea
datelor de pe rețea
(e.g., JSON, XML, imagini,
video) via Ajax/Comet
ori socket-uri Web
asincronism
(e.g., operatii
neblocante)
programul trebuie să fie
responsiv atunci când
așteaptă încărcarea
datelor locale/externe
(preluate din baze de
date, fișiere,
servicii Web, API-uri,…)
adaptare după Ben Sheldon (2012)

O aplicație node.js rulează într-un singur proces
event loop ≡ “an entity that handles & processes external
events and converts them into callback invocations”
http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/

event loop ≡ “an entity that handles & processes external
events and converts them into callback invocations”
codul JavaScript nu este executat paralel,
dar tratează în mod asincron diverse evenimente I/O
http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/

Aplicația node.js „reacționează” la evenimente
context mai larg: reactive programming – http://reactivex.io/
G. Yeh (2014): www.slideshare.net/garyyeh165/basic-understanding-and-implement-of-nodejs

deosebire esențială față de serverele de aplicații Web
tradiționale ce recurg la servere multi-process/threaded

server tipic server node.js
adaptare după Ben Sheldon (2012)

bijoor.me/2013/06/09/java-ee-threads-vs-node-js-which-is-better-for-concurrent-data-processing-operations/
operații de intrare/ieșire sincrone
versus
operații de intrare/ieșire asincrone

HTTP: server Web
strongloop.github.io/strongloop.com/strongblog/node-js-is-faster-than-java/

Mediul node.js e disponibil gratuit – open source –
pentru platformele UNIX/Linux, Windows, MacOS
https://nodejs.org/en/download/

funcționalități suplimentare
oferite de module administrate cu npm – https://npmjs.org/

Utilitarul npm poate gestiona dependențe imbricate
detalii la docs.npmjs.com

node.js: exemplu
Un prim program care emite mesaje de salut
// salutari.js: un program (de sine-stătător) care emite un salut
console.log ('Salutari banale din Node.js');
invocarea unei
metode oferită de
un obiect predefinit

node.js: exemplu
Un prim program care emite mesaje de salut
// salutari.js: un program (de sine-stătător) care emite un salut
console.log ('Salutari banale din Node.js');
> node salutari.js
Salutari banale din Node.js

/* Un program JavaScript ilustrând comportamentul asincron
al operațiilor I/O implementate de Node.js */
var fs = require ('fs'); // acces la sistemul de fișiere
fs.readFile ('salutari.txt', 'utf-8', function (eroare, date) {
if (eroare)
throw eroare; // excepție de citire
console.log (date);
})
console.log ('Gata!');

execuția (cod interpretat) pornește
de la prima linie a programului JavaScript

if (eroare)
console.log (date);
})

începe execuția unei operații asincrone
(aici, citirea conținutului unui fișier text)
care returnează imediat

if (eroare)
console.log (date);
})
console.log ('Gata!');
execuția continuă cu ultima linie de program
> node asincronism.js
Gata!

if (eroare)
console.log (date);
})

…după care sunt afișate datele preluate din fișier
> node asincronism.js
Gata!
Un prim salut...
Acesta este al doilea salut.

// Un program JavaScript care salută toți posibilii săi clienți Web
var http = require ('http'); // folosim 'http', un modul Node predefinit
http.createServer ( // creăm un server Web
// funcție anonimă ce tratează o cerere și trimite un răspuns
function (cerere, raspuns) {
// afișăm la consola serverului mesaje de diagnostic
console.log ('Am primit o cerere...');
// stabilim valori pentru diverse câmpuri din antetul mesajului HTTP
raspuns.writeHead (200, { 'Content-Type': 'text/html' });
// emitem răspunsul propriu-zis conform tipului MIME (aici, cod HTML)
raspuns.end ('<html><body><h1>Salutari…</h1></body></html>');
}
// serverul ascultă cereri la portul 8080 al mașinii locale
).listen (8080, "127.0.0.1");
console.log ('Serverul creat asteapta cereri la http://127.0.0.1:8080/');

pe partea de server – așteptare de cereri
> node salutari-web.js
Serverul creat asteapta cereri la http://127.0.0.1:8080/
Am primit o cerere...
programul JavaScript creat funcționează ca un server Web
pentru fiecare cerere emisă de un posibil client (browser,
aplicație desktop etc.) conform modelului client/server

pe partea de server – așteptare de cereri
> node salutari-web.js
Serverul creat asteapta cereri la http://127.0.0.1:8080/
la client – recepționarea răspunsului conform cererii GET
emise de un program desktop și de un navigator Web
> node client-salutari.js
Am primit raspuns de la server -- cod HTTP: 200
Continut receptionat: <html><body>
<h1>Salutari din Node.js</h1></body></html>
programul JavaScript creat funcționează ca un server Web
pentru fiecare cerere emisă de un posibil client (browser,
aplicație desktop etc.) conform modelului client/server

// Un program JS care implementează un client pentru serviciul de salut
var http = require ('http');
http.get ('http://127.0.0.1:8080/', // emite o cerere HTTP
function (raspuns) {
console.log ('Am primit raspuns de la server -- cod HTTP: '
+ raspuns.statusCode); // statusCode: 200, 404,…
})
// tratăm diverse evenimente via funcții (eventual, anonime) de tip callback
.on ('error', // eroare
function (e) { console.log ('Eroare: ' + e.message); })
.on ('response', // receptare răspuns de la server
function (raspuns) { // există date de procesat
raspuns.on ('data', function (date) {
console.log ('Continut receptionat: ' + date);
});
}
);

node.js: module
Funcția require () specifică utilizarea unui modul Node.js
module predefinite (built-in):
privitoare la tehnologii Web – http, https, url, querystring
referitoare la fișiere – fs, path
vizând rețeaua – net, dns, dgram, tls,…
resurse privind sistemul de operare – os, child_process
alte aspecte de interes – buffer, console, util, crypto
suport multi-core – cluster

node.js: module
documentația online aferentă
nodejs.org/en/docs/
devdocs.io/node/

node.js: module
atenție:
o parte dintre funcționalități
sunt experimentale
nodejs.org/api/documentation.html

node.js: module – http
Dezvoltarea de aplicații Web via modulul http
funcționalități HTTP de bază
crearea unui server Web: createServer()
realizarea de cereri HTTP: request() get()

servire de cereri HTTP – clasa http.Server
metode uzuale:
listen() setTimeout() close()
evenimente ce pot fi tratate:
request connect close clientError etc.

răspuns emis de server – clasa http.ServerResponse
metode uzuale:
writeHead() getHeader() removeHeader() write() end() etc.
evenimente: close finish
proprietăți folositoare: statusCode headersSent

cerere emisă de client – clasa http.ClientRequest
metode uzuale:
write() abort() end() setTimeout() setSocketKeepAlive()
evenimente ce pot fi tratate:
response connect continue socket etc.

mesaj vehiculat – clasa http.IncomingMessage
metode: setEncoding() setTimeout() pause() resume()
evenimente ce pot fi tratate: data end close
proprietăți de interes:
httpVersion headers method url statusCode socket

node.js: module – url
Procesarea adreselor Web via modulul url
metode oferite:
parse() format() resolve()
nodejs.org/api/url.html

var url = require ('url');
var adresaWeb = url.parse (
'http://undeva.info:8080/oferta/jucarii/produs/?nume=Tux&marime=17#descriere',
true // generează un obiect 'query' ce include câmpurile din querystring
);
console.log (adresaWeb);
if (adresaWeb['query'].marime > 13) {
console.log ('Jucaria e in regula.');
} else {
console.log ('Jucaria e stricata.');
}

> node url.js
{ protocol: 'http:',
slashes: true,
auth: null,
host: 'undeva.info:8080',
port: '8080',
hostname: 'undeva.info',
hash: '#descriere',
search: '?nume=Tux&marime=17',
query: { nume: 'Tux', marime: '17' },
pathname: '/oferta/jucarii/produs/',
path: '/oferta/jucarii/produs/?nume=Tux&marime=17',
href: 'http://undeva.info:8080/oferta/jucarii/produs/?nume=…'
}
Jucaria e in regula.

node.js: module – net
Crearea de aplicații Internet – modulul net
partea de server:
createServer()
+
clasa net.Server
metode: listen() close() address() getConnections()
evenimente: listening connection close error

partea de client:
connect()
createConnection()

acces la socket-uri – clasa net.Socket
metode: connect() write() setEncoding() destroy() end() etc.
evenimente: connect data end timeout drain error close
proprietăți utile: localAddress localPort
remoteAddress remotePort bytesRead bytesWritten bufferSize

node.js: module – fs
Acces la sistemul de fișiere via modulul fs
metode folosite uzual – comportament asincron:
open() read() write() close()
truncate() stat() chmod() rename() exists()
isFile() isDirectory() isSocket()
mkdir() rmdir() readdir()

node.js: module – fs
Acces la sistemul de fișiere via modulul fs
studiu de caz (Victor Porof, 2013 – absolvent FII):
generare de liste de melodii via iTunes și Last.fm
(ilustrează și maniera de creare a modulelor proprii)
https://github.com/victorporof/plgen

node.js: fluxuri de date
Accesul la date poate fi realizat
prin intermediul fluxurilor (streams)
abstractizează accesul la date stocate parțial
(partially buffered data)
se emit evenimente ce pot fi tratate de codul aplicației

pot fi citite – stream.Readable
pot fi scrise – stream.Writable
duplex (citite și scrise) – stream.Duplex
realizând o transformare a datelor – stream.Transform
detalii la https://nodejs.org/api/stream.html
medium.freecodecamp.org/node-js-streams-everything-you-need-to-know-c9141306be93

fluxuri ce pot fi citite (readable streams)
e.g., create de fs.createReadStream() http.ServerRequest
http.ClientResponse net.Socket child.stdout process.stdin

emit evenimentele readable data end error

au asociate metodele pause() resume() destroy()

fluxuri ce pot fi scrise (writeable streams)
e.g., create de fs.createWriteStream() http.ServerResponse
http.ClientRequest net.Socket child.stdin process.stdout

emit evenimentele drain error

oferă metodele write() end() destroy()

// Program ce preia ceea ce tastează utilizatorul la intrarea standard
// și scrie într-un fișier – conform M. Takada (2012)
var fs = require ('fs');
var fisier = fs.createWriteStream ('./spion.txt');
// la apariția datelor, le scriem în fișier
process.stdin.on ('data', function (date) { fisier.write (date); } );
// tratăm evenimentul de terminare a fluxului
process.stdin.on ('end', function() { fisier.end (); } );
// "reactivăm" intrarea standard; implicit, e în starea 'paused'
process.stdin.resume ();
obiectul process e global – detalii la nodejs.org/api/process.html

exemple de fluxuri de tip duplex:
socket-uri TCP create cu net.Socket()
privind arhivele create cu zlib – nodejs.org/api/zlib.html
date criptate via crypto – nodejs.org/api/crypto.html

node.js: rulare temporizată
Se poate planifica execuția codului JavaScript
recurgerea la funcțiile globale
setTimeout ()
clearTimeout ()
setInterval ()
clearInterval ()

// creăm un server Web care trimite fiecărui client secvența valorilor unui contor
var server = http.createServer ().listen (8080, '127.0.0.1');
// stabilim un comportament la apariția evenimentului 'request' (cerere de la un client)
server.on ('request', function (cerere, raspuns) {
console.log ('Cerere de la clientul ' + cerere.headers['user-agent']);
raspuns.writeHead (200, { 'Content-Type': 'text/html' });
var contor = 0;
var interval = setInterval ( // generăm valori ale contorului conform intervalului de timp
function () {
raspuns.write ('<p>Contorul are valoarea ' + contor + '</p>');
console.log ('Contorul are valoarea ' + contor);
contor++;
if (contor >= 7) {
clearInterval (interval); // ștergem intervalul
raspuns.end (); // închidem fluxul de răspuns
console.log ('Am trimis raspuns clientului ' + cerere.headers['user-agent']);
}
}, 1000); // cod rulat la interval de 1000 milisecunde
});

Cerere de la clientul … Mozilla/5.0 (Windows NT 10.0 …) … Firefox/56.0
Contorul are valoarea 0
Cerere de la clientul … Edge/14.14393
Am trimis raspuns clientului … Mozilla/5.0 (Windows NT 10.0 …) … Firefox/56.0
Am trimis raspuns clientului … Edge/14.14393
codul este rulat
asincron

Cerere de la clientul … Mozilla/5.0 (Windows NT 10.0 …) … Firefox/56.0
Cerere de la clientul … Edge/14.14393
Am trimis raspuns clientului … Mozilla/5.0 (Windows NT 10.0 …) … Firefox/56.0
Am trimis raspuns clientului … Edge/14.14393
browser-ul Web va aștepta ca întreaga secvență de valori
să fie trimisă de către serverde ce?

node.js: evenimente
Emiterea (lansarea) și tratarea (prinderea)
evenimentelor specificate de programator
se realizează via event.EventEmitter
clasă utilizată intern de multe biblioteci de bază
nodejs.org/api/events.html

node.js: module externe
module disponibile on-line (instalate via utilitarul npm)
de studiat Understanding NPM
https://unpm.nodesource.com/

node.js: module externe
instalare globală a unui modul: npm install modul –g
listarea modulelor ce sunt instalate local: npm list
căutarea unui modul: npm search modul
eliminarea unui modul: npm uninstall modul
actualizarea unui modul: npm update modul

node.js: module – acces la baze de date
Operații cu baze de date relaționale SQLite
recurgerea la modulul sql.js implementat în JavaScript
via compilatorul emscripten
nu depinde de alte module
detalii la www.npmjs.com/package/sql.js
exemple demonstrative (interpretor SQL ca aplicație Web):
http://kripken.github.io/sql.js/GUI/

node.js: module – studiu de caz
Dorim să realizăm un mini-robot care procesează
conținutul diverselor resurse disponibile pe Web
rol de client pentru un server Web
prelucrează codul HTMLWeb scraping
metode consacrate:
DOM (Document Object Model)
SAX (Simple API for XML)

// realizează procesarea dorită (Web scrapping)
function procesareHTML (document) {
var adrese = [ ];
// instanțiem un procesor DOM
try {
var doc = new dom().parseFromString (document, "text/html");
// preluăm toate elementele <a>
var noduri = doc.getElementsByTagName ('a');
// obținem valoarea atributului 'href' (URL-ul)
for (var i = 0; i < noduri.length; i++) {
// plasăm în tablou doar dacă e relativ și e prefixat de "/url?q="
var uri = noduri[i].getAttribute ('href');
if (!uri.match (/^http(s?)/gi) && uri.match (/^/url?q=/g))
adrese.push (uri);
}
} catch (e) { console.log (e.message); }
return (adrese);
} procesare document cu DOMParser
developer.mozilla.org/DOMParser

node.js: module
lista modulelor Node.js
nodejsmodules.org/

node.js: framework-uri web
Uzual, încurajează dezvoltarea de aplicații Web
în care interacțiunea cu utilizatorul
se realizează într-o singură pagină
(SPA – Single-Page Applications)
real-time single-page Web apps

node.js: framework-uri web – exemple
Alte facilități notabile:
MVC (Model-View-Controller) și variantele
transfer de date în timp-real – e.g., cu Socket.IO
servicii Web – paradigma REST
suport pentru baze de date NoSQL
machete de redare a conținutului (templates)

node.js: framework-uri web – exemple
http://nodeframework.com/

node.js: framework-uri web – connect
Framework extensibil de tip middleware
dedicat deservirii de cereri HTTP
github.com/senchalabs/connect

O cerere HTTP dată poate fi procesată – via use() –
de una sau mai multe extensii (plugin-uri) specifice
această înlănțuire se denumește stivă (stack)
utilizarea unei extensii poate depinde de URL cererii
dirijare (routing) – e.g., util în contextul REST

Extensii utile:
body-parser – procesări diverse
(e.g., text, date dintr-un formular Web, date JSON,…)
compression – procesarea mesajelor compresate (gzip)
cookie-parser – prelucrarea de cookie-uri
cookie-session express-session – sesiuni Web
errorhandler – tratarea erorilor
morgan – suport pentru jurnalizare (logging)
csurf – protecție CSRF (Cross-Site Request Forgery)
serve-static – deservirea conținutului static (i.e. fișiere)
vhost – suport pentru găzduire virtuală

node.js: framework-uri web – express
Framework minimalist
ce încurajează dezvoltarea de aplicații Web
tradiționale – reprezentări multiple via hipermedia
bazate pe un unic punct de acces: SPA (Single Page App)
hibride (Web + aplicații native)
expressjs.com

/
│ app.js
│ package.json
├───bin
├───data
├───node_modules
│ ├───body-parser
│ ├───cookie-parser
│ ├───debug
│ ├───express
│ │ ├───lib
│ ├───jade
│ ├───morgan
├───public
│ ├───images
│ ├───javascripts
│ └───stylesheets
│ style.css
├───routes
│ index.js
│ users.js
└───views
error.jade
index.jade
layout.jade
eșafodajul unei aplicații Web bazate pe Express
specificarea interfeței (view-ul)
via machete de vizualizare descrise
cu JADE: http://jade-lang.com/
rute vizând deservirea cererilor pe
baza URL-urilor solicitate de client
module Node.js adiționale
conținut static destinat clientului
(e.g., foi de stiluri CSS, biblioteci JS
procesate de browser, imagini,…)
diverse configurări ale aplicației
specificarea modelelor de date

node.js: framework-uri web
MEAN (MongoDB, Express, Angular, Node.js) – mean.io
full stack Web development
exemplificări:
devcenter.heroku.com/articles/mean-apps-restful-api
scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular

node.js: suport es6
Node.js 4+ oferă suport pentru ECMAScript 2015 (ES6)
facilități deja incluse:
declararea variabilelor cu let și const
specificarea claselor
colecții de date (Map, WeakMap, Set, WeakSet)
generatori
execuție asincronă (Promises)
....
nodejs.org/en/docs/es6/

node.js: suport es6
situația curentă a facilităților ECMAScript implementate
de instrumente de conversie, navigatoare Web și Node.js
http://kangax.github.io/compat-table/es2016plus/

node.js: suport es6
Node.js – starea actuală de implementare
a facilităților oferite de ECMAScript: node.green

node.js: utilizări pragmatice
Deservirea unui volum mare de conexiuni
concurente cu necesar minim de resurse
(procesor, memorie) într-un singur proces

Procesarea în timp-real
a datelor JSON oferite de API-uri (multiple)
inclusiv, crearea de aplicații
oferind fluxuri de date (streaming data)

Procesarea în timp-real
a datelor JSON oferite de API-uri (multiple)
caz practic: redirectarea unui flux de mesaje Twitter
spre dispozitive via PubNub (Marinacci, 2016)
www.pubnub.com/blog/2016-04-14-connect-twitter-and-pubnub-in-one-line-of-code-with-nodejs-streams/

Dezvoltarea rapidă de servicii Web
sau API-uri conform paradigmei REST
(REpresentational State Transfer)
câteva framework-uri pentru dezvoltarea de API-uri:
actionHero.js, facet, Frisby, restify, restmvc, percolator,…

Crearea de aplicații native (desktop)
folosind tehnologii Web moderne precum HTML5
nw.js (fost node-webkit)
utilizarea modulelor Node.js direct la nivel de DOM
http://nwjs.io/

node.js: instrumente de dezvoltare
Mediu de dezvoltare tradițional (desktop)
exemplificări:
Nodeclipse & Enide (pentru Eclipse)
www.nodeclipse.org
Node.js Tools for Visual Studio
www.visualstudio.com/vs/node-js/

dezvoltare „în nori” de aplicații Web – e.g., Cloud9 și Koding
S. Buraga, Cu codul în „nori” (2015) – www.slideshare.net/busaco/cu-codul-n-nori

rezumat
⍟dezvoltarea de aplicații Web la nivel de server
cu Node.js – caracteristici, module, exemple

WADe 2017-2018 Tutorial (1/3): Web Application Development with Node.js – An Introduction

More Related Content

What's hot (17)

Similar to WADe 2017-2018 Tutorial (1/3): Web Application Development with Node.js – An Introduction (20)

More from Sabin Buraga (20)

WADe 2017-2018 Tutorial (1/3): Web Application Development with Node.js – An Introduction