js & nodejs - an introduction
TRANSCRIPT
![Page 1: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/1.jpg)
Javascript & NodeJSAn Introduction
“JavaScript is 18...now it’s not my responsibility;
it can go out, vote, join the Navy,get drunk and gamble in most states.”
BRENDAN EICHMOZILLA, 2013
![Page 2: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/2.jpg)
Javascript As we popularly know it
CSSJavaScrip
t
Lay man/Enthusiast ->- Web comes first to mind- The (new age) web that is >>
Developers ->- Develop web page- Use that calendar widget of Jquery- Asynchronous updates
Think of JS…
![Page 3: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/3.jpg)
Javascript History
Web in 1995“We aimed to provide a
“glue language” for the Web designers and part time programmers who
were building Web content from components such as images, plugins,
and Java applets.”
“We saw Java as the “component language”
used by higher-priced programmers.”
- Netscape
BRENDAN EICHAn ex Silicon Graphics (7 years) Joined Netscape in April 1995
prototyped language (Mocha > LiveScript > JS) and
SpiderMonkey compiler in 10 days in May 1995.
![Page 4: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/4.jpg)
DHTML
FORM VALIDATION
DYNAMIC HTML
Javascript Evolution Web 1995-2K
TICKERS & POP UPSROLLOVERS
![Page 5: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/5.jpg)
Javascript Evolution Web in 2K
XHR
2005 GOOGLE MAPS
2004 GOOGLE MAIL
2000OUTLOOK WEB
XMLHttpRequest
![Page 6: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/6.jpg)
AJAX
JESSE JAMES GARRETT
ASYNCHRONOUS JAVASCRIPT and XML
Javascript Evolution Web in 2005
![Page 7: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/7.jpg)
Javascript As we popularly know it
CSSJavaScrip
t
How does it work together?
![Page 8: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/8.jpg)
How do I see that web page?
![Page 9: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/9.jpg)
JS + HTML + CSS in Action
![Page 10: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/10.jpg)
Browser processing pipeline: HTML, CSS, and JavaScript
Whats happening under the hood?
![Page 11: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/11.jpg)
JS Code – Getting used to Asynchronous Programming
![Page 12: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/12.jpg)
var url = "http://www.google.com";var someVar = 10;$.get(url, function(data){ alert("Data Loaded: " + data); });
JS Code – Some ‘Cool’ Features
- Dynamic types- Everything is an Object- Anonymous functions- Callbacks- Closures- No multi-threading
var add = (function () { var counter = 0; return function () {return counter += 1;}})();
add();add();add();
// the counter is now 3
![Page 13: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/13.jpg)
NodeJS – JS on Server Side
- JS as a language breaks shackles; no longer associated only with Web
- Runs on v8 engine – wait! Isnt that what Chrome browser has?
- Event loop architecture…no multi-threading mess
- Everything is asynchronous
![Page 14: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/14.jpg)
Running node.js
• Download from nodejs.org• Install with Windows Installer• apt-get install nodejs on Ubuntu
• Try some commands on the interactive shell
node> console.log('Hello World');Hello World
![Page 15: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/15.jpg)
Webserver exampleThis is the node sample application shown on nodejs.org
and hosts a fully fledged HTTP server, already shows a lot of basic concepts of nodeJS
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');console.log('Server running at http://127.0.0.1:1337/');
Use require keyword to load a module
Call method to create a new HTTP server
write to response stream
define anonymous callback that handles
request event
start accepting connections on port
and hostnameapplication doesn’t exit after last line of codenode.js keeps running until no further events are
possible
![Page 16: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/16.jpg)
node.js modules• developers know libraries, in node.js modules serve a similar function• put different functionalities in different *.js files and allow usage from
other *.js files• Helps structuring application
• use exports keyword to expose functions to other modules• use require keyword to import modules
![Page 17: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/17.jpg)
node.js modules• create a new file called test.js• Expose function with exports keyword
• import from main app.js file
exports.helloworld = function () { console.log('Hello World');}
var test = require('./test.js');test.helloworld();
assign helloworld property to exports
object
and assign function to helloworld property, thereby exposing the
function to other modules
require keyword retrieves exports
object defined above
call function stored in helloworld
![Page 18: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/18.jpg)
node.js modules• It is also possible to directly overwrite the exports object with module.exports• Usually this is done to export the constructor of a JavaScript ‘Class’ and split
class definitions to separate files
module.exports = function () { this.name = "test object"; this.color = "red"; this.size = "large";}
var test = require('./test.js');var testObject = new test();console.log('name:' + testObject.name);console.log('color:' + testObject.color);console.log('size:' + testObject.size);
assign function to exports object
define JavaScript object constructor
require keyword retrieves exports
object defined above
function test() points to constructor defined
in module.exportscreate new object from constructor
![Page 19: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/19.jpg)
node.js modules• apart from self written modules, it is also possible to install
modules from a repository with a package manager• This package manager is npm• Similar command syntax to apt• npm install <module name>• npm update
• huge amount of public packages (74,753 as of 24th May 2014)• everyone can contribute
![Page 20: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/20.jpg)
20
structure of a node.js application
You need a *.js file that serves as application entry pointRun it directly with node *.js
package.jsondescription of a node.js project in JSON formatSpecifies name, version, description, keywords for your projectdefines dependencies that your project is relying on
![Page 21: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/21.jpg)
package.json{ "name": "TestNodejsApp", "version": "0.0.0", "description": "TestNodejsApp", "private": true, "main": "app.js", "author": { "name": "Qiong Wu", "email": "" }, "dependencies": { "express": "3.4.4", "jade": "*", "stylus": "*" }}
define application entry point
flag project as private, npm refuses to publish
it
define all dependencies that are to be loaded from npm
* means use newest version
![Page 22: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/22.jpg)
JS – Why I Like it?1. Dynamically typed -> Freedom with
responsibility2. JSON is de-facto standard & JS knows it best3. #1 + #2 = flexible/decoupled architecture4. Saves from mess of multi-threaded world5. One language for entire stack (wow!)
![Page 23: JS & NodeJS - An Introduction](https://reader035.vdocuments.us/reader035/viewer/2022062711/55c68536bb61eb86118b4580/html5/thumbnails/23.jpg)
console.log(“Thank You ”);