MEAN StackMEAN Stack

Francesco Maria Pavone

Nicola Sanitate

Node.jsNode.jsNode.js is a platform built on Chrome's

JavaScript runtime for easily building fast,scalable network applications...

http://nodejs.org

Node.jsNode.jsV8 runtime (2008)

Prestazioni elevate (x10 volte rispetto al passato)Modello I/O asincrono non bloccanteSistema di pacchettizzazione (NPM registry)

Analogia del fast foodAnalogia del fast food

Da:

a:

EsempioEsempiovar file = fs.readFileSync("file.txt");// e ora aspetta...

fs.readFile("file.txt", function(err,data){ print(data);});// e ora continuiamo...

Migliaia di pacchetti (40662):Migliaia di pacchetti (40662):ExpressPassportSocket.IOKarmaJadeGruntBowerYeoman...

ExpressExpressFramework NodeJS per web applicationRouting di baseAdatto a costruire API Rest

get, post, put, deleteUtilizzo di middleware

EsempioEsempiovar express = require('express');var app = new express();...app.get('/',function(req,res){ fs.readFile("articles.json", function(err,articles){ res.json(articles); });});

MongoDbMongoDbNoSQLBase di dati a documenti

Persist differentPersist different

EsempioEsempioRealizzazione blogRealizzazione blog

EsempioEsempioLorem Ipsum

di Pinco Pallino

Tags lorem, ipsum

post autore

* 1

tag

commento

1

*post_tag

1

*

1

*CommentiMario Rossi Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Luigi Bianchi Aliquam velit dui, commodo quis, porttitor eget, convallis et, nisi. Ut venenatis.

20 settembre 2013

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In leo ante, venenatis eu, volutpat ut, imperdiet auctor, enim. Integer porta. Suspendisse fermentum. Praesent lacus. Vestibulum viverra varius enim. Sed a lorem ut est tincidunt consectetuer. Morbi urna. Nullam sapien mauris, venenatis at, fermentum at, tempus eu, urna. Etiam pede nunc, vestibulum vel, rutrum et, tincidunt eu, enim. Mauris ac massa vestibulum nisl facilisis viverra. Curabitur tincidunt tellus nec purus. Aliquam velit dui, commodo quis, porttitor eget, convallis et, nisi. Ut venenatis.

Query al databaseQuery al databaseSELECT * FROM Post p JOIN Autore aON p.autore = a.idWHERE p.id = 25;

SELECT * FROM Commento cWHERE c.post_id = 25;

SELECT * FROM Tag_post tp JOIN Tag tON t.id = tp.tag_idWHERE tp.post_id = 25;

Esempio: blog (documenti)Documenti vs RelazionaleDocumenti vs Relazionale

{ "_id" : ObjectId("3329e84fa45603fbb374bc3d"), "author" : { "name": "Albert", "surname": "Einstein" }, "title" : "Il mio post", "body" : "Il mio post", "comments" : [{ "author": "enrico", "body": "bellissimo post." }, ... ], "date" : ISODate("2013-09-20T15:21:32.543Z"), "permalink" : "Il_mio_post", "tags" : ["mongo", "database"]}

QueryQuerydb.posts.find({title: "Il mio post"})

Schema designSchema designSchemaless? (Schema flessibile)Modellazione attraverso l'applicazione

La struttura dei dati riflette ciò che l'applicazione devemanipolare

To embed or not to embed?To embed or not to embed?

EmbeddingEmbeddingProPro

Performanceaccesso al disco

Consistenzaevitare anomalie nellemodifiche

ControControDimensione documenti

Ridondanza dei dati

Linee guida per l'embeddingLinee guida per l'embeddingRelazioni 1:1Relazioni 1:1

EMBEDEMBED

UtenteEsempio 1:1Esempio 1:1

{ _id: "utente_1", username: "user1", password: "password", profilo: { eta: 25, sesso: "M", ... }}

Linee guida per l'embeddingLinee guida per l'embeddingRelazioni 1:MoltiRelazioni 1:Molti

EMBED (dai molti all'1)EMBED (dai molti all'1)

PostEsempio 1:MoltiEsempio 1:Molti

{ _id: "post_1", titolo: "post1", messaggio: "Il mio primo post", autore: "user_1", commenti: [ { messaggio: "commento 1", autore: "autore 1" }, { messaggio: "commento 2", autore: "autore 2" } ]}

Linee guida per l'embeddingLinee guida per l'embeddingRelazioni Molti:MoltiRelazioni Molti:Molti

LINK (array di ID)LINK (array di ID)

Post

Tag

Esempio Molti:MoltiEsempio Molti:Molti{ _id: "post_1", titolo: "post1", messaggio: "Il mio primo post", autore: "user_1", tags: ["tagId1", "tagId2", ...]}

{ _id: "tagId1", tag: "MongoDB"}

Operazioni di scrittura concorrentiOperazioni di scrittura concorrentiNONO Transazioni Transazioni

SISI Operazioni atomiche Operazioni atomiche

Superheroic JavaScript MVW Framework

HTML enhanced for web apps!

AngularJS is what HTML would have been,had it been designed for building web-apps.

