Server-side Javascript

Transcript

1 Corso di Applicazioni Telematiche A.A Server-side Javascript Autore: Ing. Paolo Saviano Università degli Studi di Napoli Federico II Facoltà di Ingegneria

2 Overview JavaScript Reminder Perché le persone amano JavaScript Perché le persone odiano JavaScript JavaScript server-side Scripting Introduzione a NodeJS Il Node Package Manager NodeJS modules

3 Javascript Reminder Le proprietà del linguaggio - Dynamic Programming Language Sono linguaggi che eseguono a runtime direttamente durante l'esecuzione molte operazioni che i linguaggi statici svolgono al tempo di compilazione. - Single Threaded & Asynchronous Tutto viene eseguito in thread differenti eccetto il nostro codice - Versatile può essere incluso in molti tipi di pagine ASP, PHP,... può girare su molte piattaforme Browser, Server, Nativi,...

4 Ma non è tutto codice nostro? Non tutto, spesso il codice da noi scritto esegue operazioni al di fuori del nostro 'controllo': Richiedere una pagina ad un server, ad esempio, prevede un tempo di propagazione delle informazioni sulla rete ed un tempo di elaborazione della richiesta da parte del server. In un ambiente single threaded sincrono l esecuzione del nostro codice si arresterebbe in attesa della risposta dal server. La filosofia asincrona adottata da JavaScript è diversa: Invece di attendere la risposta si preferisce definire cosa fare una volta ricevuta la risposta si definisce cioè una funzione di callback e si va alla successiva porzione di codice. - Esempio: Dividiamo il seguente codice in 4 blocchi:

5 Ma non è tutto codice nostro? - Supponiamo che ogni blocco impieghi 10ms, e la richiesta remota 20ms - Supponiamo che ogni blocco impieghi 10ms, e la richiesta remota 5ms Il blocco 3, sebbene possa essere eseguito al termine della richiesta remota, attende il completamento del blocco 4!

6 JavaScript Reminder La sintassi - Loosely type Non richiede di dichiarare il tipo di una variabile prima del suo utilizzo - Variabili hoisted (sollevate) Le variabili possono essere dichiarate dopo il loro utilizzo

7 JavaScript Reminder Perché funziona? L interpretazione del codice JavaScript è garantita dalla presenza di un JavaScript Engine Esistono molti motori JavaScript: - Rhino: Implementazione Open source in Java di Mozilla - SpiderMonkey: Altro progetto Mozilla, in C, utilizzato in Gecko (Firefox) - V8: Motore Open source (Google) in C++ e presente in Chrome - Chakra: Motore Open source (Microsoft) in C++ presente in Edge

8 JavaScript Reminder Il codice sorgente viene analizzato attraverso le parserapi e trasformato in un albero della sintassi astratto (AST) Questo albero viene poi trasformato in bytecode ed interpretato durante la fase di esecuzione.

9 Il Google V8 JavaScript Engine Il motore V8 di Google ad esempio gestisce l'allocazione di memoria, la garbage collection, compila ed esegue il codice sorgente JavaScript. E' una compilazione a volo fatta da un compilatore JIT Just in time. Utilizza due diversi compilatori: - Full-codegen: un compilatore veloce che produce codice non-ottimo - Crankshaft: un compilatore più lento che produce codice veloce ed ottimizzato. Se il Crankshaft riscontra che il codice non ottimizzato generato dal Full codegen è particolarmente inefficiente, lo sostituisce.

10 Perché le persone amano JS? Perché è semplice - Linguaggio molto espressivo e leggibile - Facile fare manutenzione se scritto bene! Perché è coerente - Semplice da prevedere e da imparare - Applica i suoi principi base in modo uniforme - I suoi principi base sono validi sempre e senza eccezioni Perché è diffuso - Serve un Model-View-Controller? AngularJS - Librerie grafiche WebGL? Three.js - Una soluzione per il templating? Handlebars.js - Vuoi sviluppare su smartphone? IonicFramework

