Node JS

6,288 views

Published on

Getting started with Node.JS and express framework

Published in: Technology
2 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total views
6,288
On SlideShare
0
From Embeds
0
Number of Embeds
301
Actions
Shares
0
Downloads
108
Comments
2
Likes
9
Embeds 0
No embeds

No notes for slide

Node JS

  1. 1. Welcome To The Server Writing server-side APIs with Node.JSMonday, March 18, 13
  2. 2. Whoami Ynon Perek http://ynonperek.com ynon@ynonperek.comMonday, March 18, 13
  3. 3. Agenda Before You Build A Web Server Node JavaScript and Concepts Express FrameworkMonday, March 18, 13
  4. 4. Before You Build A Server What is the role of a web server ?Monday, March 18, 13
  5. 5. Before You Build A Server The web server connects multiple clients The web server can aggregate data The web server has more resourcesMonday, March 18, 13
  6. 6. Before You Build A Server GET data Here It IsMonday, March 18, 13
  7. 7. HTTP Protocol Clients talk to web servers in a protocol called HTTP HTTP is built around a request/response model HTTP is text-based Each message has headers and dataMonday, March 18, 13
  8. 8. HTTP Demo HTTP Request Headers GET / HTTP/1.1 Host: ynonperek.com Connection: keep-alive Cache-Control: max-age=0 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.95 Safari/537.11 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 If-None-Match: "1354952510" If-Modified-Since: Sat, 08 Dec 2012 07:41:50 +0000Monday, March 18, 13
  9. 9. HTTP Demo HTTP Response Headers HTTP/1.1 200 OK Date: Sat, 08 Dec 2012 07:41:57 GMT Server: Apache/2.2.16 (Debian) X-Powered-By: PHP/5.3.18-1~dotdeb.0 Expires: Sun, 19 Nov 1978 05:00:00 GMT Last-Modified: Sat, 08 Dec 2012 07:41:57 +0000 Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0 ETag: "1354952517" Content-Language: en X-Generator: Drupal 7 (http://drupal.org) Vary: Accept-Encoding Content-Encoding: gzip Content-Length: 4482 Keep-Alive: timeout=15, max=97 Connection: Keep-Alive Content-Type: text/html; charset=utf-8Monday, March 18, 13
  10. 10. What Is A Web Server A program that “speaks” HTTP Answer HTTP requests from clientsMonday, March 18, 13
  11. 11. What Is A Web Server SERVER CODE APPLICATION CODEMonday, March 18, 13
  12. 12. Types of Web Servers Generic web servers: Apache, Nginx, IIS Language-specific servers: JBoss, Tomcat, Starman, Tornado, Event Machine, ThinMonday, March 18, 13
  13. 13. Story Of Node.JS Ryan Dahl wrote it as a tool to write web servers Written in JS, and based on V8 engine Started at 2009Monday, March 18, 13
  14. 14. How To Build A Web Server Take an existing skeleton Color it any way you like EnjoyMonday, March 18, 13
  15. 15. Demo: Simple http server var http = require(http);   var handler = function(request, response) {   response.write(RESISTANCE IS FUTILE);   response.end(); };   var server = http.createServer( handler );   server.listen(8080);Monday, March 18, 13
  16. 16. Q&AMonday, March 18, 13
  17. 17. Lab: Getting Started Write a Node server that sends your name to the browser Write a Node server that returns the current time to the browser Write a Node server that sends the requested url back to the browser Use the docs: http://nodejs.org/api/http.htmlMonday, March 18, 13
  18. 18. Node.JS Basics Module Pattern and Package ManagementMonday, March 18, 13
  19. 19. Agenda Welcome To Node The Global Object The Module System Node Packages Common NodeMonday, March 18, 13
  20. 20. Welcome To Node Install by downloading the installer from: http://nodejs.org/download/ Recommended Reading: http://www.nodebeginner.org/Monday, March 18, 13
  21. 21. What’s Missing No window No document No DOM You can still use console.logMonday, March 18, 13
  22. 22. Welcome To Node var x = 5; Run a simple JavaScript var y = 9; file using   var z = x + y; node hello.js   console.log(5 + 9 = + z);Monday, March 18, 13
  23. 23. Global Objects In a browser, window is the global object and it is shared between all JS files In Node, global object is defined per-file It’s harder to pollute global namespace Use other files with requireMonday, March 18, 13
  24. 24. Demo: RequireMonday, March 18, 13
  25. 25. Demo: Require Load a file names twitter.js from current working directory The file returns an object we can use var t = require(./twitter.js);   t.tweet(I can has cheezburger);Monday, March 18, 13
  26. 26. Demo: Require Inside an included file, a special object named exports is provided, and returned to the caller. exports.tweet = function( text ) {     console.log( text ); }Monday, March 18, 13
  27. 27. Advantages Cleaner namespaces Better code is now easier to writeMonday, March 18, 13
  28. 28. Node Package Management Many modules are distributes online There’s even an online list of available free modules you can use There’s even a utility that automatically downloads modules from that repositoryMonday, March 18, 13
  29. 29. A Node Package A package is a collection of modules with a description JSON file You can depend on a package for your application by specifying dependencies in your package.json fileMonday, March 18, 13
  30. 30. npm repository Currently hosts ~25,000 packages Search and browse online: https://npmjs.org/Monday, March 18, 13
  31. 31. Demo: Using a packageMonday, March 18, 13
  32. 32. Demo: package.json {     "name" : "my-app",     "version" : "0.0.1",     "private" : true,     "dependencies" : {         "colors" : "*"     }   }Monday, March 18, 13
  33. 33. Demo: app.js var colors = require(colors);   console.log(Good Morning.blue); console.log(Hello World.rainbow);Monday, March 18, 13
  34. 34. Lab Write a node module that provides the following functions: sum(x, y, z, ... ) - returns the sum total of all numbers passed to it longer_than( n, str1, str2, str3, ... ) - returns an array of all strings longer in length than number n Write a test program that requires(...) for the moduleMonday, March 18, 13
  35. 35. Q&AMonday, March 18, 13
  36. 36. Common Node Working With Buffers Command Line Arguments Working With Files Sending Email Getting Data From Other WebsitesMonday, March 18, 13
  37. 37. Node Buffers Memory BufferMonday, March 18, 13
  38. 38. Node Buffers JavaScript does not have native binary data type Node adds the new type: BufferMonday, March 18, 13
  39. 39. Thumb Rule String = Buffer + EncodingMonday, March 18, 13
  40. 40. Working With Buffers Construct a buffer with: new Buffer( size ) new Buffer( array ) new Buffer( String, Encoding )Monday, March 18, 13
  41. 41. Working With Buffers Write data with: buf.write( string, offset, length, encoding ) offset - where to start writing (default 0) length - maximum length to write encoding - defaults to utf8Monday, March 18, 13
  42. 42. Working With Buffers Convert a buffer to string with: buf.toString( encoding, start, end ) default encoding is utf8Monday, March 18, 13
  43. 43. Other Buffer Methods buf.slice( start, end ): returns a new buffer for a memory slice. Data is shared. buf.fill( value, offset, end ): fills a buffer with value. API Docs: http://nodejs.org/api/buffer.htmlMonday, March 18, 13
  44. 44. Command Line Arguments Use process.argv array console.dir( process.argv ); to access all process arguments if ( process.argv.length === 7 ) { Note the first two are: console.log(Bingo !); ‘node’ (process name) } ‘app.js’ (file name)Monday, March 18, 13
  45. 45. Working With Files All file operations have Sync and Async version Sync blocks until the operation is done ASync takes a callbackMonday, March 18, 13
  46. 46. Reading A File ASync Callback Use fs.readFile to read var fs = require(fs); a file ASync var filename = process.argv[2]; fs.readFile( filename, function(err, data) { Default encoding is if ( err != null ) { utf8, but you can pass console.log(Error: + err); another as the second process.exit(2); } argument process.stdout.write( data ); process.stdout.write }); prints data as-isMonday, March 18, 13
  47. 47. Writing To A File ASync var fs = require(fs); use fs.writeFile to write var filename = output.txt; data (String or Buffer) fs.writeFile( filename, Hello Worldn, to a file function(err, data) { console.log(File Write Done); Node the execution }); order console.log(Starting To Write To File);Monday, March 18, 13
  48. 48. Read and Write StreamsMonday, March 18, 13
  49. 49. Read Stream Events: readable, end, error, close(*) Methods: setEncoding(encoding) pipe(destination)Monday, March 18, 13
  50. 50. Read Stream Demo var fs = require(fs);   var f1 = fs.createReadStream(f1.js);     f1.on(readable, function() {   var data = f1.read();   console.log( data.toString() ); });Monday, March 18, 13
  51. 51. Write Stream Events: drain, error, close Methods: write( String or Buffer) end( Optional String or Buffer)Monday, March 18, 13
  52. 52. Example: Writing To Stream Use var fs = require(fs);   fs.createWriteStream var out = fs.createWriteStream(output.txt); to create a writable   stream out.write(Hellon); out.write(-----nn); out.write(Node Streams are cooln); Use write(...) to   out.end(); append dataMonday, March 18, 13
  53. 53. Lab Write a node program that creates a new file and writes your name and home address inside. After writing, print out a message to the console. Write a node program that takes two files as command line arguments, and copies the first to the secondMonday, March 18, 13
  54. 54. Sending Email Use nodemailer to send emails from node.js app Demo: https://github.com/andris9/Nodemailer/blob/ master/examples/example_smtp.jsMonday, March 18, 13
  55. 55. Getting Data From Websites GET data Here It IsMonday, March 18, 13
  56. 56. Node HTTP Requests The request module implements an HTTP client use request( options, callback ) to get the data callback signature: function( error, response, body ) { ... }Monday, March 18, 13
  57. 57. Demo: Facebook Graph var request = require(request);   request(http://graph.facebook.com/ynonp, function(err, response, body ) { var me = JSON.parse( body ); console.log( me.id ); });Monday, March 18, 13
  58. 58. Demo: Tweets About Israel var request = require(request);   request(http://search.twitter.com/search.json?q=israel, function(err, response, body ) { var data = JSON.parse( body ); for ( var i=0; i < data.results.length; i++ ) { console.log(---); console.log( data.results[i].from_user + : + data.results[i].text ); } });Monday, March 18, 13
  59. 59. Lab YQL can help you find data online Use the forecast at this URL: http://query.yahooapis.com/v1/public/yql?q=select %20item%20from%20weather.forecast%20where %20woeid%3D%221968212%22&format=json and print out the temperatures in Celsius for today and tomorrow in Tel AvivMonday, March 18, 13
  60. 60. Q&AMonday, March 18, 13
  61. 61. Express: Web FrameworkMonday, March 18, 13
  62. 62. Express A web framework is a package that helps you build your web applicationMonday, March 18, 13
  63. 63. Express It handles HTTP request/response and headers It handles sessions It handles errors It serves static files And more...Monday, March 18, 13
  64. 64. Who Uses Express http://geekli.st/ https://count.ly/ http://balloons.io/ http://yummly.com/ Full List: http://expressjs.com/applications.htmlMonday, March 18, 13
  65. 65. var express = require(express); var app = express();     Express Demo app.get(/, function(req, res) {   res.send(Hello Wrold); }); Simple Static Server   app.listen(8080);Monday, March 18, 13
  66. 66. Express Overview Use require(‘express’) to get a reference to the express object Use express() to get a reference to the express application object Then configure routes with app.get(...) and app.post(...)Monday, March 18, 13
  67. 67. Express Routes A route handles incoming request HTTP request methods: OPTIONS, GET, POST, PUT, DELETE, TRACE, CONNECTMonday, March 18, 13
  68. 68. Express Routes Each route takes a callback. Keep your callbacks REAL FAST While running a route handler, server is not available to handle other requests app.get(/hello, function(req, res) {     res.send(Hello World); });Monday, March 18, 13
  69. 69. Express Routes You can also send files app.get(/logo.png, function(req, res) {     res.sendfile(./public/images/logo.png); });Monday, March 18, 13
  70. 70. Express Routes Or complete JSON objects express automatically sets content-type app.get(/user.json, function(req, res) {     res.send({         username: amy,         password: tardis     }); });Monday, March 18, 13
  71. 71. Request Parameters A client can pass in extra parameters in the request A GET request provides parameters after the URL A POST request provides parameters in the bodyMonday, March 18, 13
  72. 72. GET Parameters If a URL is followed by a question mark (?), you can pass key/value paris separated by & to the server Examples: http://www.google.com/?q=javascript http://www.demo.com?op=add&x=5&y=7Monday, March 18, 13
  73. 73. Getting The Params In Node app.get(/add, function(req, res) {     var x = Number( req.param(x) ); You can access     var y = Number( req.param(y) ); request   parameters by     res.send({ using req.param         operation : add, function         x : x,         y : y, Example:         result : x + y     }); });Monday, March 18, 13
  74. 74. When Things Go Wrong What should the server do ? GET http://mathserver.com/?x=5Monday, March 18, 13
  75. 75. One Solution: Use URL Parameters http://www.math.com/add/5/10/Monday, March 18, 13
  76. 76. Getting URL Parameters app.get(/mul/:x/:y, function(req, res) {     var x = Number( req.param(x) );     var y = Number( req.param(y) ); Node allows   treating part of     res.send({ the URL as a         operation : add, parameter         x : x,         y : y, This way no         result : x * y param is     }); missing   });Monday, March 18, 13
  77. 77. Another Solution Handle Errors with next()Monday, March 18, 13
  78. 78. Express Routes Use the 3-arguments route handler to report errors third argument is a function: If called with no arguments raises HTTP 404 If called with arguments raises HTTP 500 Don’t forget to return after using next()Monday, March 18, 13
  79. 79. Express Routes app.get(/user.json, function(req, res, next) {     var userid = req.param(id);     if ( userid == null ) {         next(Invalid User);         return;     }       res.send({ username: amy }); });Monday, March 18, 13
  80. 80. Lab #1 Write an express web server that responds to the following routes: GET /add - takes 2 params and returns their sum as a JSON object GET /multiply - takes 2 params and returns their multiplication as a JSON object GET /count - returns the total count of operations performed so farMonday, March 18, 13
  81. 81. Lab #2 Write a “wall” server in express POST /wall - adds a message to the wall GET /wall - returns a JSON array with all messages Write an HTML file with a form to test the POST requestMonday, March 18, 13
  82. 82. Getting The Data Use jQuery’s ajax calls from the clientMonday, March 18, 13
  83. 83. jQuery Functions $.get - sends a get request to the server. Takes a url, optional data, success handler and data type. $.post - sends a post request to the server. Takes a url, optional data, success handler and data type.Monday, March 18, 13
  84. 84. get/post Examples $.get(‘test.php’); $.post(‘test.php’, { name : ‘john’, time: ‘2pm’ }); $.get(‘test.php’, function(data) { alert(data); });Monday, March 18, 13
  85. 85. $.ajax Gain full control over the request Can handle errors get/post are actually just shortcuts for this one Takes url and settings objectMonday, March 18, 13
  86. 86. $.ajax Settings error: error handler callback success: success handler callback context: the ‘this’ pointer of callbacks data: data object to send url: the url to use Full docs: http://api.jquery.com/jQuery.ajax/Monday, March 18, 13
  87. 87. Example: $.ajax $.ajax({    type: "POST",    url: "some.php",    data: "name=John&location=Boston",    success: function(msg){      alert( "Data Saved: " + msg );    }  });Monday, March 18, 13
  88. 88. Demo: “live” wall with ajaxMonday, March 18, 13
  89. 89. Q&AMonday, March 18, 13
  90. 90. Ajax: Lab 1 Add client GUI to the lab on page 44 (math server) Allow sum/multiply and show the result Every second, check number of actions performed and update the displayMonday, March 18, 13
  91. 91. Ajax: Lab 2 Create a weather application Use Node.JS for server side. Use wunderground to get weather report based on lat/ long. URL: http://api.wunderground.com/api/API_KEY/geolookup/ q/37.776289,-122.395234.json App should show a picture of Sun or Rain based on current weatherMonday, March 18, 13
  92. 92. Express Middleware Pipeline How the middleware pipeline works for youMonday, March 18, 13
  93. 93. Sample Pipeline 1 Request Favicon 2 Do you need a favicon ? 3 4 Yes - Here it is No - Next middlewareMonday, March 18, 13
  94. 94. Sample Pipeline 1 Request logger 2 Write down the request to log 3 Next middlewareMonday, March 18, 13
  95. 95. Sample Pipeline 1 Request Router 2 Is there a named route ? 3 4 Yes - Here it is No - Next middlewareMonday, March 18, 13
  96. 96. Sample Pipeline 1 Request Static 2 Is there a matched public file ? 3 4 Yes - Here it is No - Next middlewareMonday, March 18, 13
  97. 97. Sample Pipeline 1 Request Error 2 Bye Bye 3Monday, March 18, 13
  98. 98. Error Handling In Pipeline app.get(/user.json, function(req, res, next) {     var userid = req.param(id);     if ( userid == null ) {         return next(Invalid User);            }       res.send({ username: amy }); });Monday, March 18, 13
  99. 99. Custom Express Middleware Let’s write a simple middleware for returning visitors If it’s the first visit, show a banner If it’s a later visit, show another banner Use jade for the templateMonday, March 18, 13
  100. 100. Lab Write a cross domain ajax middleware Add CORS to each response headers Bonus: Initialize with source domainsMonday, March 18, 13
  101. 101. Other Middlewares Authentication is performed by a middleware. Demo: https://github.com/visionmedia/express/tree/master/ examples/auth Static middleware will serve a static path bodyParser automatically turns request body to an object compress() automatically compresses responsesMonday, March 18, 13
  102. 102. Q&AMonday, March 18, 13
  103. 103. Thank You Keynote and Extras: ynonperek.com Photos From: http://123rf.com http://www.flickr.com/photos/crazyeddie/ 1463295872/Monday, March 18, 13

×