mean stack
DESCRIPTION
Presentation about Mean Stack used during the Bits&Biz 2013. You can find information about Node.js, Express, MongoDB and AngularJS, the technologies behind the Mean Stack.TRANSCRIPT
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