11 Perché le persone amano JS? Perché è veloce In una tradizionale applicazione server rendered, ogni interazione dell'utente necessita di una comunicazione con il server, rallentando di molto l'efficienza della pagina. Le applicazioni JavaScript sono differenti: Esse caricano in anticipo l'intero set di informazioni disponibili e, una volta avviate, sono in grado di gestire i template, la logica, etc... Sono obbligate a contattare il server unicamente per recuperare delle informazioni impossibili da ottenere al momento del caricamento iniziale.

12 Perché le persone amano JS? Perché è modulare I moduli sono frammenti di codice che implementano specifiche funzionalità e sono scritti utilizzando particolari specifiche/pattern. Scrivere un modulo vuol dire sviluppare una soluzione ad un problema (come l autenticazione, il parsing e la validazione dei dati, etc.. ) ed impacchettarla per poterla utilizzare altrove senza reinventare la ruota. Solo l ultima specifica Javascript ECMAScript6 prevede uno schema di implementazione dei moduli out of the box, fino a quando sarà lo standard dovremo organizzarci usando librerie esterne - CommonJS - Asynchronous Module Definition - AMD - UMD - ESHarmony, WebModule, WebComponents...

13 Cosa sono questi moduli? Un modulo fatto in casa Solo le proprietà dell oggetto modulo sono visibili all esterno della funzione

14 Perché le persone odiano JS? Perché è lento - Performance strabilianti, ma solo dopo il caricamento iniziale - Il tempo di attesa di un utente su una pagina web è molto basso! Perché è insicuro - Insicuro per lo sviluppatore Il codice scritto è sotto il controllo dell'utente! Può ispezionarlo, comprenderlo e modificarlo in ogni sua parte - Insicuro per l utente Clickjacking, Code Injection...c è un corso dedicato! Perché è troppo dipendente dal motore JS

15 Perché le persone odiano JS? Perché è diffuso troppo!

16 Server Side JavaScript 1995 Netscape LiveWire - Netscape prevedeva già un motore JS server side, ma ebbe poco successo - JavaScript era acerbo, hardware non all altezza - Diverso modo di sviluppare software: Progetti monolitici 2005 Il ritorno dello JavaScript - JavaScript più maturo - Nuovo modo di concepire il software sviluppo Agile - Poche persone coinvolte nello sviluppo del software JS è modulare, e ha una vasta community - Poche persone coinvolte nel mantenimento del software JS è versatile, medesimo codice in tanti ambienti - è importante minimizzare il loro Time to market - JS è semplice da imparare ed implementare

17 Server Side JavaScript Possiamo prendere solo il meglio! (o quasi) In questi scenari scrivere un server JavaScript ci permette di evitare alcune delle difficoltà incontrate in precedenza! - Mantiene il nostro codice semplice, minimizzando lo sforzo di sviluppo - E' una soluzione 'leggera' che minimizza le risorse necessarie - L'iniziale latenza in fase di bootstrap del JavaScript client-side è evitata - Il codice è eseguito lato sever, permettendoci la "Security through obscurity" - Risolvo problemi utilizzando soluzioni già implementate dalla comunità Ci sono tantissimi server già esistenti - DB: MongoDB, CouchDB, ArangoDB - WebServer: Aptana Jaxer - Frameworks: Jaggery.js, Node.js, Wakanda, Helma - IoT: JXcore

18 L importanza dei moduli Ancora più importante la modularità: I progetti cominciano ad avere sempre più componenti scritti in javascript È necessario mettere ordine nel codice! Ciascun modulo può essere scritto in maniera individuale, e questo aumenta la team scalability Ciascun modulo può essere debuggato in maniera indipendente, riducendo i costi di testing Scope e contesto di ciascun modulo possono essere controllati, i moduli possono essere quindi isolati.

19 CommonJS CommonJS CommonJS nasce come sforzo per standardizzare le API JavaScript, ed include anche uno standard per l implementazione dei moduli, principalmente lato server. I moduli CommonJS richiedono che l'ambiente abbia tre variabili: require, exports e module.

