Mean Stack

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

1. MEAN Stack MEAN Stack Francesco Maria Pavone Nicola Sanitate
3. Node.js Node.js Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications... http://nodejs.org
4. Node.js Node.js V8 runtime (2008) Prestazioni elevate (x10 volte rispetto al passato) Modello I/O asincrono non bloccante Sistema di pacchettizzazione (NPM registry)
5. Analogia del fast food Analogia del fast food
6. Da: a: Esempio Esempio var file = fs.readFileSync("file.txt"); // e ora aspetta... fs.readFile("file.txt", function(err,data){ print(data); }); // e ora continuiamo...
7. Migliaia di pacchetti (40662): Migliaia di pacchetti (40662): Express Passport Socket.IO Karma Jade Grunt Bower Yeoman ...
8. Express Express Framework NodeJS per web application Routing di base Adatto a costruire API Rest get, post, put, delete Utilizzo di middleware
9. Esempio Esempio var express = require('express'); var app = new express(); ... app.get('/',function(req,res){ fs.readFile("articles.json", function(err,articles){ res.json(articles); }); });
10. MongoDb MongoDb NoSQL Base di dati a documenti
11. Persist different Persist different
12. Esempio Esempio Realizzazione blog Realizzazione blog
13. Esempio Esempio Lorem Ipsum di Pinco Pallino Tags lorem, ipsum post autore * 1 tag commento 1 * post_tag 1 * 1 * Commenti Mario 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.
14. Query al database Query al database SELECT * FROM Post p JOIN Autore a ON p.autore = a.id WHERE p.id = 25; SELECT * FROM Commento c WHERE c.post_id = 25; SELECT * FROM Tag_post tp JOIN Tag t ON t.id = tp.tag_id WHERE tp.post_id = 25;
15. Esempio: blog (documenti) Documenti vs Relazionale Documenti 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"] }
16. Query Query db.posts.find({title: "Il mio post"})
17. Schema design Schema design Schemaless? (Schema flessibile) Modellazione attraverso l'applicazione La struttura dei dati riflette ciò che l'applicazione deve manipolare
18. To embed or not to embed? To embed or not to embed?
19. Embedding Embedding Pro Pro Performance accesso al disco Consistenza evitare anomalie nelle modifiche Contro Contro Dimensione documenti Ridondanza dei dati
20. Linee guida per l'embedding Linee guida per l'embedding Relazioni 1:1 Relazioni 1:1 EMBED EMBED
21. Utente Esempio 1:1 Esempio 1:1 { _id: "utente_1", username: "user1", password: "password", profilo: { eta: 25, sesso: "M", ... } }
22. Linee guida per l'embedding Linee guida per l'embedding Relazioni 1:Molti Relazioni 1:Molti EMBED (dai molti all'1) EMBED (dai molti all'1)
23. Post Esempio 1:Molti Esempio 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" } ] }
24. Linee guida per l'embedding Linee guida per l'embedding Relazioni Molti:Molti Relazioni Molti:Molti LINK (array di ID) LINK (array di ID)
25. Post Tag Esempio Molti:Molti Esempio Molti:Molti { _id: "post_1", titolo: "post1", messaggio: "Il mio primo post", autore: "user_1", tags: ["tagId1", "tagId2", ...] } { _id: "tagId1", tag: "MongoDB" }
26. Operazioni di scrittura concorrenti Operazioni di scrittura concorrenti NO NO Transazioni Transazioni SI SI Operazioni atomiche Operazioni atomiche
28. Superheroic JavaScript MVW Framework
29. HTML enhanced for web apps!
30. AngularJS is what HTML would have been, had it been designed for building web-apps.
31. C'era una volta... C'era una volta...
32. 2009 @ Google Inc. 2009 @ Google Inc.
33. Google Feedback Google Feedback 6 mesi di progetto 17.000 linee di codice front-end sviluppo lento codice poco testabile
34. Frustrazione Frustrazione
35. Misko Hevery Misko Hevery
36. Misko Hevery Misko Hevery dice di voler riscrivere l'intero progetto da solo in 2 settimane con una libreria open-source che ha creato lui per hobby
37. Misko Hevery Misko Hevery Fallisce ci mette 3 settimane porta le linee di codice da 17.000 a 1.500
38. AngularJS AngularJS progetto patrocinato da Google 394 contributors in tutto il mondo su GitHub sotto MIT License
39. Concetti Concetti Client-Side Templates Model View Controller Data Binding Dependency Injection Directives
40. Client-Side Templates Client-Side Templates
41. Server-Side Templates Server-Side Templates Il server assembla i dati e il markup Il browser riceve l'HTML e lo mostra
42. Client-Side Templates Client-Side Templates Il server invia dati e markup Il browser assembla l'HTML e lo mostra
43. Confronto Confronto Server-Side Templates Server-Side Templates Client-Side Templates Client-Side Templates <table> <tr> <td>Totale:</td> <td>1000 €</td> </tr> </table> <table> <tr> <td>Totale:</td> <td>{{total}} €</td> </tr> </table> {total: 1000}
44. Esempio Esempio index.html index.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.js controller.js function GreetingCtrl ($scope) { $scope.greeting = { text: 'Hello' }; }
45. Model View Controller Model View Controller
46. Vantaggi Vantaggi modello mentale su dove posizionare il codice facilità per chi deve capire cosa c'è scritto nel codice applicazione più estendibile, manutenibile e testabile
47. MVC in AngularJS MVC in AngularJS View Controller Model DOM Funzione Oggetto
48. Data Binding Data Binding
49. Prima di AJAX Prima di AJAX Tecnologie come Rails, PHP e JSP aiutavano a creare UI fondendo markup e dati prima di inviarli all'utente
50. Con l'arrivo di AJAX Con l'arrivo di AJAX Questo modello è stato esteso grazie alla possibilità di aggiornare parti del DOM separatamente
51. Problema Problema Ho due rappresentazioni dei dati! UI JS
53. Data Binding Data Binding Se mappate una parte della UI con una proprietà Javascript AngularJS le manterrà sincronizzate automaticamente
54. Esempio Esempio index.html index.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>
55. Dependency Injection Dependency Injection
56. Dependency Injection Dependency Injection Le classi non creano dipendenze, ma chiedono ciò di cui hanno bisogno
57. Esempio Esempio controller.js controller.js function GreetingCtrl ($scope, $location) { $scope.greeting = { text: 'Hello', url: $location.absUrl() }; } index.html index.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>
58. Vantaggi Vantaggi Basso accoppiamento Riusabilità Testabilità
59. Volete saperne di più? Volete saperne di più? http://martinfowler.com/articles/injection.html
60. Directives Directives
61. Directives Directives Permettono di estendere la sintassi HTML L'unico strumento per manipolare il DOM E' possibile definirne di nuove
62. Tutorial - ToDo List Tutorial - ToDo List Visualizzare la todo list Inserire nuovi task Cancellare task eseguiti
63. Tutorial Tutorial index.html index.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>
64. Tutorial Tutorial controller.js controller.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; }); }; }
65. Conclusioni Conclusioni
66. Unico linguaggio Unico linguaggio
67. Approccio costruttivo Approccio costruttivo
68. Maturità Maturità
69. ny questions? ny questions?
70. rigatou rigatou