Intro to Node.js and JavaScript

A micro-workshop on getting started in web dev with Node.js

/usr/akts

fsug-tvmneoito.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 [email protected]~$ ?
  • 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 [email protected]~$ ?
  • 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.

Why use a webapi centric design?

rest

Let's build our API

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

Questions?