20 CommonJS - Esempio require: se il codice richiede la presenza di altri moduli per svolgere il suo lavoro, questi possono essere referenziati attraverso la funzione require, che assegna il modulo ad una variabile locale In questo caso utilizziamo un modulo precedentemente definito che associa ad ogni nome utente una password

21 CommonJS - Esempio exports: La variabile exports espone le API pubbliche del metodo, ovvero l unica parte che può essere richiamata dal resto dell ambiente Tutti gli oggetti, le funzioni, i costruttori, etc che il modulo offre devono essere registrati come proprietà dell oggetto exports In questo caso assegnamo alla proprietà login di export l oggetto loginmodule, rendendo disponibile all esterno la sua funzione di login

22 CommonJS - Esempio module: La variabile module è stata originariamente per offrire i metadati di un modulo all esterno, ovvero il suo ID e la sua URI (univoca) In realtà il funzionamento di module è stato riscritto nel tempo per permettere l esportazione non solo di un object (come nel caso di exports) ma anche per esportare semplici costruttori, funzioni isolate a stringhe. Usare exports per queste operazioni rischia di creare, soprattutto per le funzioni problemi di dipendenza circolare

23 CommonJS - Esempio module: La variabile module è stata originariamente per offrire i metadati di un modulo all esterno, ovvero il suo ID e la sua URI (univoca) In realtà il funzionamento di module è stato riscritto nel tempo per permettere l esportazione non solo di un object (come nel caso di exports) ma anche per esportare semplici costruttori, funzioni isolate e stringhe. Usare exports per queste operazioni rischia di creare problemi come la perdita di referenza o l inserimento di dipendenze circolari.

24 NodeJS Overview Cos è NodeJS? Le basi NPM La potenza dei moduli Qualche Esempio

25 NodeJS Definizioni 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 - Si presenta con performance molto elevate - Utilizza V8 - E strettamente vincolato alle libuv Libreria di supporto multipiattaforma che si concentra sull I/O asincrono Per lo sviluppatore è single-threaded Il funzionamento è però caratterizzato dall I/O asincrono Libuv gestisce il threading, attraverso un pool di thread Il principale ciclo di funzionamento è detto event-loop

26 NodeJS

27 Qual è il segreto di NodeJS? In molti sistemi tutte le system calls, come leggere o scrivere file, interrogare un DB, sono 'bloccanti', ovvero l'esecuzione si ferma ed attende un risultato. Questi paradigmi sono chiamati blocking I/O e programmazione sincrona. Più tempo il programma si arresta, più aumenta il costo di I/O, più ovviamente le prestazioni degradano. I moderni server come Apache sono multi threaded, ovvero generano (spawn) un thread per ogni richiesta ricevuta. Quando il programma in esecuzione si mette in attesa di una risposta I/O, il thread/processo viene messo in sleep, ma continua a consumare delle risorse del sistema. Ciascuna richiesta avrà un thread pendente, consumando CPU e memoria. - Al crescere delle richieste avremo il classico collo di bottiglia!

28 Qual è il segreto di NodeJS? Node.js utilizza un approccio differente per risolvere questo problema: Serve tutte le richieste con un unico thread. Il codice in questo thread è sempre eseguito in maniera sincrona: Ad ogni occorrenza di una system call un operazione I/O come l interrogazione di un DB, o la gestione di eventi del file system essa viene delegata all'event loop assieme ad una funzione di callback. Il thread principale non va in sleep e continua a servire successive richieste. Appena la precedente system call viene completata, l'event loop esegue la funzione di callback associata, il cui compito tipicamente è quello di restituire un valore. Il programma principale non viene bloccato dalle operazioni I/O! - Non-Blocking I/O! - Programmazione asincrona!

29 Event-Loop Se arriva una nuova richiesta da un client essa viene messa in una coda detta Event Queue, ovvero una lista di eventi e callback. L Event Loop controlla la Queue in attesa di una richiesta.

