mean stack
TRANSCRIPT
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)
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); });});
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"]}
Schema designSchema designSchemaless? (Schema flessibile)Modellazione attraverso l'applicazione
La struttura dei dati riflette ciò che l'applicazione devemanipolare
EmbeddingEmbeddingProPro
Performanceaccesso al disco
Consistenzaevitare anomalie nellemodifiche
ControControDimensione documenti
Ridondanza dei dati
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
Google FeedbackGoogle Feedback6 mesi di progetto17.000 linee di codice front-endsviluppo lentocodice poco testabile
Misko HeveryMisko Heverydice di voler riscrivere l'intero progetto
da soloin 2 settimane
con una libreria open-source che ha creato lui per hobby
AngularJSAngularJSprogetto patrocinato da Google
394 contributors in tutto il mondosu GitHub sotto MIT License
ConcettiConcettiClient-Side TemplatesModel View ControllerData BindingDependency InjectionDirectives
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' };
}
VantaggiVantaggimodello mentale su dove posizionare il codicefacilità per chi deve capire cosa c'è scritto nel codiceapplicazione più estendibile, manutenibile e testabile
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
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 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>
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; });
}; }