C'era una volta...C'era una volta...

2009 @ Google Inc.2009 @ Google Inc.

Google FeedbackGoogle Feedback6 mesi di progetto17.000 linee di codice front-endsviluppo lentocodice poco testabile

FrustrazioneFrustrazione

Misko HeveryMisko Hevery

Misko HeveryMisko Heverydice di voler riscrivere l'intero progetto

da soloin 2 settimane

con una libreria open-source che ha creato lui per hobby

Misko HeveryMisko HeveryFallisce

ci mette 3 settimaneporta le linee di codice da 17.000 a 1.500

AngularJSAngularJSprogetto patrocinato da Google

394 contributors in tutto il mondosu GitHub sotto MIT License

ConcettiConcettiClient-Side TemplatesModel View ControllerData BindingDependency InjectionDirectives

Client-Side TemplatesClient-Side Templates

Server-Side TemplatesServer-Side TemplatesIl server assembla i dati e il markupIl browser riceve l'HTML e lo mostra

Client-Side TemplatesClient-Side TemplatesIl server invia dati e markupIl browser assembla l'HTML e lo mostra

ConfrontoConfronto

Server-Side TemplatesServer-Side Templates

Client-Side TemplatesClient-Side Templates

<table> <tr> <td>Totale:</td> <td>1000 €</td> </tr></table>

<table> <tr> <td>Totale:</td> <td>{{total}} €</td> </tr></table>

{total: 1000}

EsempioEsempioindex.htmlindex.html

<html ng-app> <head>

<script src="angular.js"></script> <script src="controllers.js"></script>

</head> <body>

<div ng-controller='GreetingCtrl'> <p>{{greeting.text}}, World!</p>

</div> </body>

</html>

controller.jscontroller.js

function GreetingCtrl ($scope) { $scope.greeting = { text: 'Hello' };

}

Model View ControllerModel View Controller

VantaggiVantaggimodello mentale su dove posizionare il codicefacilità per chi deve capire cosa c'è scritto nel codiceapplicazione più estendibile, manutenibile e testabile

MVC in AngularJSMVC in AngularJS

View

Controller

Model

DOM

Funzione

Oggetto

Data BindingData Binding

Prima di AJAXPrima di AJAXTecnologie come Rails, PHP e JSP aiutavano a creare UI

fondendo markup e dati prima di inviarli all'utente

Con l'arrivo di AJAXCon l'arrivo di AJAXQuesto modello è stato esteso grazie alla possibilità di

aggiornare parti del DOM separatamente

ProblemaProblemaHo due rappresentazioni dei dati!

UI JS

Data BindingData BindingSe mappate una parte della UI con una proprietà Javascript

AngularJS le manterrà sincronizzate automaticamente

EsempioEsempioindex.htmlindex.html

<html ng-app> <head>

<script src="angular.js"></script> <script src="controllers.js"></script>

</head> <body>

<div ng-controller='GreetingCtrl'> <input ng-model='greeting.text'> <p>{{greeting.text}}, World!</p>

</div> </body>

</html>

Dependency InjectionDependency Injection

Dependency InjectionDependency InjectionLe classi non creano dipendenze,

ma chiedono ciò di cui hanno bisogno

EsempioEsempiocontroller.jscontroller.js

function GreetingCtrl ($scope, $location) { $scope.greeting = { text: 'Hello', url: $location.absUrl() };

}

index.htmlindex.html

<html ng-app> <head>

<script src="angular.js"></script> <script src="controllers.js"></script>

</head> <body>

<div ng-controller='GreetingCtrl'> <input ng-model='greeting.text'> <p>{{greeting.text}}, World!</p> <p>Welcome to {{greeting.url}}</p>

</div> </body>

</html>

VantaggiVantaggiBasso accoppiamentoRiusabilitàTestabilità

Volete saperne di più?Volete saperne di più?

http://martinfowler.com/articles/injection.html

DirectivesDirectives

DirectivesDirectivesPermettono di estendere la sintassi HTMLL'unico strumento per manipolare il DOME' possibile definirne di nuove

Tutorial - ToDo ListTutorial - ToDo ListVisualizzare la todo listInserire nuovi taskCancellare task eseguiti

TutorialTutorialindex.htmlindex.html

<html ng-app> <head>

<script src="angular.js"></script> <script src="controllers.js"></script>

</head> <body>

<div ng-controller='TodoCtrl'> <form ng-submit='add()'>

<input ng-model='task'> </form> <p ng-repeat='todo in todos'>

<input type='checkbox' ng-model='todo.done' /> {{todo.text}} </p>

</div> </body>

</html>

TutorialTutorialcontroller.jscontroller.js

function TodoCtrl ($scope) { $scope.todos = [];

$scope.add = function() { $scope.todos.push({

text: $scope.task, done: false

}); $scope.task = ' ';

};

$scope.clear = function() { $scope.todos.filter(function(todo) {

return !todo.done; });

}; }

ConclusioniConclusioni

Unico linguaggioUnico linguaggio

Approccio costruttivoApproccio costruttivo

MaturitàMaturità

ny questions?ny questions?

rigatourigatou