30 Event-Loop Se la richiesta giunta non richiede operazioni I/O e può essere soddisfatta, sarà il thread principale a impegnare le proprie risorse per eseguirla Non sarà possibile soddisfare altre richieste fino al termine dell esecuzione!

31 Event-Loop Se invece arriva una richiesta che necessita di operazioni I/O, l Event Loop demanderà l esecuzione ad un thread diverso, scelto tra quelli disponibili in una Thread Pool. Questa operazione è possibile grazie alle libuv

32 Event-Loop Quando l operazione viene completata, la callback a cui era associato l evento scatenante è messa in coda per essere processata.

33 Event-Loop Appena possibile il nostro thread esegue la callback che era stata messa in coda

34 Hello Node Install nodejs Versioni Se cercate in giro troverete un po di confusione tra le versioni di Node.js Può sembrare che node sia passato dalla versione 0.10.x alla 4.x. Questo perché ad un certo punto il progetto node fu portato avanti, in parallelo, anche da un altro gruppo di sviluppatori con il nome di IO.js Questi ultimi adottavano un altra notazione per le versioni: Invece di 0.1.x, 0.2.x, evolvevano come 1.x, 2.x, Quando poi, in tempi recenti, i due progetti sono stati riunificati, si è scelto di usare la notazione di IO.js

35 Node Package Manager NPM è il gestore dei package usato da NodeJS. Ci sono oltre moduli anche se non tutti di ottima qualità. E probabile che, se vi trovate davanti ad un problema, qui possiate trovare qualcuno che ha già trovato una soluzione package.json È il file che sta dietro le quinte di ogni progetto node. Esso memorizza alcune informazioni generali metadati dell'applicazione Ad esempio: - nome - autore - descrizione - script automatizzati - versione - licenza - dipendenze - - bug noti

36 Il file package.json Tra le altre cose è in grado di gestire tutte le dipendenze in maniera automatica Generiamo interattivamente un file package.json attraverso il comando npm init Dopo alcune domande verrà prodotto un file simile al seguente!

37 package.json - dipendenze Aggiungiamo delle dipendenze al nostro progetto, ad esempio express: npm install express --save A volte è necessario installare pacchetti che non serviranno all'applicazione quando sarà messa in produzione, ad esempio librerie utili per testare o per minimizzare il nostro codice. Aggiungiamo anche queste dipendenze al nostro progetto, ad esempio mocha: npm install mocha -save-dev Questi comandi avranno 2 effetti: - express e mocha saranno scaricati ed installati nella cartella node_modules/ - il package.json sarà modificato come nell'esempio

38 package.json - dipendenze Legenda ^ - versione compatibile con > - versione maggiore di >= - maggiore o uguale di < - versione minore di 1.2.x qualsiasi sottoversione di ~ la più recente sottoversione Partendo dal package.json presente in una cartella è possibile installare tutte le dipendenze con il comando: npm install

39 package.json - scripts Il package.json ha anche la possibilità di registrare alcuni comandi per facilitare le operazioni dello sviluppatore, rendendolo capace di richiamare da riga di comando piccole utility di compilazione o anche meccanismi più complessi. E possibile assegnare a questi script nomi predefiniti - start, prestart, poststart - test, pretest, posttest - e molti, molti altri... npm start oppure npm test oppure npm prestart oppure Oppure assegnare allo script il nome che preferiamo, ma cambia il comando per lanciarlo! npm run script-personalizzato

40 NodeJS Packages Ecco perché abbiamo parlato dei moduli CommonJS... Modulo http Express Socket.IO NodeJS in azione

41 Il modulo http È un piccolo modulo integrato in nodejs che gestisce la comunicazione http Implementa una serie di funzionalità di basso livello, come scrivere sullo stream della risposta...

42 Express Express è un framework per applicazioni web Node.js Routing di base: app.method(path, HANDLER)

