From frontend to backend: from Js to Nodejs

Transcript

1. from to From Frontend to Backend
2. davide.zeffiro@nicefall.com
4. Node.js® è un runtime Javascript costruito sul motore JavaScript V8 di Chrome. ! Node.js usa un modello I/O non bloccante e ad eventi, che lo rendono un framework leggero ed efficiente. ! L'ecosistema dei pacchetti di Node.js, npm, è il più grande ecosistema di librerie open source al mondo.
5. Paypal & node.js: performance L’applicazione node.js, rispetto a quella Java, ha:! ! • doppie richieste/secondo (un core per node.js vs. 5 core per il Java)! ! • 35% in meno in media di tempo di risposta (200ms più veloce) L’applicazione node.js rispetto a quella Java era:! ! • costruita velocemente quasi il doppio con meno persone! ! • scritto con il 33% di linee di codice in meno! ! • costituito dal 40% in meno di file
6. Librerie
7. Librerie node.js • Moduli nativi: https://nodejs.org/api/index.html • https://www.npmjs.com/ $ npm init! $ npm install [--save] [-g] nomeModulo! • /usr/local/lib/node_modules
8. $ npm init! ! package.json:! {! "name": "modulename",! "description": "Foo for bar",! "version": "0.0.1",! "repository": {! "type": "git",! "url": "git://github.com/mixu/modulename.git" },! "dependencies": {! "underscore": "1.1.x",! "foo": "git+ssh://git@github.com:mixu/foo.git#0.4.1",! "bar": "git+ssh://git@github.com:mixu/bar.git#master"! },! "private": true! } package.json
9. in depth…
10. In HTML:! <script src=“myscript.js"></script>! ! In NODE.JS:! var http = require('http');! ! http.createServer(function (req, res) {! ! res.writeHead(200, {'Content-Type': 'text/plain'});! ! res.end('Hello World\n');! })! .listen(1337, '127.0.0.1'); Primo esempio: server Hello World
11. util.js:! ! var x = 5;! var addX = function(value) {! ! return value + x;! }! module.exports.x = x! module.exports.addX = addX;! ! app.js:! ! var util = require(‘./util’);! console.log(‘x =‘ + util.x);! console.log(’10 + x =‘ + util.addX(10)); Understanding require & exports 1
12. User.js:! function User(name, email) {! ! this.name = name;! ! this.email = email;! }! ! ! module.exports.User = User;! ! vs.! ! module.exports = User;! ! app.js:! var User = require(‘./User’);! ! ! var user = new User.User(…);! ! vs:! ! var user = new User(…); Understanding require & exports 2
13. User.js:! var Animal = require(./Animal);! class User {…} Understanding require & exports 3 Animal.js:! var User = require(./User);! class Animal {…} app.js:! var User = require(./User);! …
14. Classi
15. EC5:! function User(name, surname) {! ! this.name = name;! ! this.surname = surname;! }! User.prototype.getFullName = function() {! ! return this.name + ’ ’ + this.surname;! }! module.exports = User;! ! ! EC6:! class User {! ! constructor(name, surname) {! ! ! this.name = name;! ! ! this.surname = surname;! ! }! ! getFullName() {! ! ! return this.name + ’ ’ + this.surname;! ! }! }! module.exports = User; Classi
16. Modo Javascript:! ! ! function Animal(name) {! ! ! this.name = name;! ! };! ! Animal.prototype.move = function(meters) {! ! ! console.log(this.name+" moved "+meters+"m.");! ! };! ! ! function Snake() {! ! ! Animal.apply(this, Array.prototype.slice.call(arguments));! ! };! ! Snake.prototype = new Animal();! ! Snake.prototype.move = function() {! ! ! Animal.prototype.move.call(this, 5);! ! };! ! ! var sam = new Snake("Sammy the Python");! ! Con inerits in node.js:! ! ! var util = require('util');! ! util.inherits(Snake, Animal); Ereditarietà delle Classi
17. Programmazione asincrona
18. Programmazione sincrona vs asincrona var fs = require('fs');! ! // Lettura sincrona! var file = fs.readFileSync('/path/to/file', 'utf8');! console.log(file);! ! // Lettura asincrona! fs.readFile('/path/to/file', 'utf8', function(err, file) {! ! if (err) {! ! ! throw err;! ! }! ! console.log(file);! });
19. The event loop & the message queue • Non-blocking I/O! • One thread! • One call stack! • One thing a time
20. Callback Hell
21. La piramide della sventura
22. Una “promessa” rappresenta il risultato di una operazione asincrona.! Una promise è in uno di questi stati:! • pending: in attesa del compimento della funzione asincrona! • fulfilled: funzione asincrona terminata correttamente! • rejected: funzione asincrona terminata con errore! • settled: funzione asincrona terminata Soluzione: Promises (1)
23. Creazione promise:! ! function readFile(filename, enc) {! return new Promise(function (resolve, reject) {! fs.readFile(filename, enc, function (err, res) {! if (err) reject(err);! else resolve(res);! });! });! }! ! Utilizzo promise:! ! function readJSON(filename) {! return readFile(filename, 'utf8')! .then(function (res) {! return JSON.parse(res)! });! }! function readJSON(filename) {! return readFile(filename, 'utf8').then(JSON.parse);! } Soluzione: Promises (2)
24. funzioneAsincrona1()! .then(funzioneAsincrona2)! .then(funzioneAsincrona3)! .catch(function (err) {! ! console.log(err);! });! ! ! funzioneAsincrona1()! .then(function(data) {! ! …! ! return Promise.resolve();! },! function(err) {! ! console.log(err);! ! return Promise.resolve();! })! .then(…); Soluzione: Promises (3)
25. http://nodeframework.com/ Frameworks
26. var express = require('express');! var app = express();! ! app.use(express.static('public'));! ! app.get('/', function (req, res) {! ! console.log("Got a GET request for the homepage");! ! res.send('Hello World');! })! ! app.post('/', function (req, res) {! console.log("Got a POST request for the homepage");! res.send('Hello POST');! })! ! var server = app.listen(8081, function () {! ! var host = server.address().address;! ! var port = server.address().port;! ! console.log('Example app listening at http://%s:%s', host, port);! })
27. • Waterline ORM (object-relational mapping) per tutti i DB: MySql, Postgres, Mongo, ecc… • Modellazione dei dati tramite file JSON • Generazione automatica delle API REST • Supporto ai WebSockets (Socket.io) • Policy di sicurezza dichiarative e riusabili tramite funzioni middleware prima delle azioni “controller”
28. WebKit
29. NW.js const electron = require('electron');! const app = electron.app;! const BrowserWindow = electron.BrowserWindow;! electron.crashReporter.start();! ! var mainWindow = null;! app.on('window-all-closed', function() {! // On OS X it is common for applications and their menu bar! // to stay active until the user quits explicitly with Cmd + Q! if (process.platform != 'darwin') {! app.quit();! }! });! app.on('ready', function() {! mainWindow = new BrowserWindow({width: 800, height: 600});! mainWindow.loadURL('file://' + __dirname + '/index.html');! mainWindow.webContents.openDevTools();! mainWindow.on('closed', function() {! mainWindow = null;! });! });
30. Thanks!
31. Bonus
32. Web Workers