Intro to Node.js and JavaScript

/usr/akts

fsug-tvm ∣ neoito.com

Before we begin

• Have a machine - *nix preferred
• Install Node.js
• Have a good browser - chrome or firefox preffered
• A good text-editor - vim/emacs/vscode
• An API tester like Postman

What is JavaScript?

• a language used to make websites dynamic.
• interpreted a.k.a scripting language like python.
• has been used exclusively in websites until node happened in 2009.

Browsers

• Make sense of HTML + CSS + JS from a URL - very vague ≧◡≦
• All browsers have engines for this.
• Chromium has V8, Firefox has SpiderMonkey and there are others.
• Access via F12 and stare at that beautiful prompt >
• Looks similar to >>> and user@box~$ ?
• JavaScript here, will operate on the DOM.

What's so great about JS?

• Event-driven - prevent blocking code.
  • event-loop
  • btn.addEventListener("click", function() { ... };)

console.log('I ran immediately');

setTimeout(() => {
  console.log('I ran after 3sec') 
}, 3000);

setTimeout(() => {
console.log('I ran after 2sec') 
}, 2000);
            

• Very forgiving - but this can be bad too.
  • ex: dynamic typing
• Plus a lot more that I'm too lazy to searx for.

Node.js

• Chromium's V8 runtime + extra libs in C++
• Type in node at your terminal.
• Stare at that beautiful prompt >
• Looks similar to >>> and user@box~$ ?
• JavaScript here is used to do stuff on your machine.
• The main strength of Node.js is writing web services.

JS basics - Part 1

• Bookmark - MDN, freeCodeCamp, YDKJS
• var, let, const - ECMAScript
• ${string} templates
• JSON - Arrays and Objects - .map and .filter
• functions and callbacks
• Everything is an Object.
• The difference b/w a method and a function.

What is a service?

http://192.168.1.30:3000
http://localhost:3000

proto://host:port

Example

• httpd aka apache is a program (server), that typically runs on port 80

  $ firefox http://localhost:80

• mysqld is a program (service) that runs on port 3306

  • mysql the cli client connects to it like
    $ mysql -u akts -h 10.10.20.30 -p

JS basics - Part 2

• Strictly for Node.js.
• global and process objects.
• We split our code into modules - CommonJS
• require() and module.exports

The joy of npm

• The package manager for node.
• An online repo.

$ mkdir our-proj
$ cd our-proj
$ npm init
$ ls # see the package.json file

• What are npm scripts?
• Adding dependencies
  $ npm i --save decamelize
• Look at our package.json and our folder

$ ls # see the node_modules folder

Our first server

const http = require('http');
const port = 3000;

const server = http.createServer((request, response) => {
  console.log(request.url);
  response.end('Hello World!');
});

server.listen(port, (err) => {
  if (err) {
    return console.log('something bad happened', err)
  }

  console.log(`server is listening on ${port}`)
});

• Refer the docs
• Lets see this in the browser - http://localhost:3000
• Open the dev-tools

An intro to HTTP

• HTTP verbs/method.

C - POST
R - GET
U - PUT
D - DELETE

• HTTP Status Codes

2xx Success
4xx Client Error
5xx Server Error

• Routes

/recipes
/recipes/1

What is an API?

• An interface for 2 or more programs to communicate
• via JSON or XML(old)
• REST is a style for building APIs.

GET     /recipes    # gets all recipes
GET     /recipes/1  # gets detail about recipe with id 1
PUT     /recipes/1  # update a data about recipe with id 1
POST    /recipes    # add a new recipe
DELETE  /recipes/1  # remove a recipe entry with id 1

Websites and webapps

• A website is static and a webapp is dynamic i.e uses data from databases.
• A tale when PHP, Ruby on Rails and everything else ruled the web.
  • The stack - LAMP

Why use a webapi centric design?

Let's build our API

• using a framework - express.js
• express is to js, what django/flask is to python

Questions?

• Awesome Nodejs
• Code repo