43 Express Modulo molto potente che semplifica e potenzia l utilizzo del modulo http: Ci permette di gestire molto facilmente le rotte di indirizzamento routing e le funzionalità di accesso al filesystem Stiamo facendo servire al modulo Express una pagina index.html Se avessimo voluto fare tutto con http avremmo dovuto usare un modulo per la gestione dei file! È una catena! Express si istanzia ed usa il server definito dal modulo http, giocando il ruolo di middleware. Le richieste ad http vengono elaborate da express

44 Socket.IO Un problema classico: Ricevere aggiornamenti dal server - Long Polling Il client richiede aggiornamenti periodici al server Vengono utilizzate connessioni multiple client server: alta latenza - WebSocket Viene aperto un canale bidirezionale tra client e server Entrambi possono inviare dati in qualsiasi momento: bassa latenza :( :) Niente Paura!! Vedrete queste cose nelle prossime lezioni del corso

45 Socket.IO Socket.IO è una libreria JavaScript che fornisce le API necessarie per implementare una comunicazione real time bidirezionale basata sugli eventi su ogni piattaforma, browser o device. Socket.IO fornisce in maniera trasparente dei meccanismi di fallback per garantire la comunicazione laddove le WebSocket non fossero utilizzabili: Ajax Long Polling, Ajax Multipart Streaming, etc etc... Cosa possiamo farci - Analisi real-time - Messaggistica istantanea - Lavoro collaborativo

46 Socket.IO - Utilizzo Socket.IO richiede l utilizzo di librerie sia lato client che lato server Client-side - Aggiungiamo il codice necessario alla nostra pagina web Server-side - Installiamo nel nostro server node il modulo socket.io npm install socket.io --save

47 Socket.IO - Client La libreria lato client ci permette di utilizzare le seguenti API: Registrazione al backend - io() - se non viene passato alcun parametro al metodo io() la connessione sarà verso lo stesso indirizzo (e porto) della pagina - la connessione verrà notificata dall evento connect - la disconnessione verrà notificata dall evento disconnect

48 Socket.IO - Client Invio di eventi emit(type, data) - invia un evento di tipo type - il payload dell evento è il valore di data Ricezione di eventi on(type, callback) - Attende un evento di tipo type - Alla ricezione esegue la callback registrata

49 Socket.IO - Server Lato server il procedimento è simile (risolvere i problemi una volta sola) Importare il modulo socket.io - utilizziamo il metodo esposto dal modulo socket.io - inizializziamo il metodo passando l oggetto esposto dal modulo http Ricezione di eventi on(type, callback) - medesimo comportamento del lato client - per la prima connessione attendiamo un evento connection - l evento connection ha come payload l oggetto socket su cui possiamo registrare gli altri eventi attesi!

50 Socket.IO - Server Invio di eventi ad una socket socket.emit(type, data) - medesimo comportamento del lato client Invio di eventi a tutti (broadcast) io.emit(type, data) - stessa sintassi, cambia l oggetto che espone il metodo

51 Aggiungiamo socket.io al progetto e. Vediamo se funziona tutto!

52

53 Backup #1: AMD Asynchronous Module Definition - AMD Le Asynchronous Module Definition (AMD) API specificano un meccanismo per definire i moduli e caricarli in maniera asincrona. I browser possono così utilizzare questa tecnologia senza inficiare performance, usabilità, o incorrere in problemi di cross domain. Le funzioni previste dalle AMD API sono: - define, per definire i moduli e renderli disponibili a successivi caricamenti - require, per caricare i moduli e le loro dipendenze

54 Backup #1: AMD - Esempio

55 Backup #1: AMD I vantaggi di AMD - API molto semplice - Moduli caricati solo quando necessari, caricamento iniziale più veloce - Facile da debuggare Gli svantaggi di AMD - L'Array di dipendenze può essere molto esteso - E più facile l occorrenza di errori umani

56 Backup #2 Express static File statici il middleware static - Serviamo le pagine contenute in una cartella [es /public] - Possiamo mappare più cartelle Possiamo associare un prefisso ad un percorso virtuale ovvero un percorso non esiste effettivamente nel file system. specificando il path, preferibilmente relativo, di caricamento della la directory statica: