PB138 Lab: Introduction to JavaScript

 

Node.js

As an asynchronous event driven JavaScriptruntime, Node is designed to build scalablenetwork applications.

npm

is the package manager for JavaScript and theworld's largest software registry.  

Initiate npm project

  • Creates package.json
  • Package.json contains:
    • Project description
    • Dependencies
    • Runnable commands 

npm init

Working with dependencies

npm install -–save-dev typescript
npm i –D typescript

npm install -–save react react-dom
npm i –S typescript react react-dom

Those commands:

  • Add entry to package.json
  • Create/update lock file

 

Dev packages only available  during develepoment

Regular dependencies also in dist package

Global Dependencies

npm install --global -–save typescript

Installed in node folder

Available as cmd app

In most cases not recommended

 

 Lock file

npm install package-a@3.0.0 --package-lock-only

When packege was installed one day in version 1 on other machine next day could be installed in version 2
Lock prevents it
Also garantues installation order. Npm packages are not necessary installed in same order and this caused problems sometimes.

 

 

Carret and tilde 

npm install express@latest --save --force

You can you install or update for updating packages
Please not update is not updating dev dependencies unless you add –dev flag

 

"*" 
"^1.4.3" -> match any major 4.x.x
"3.4.1"
"~4.2.1" -> match any minor 4.2.x

Carret and tilde 

{ 
    "name": "my-project", 
    "version": "1.0",
	"dependencies": {
                                                     // install update
		"already-installed-versionless-module": "*", // ignores "1.0" -> "1.1" 
		"already-installed-semver-module": "^1.4.3"  // ignores "1.4.3" -> "1.5.2" 
		"already-installed-versioned-module": "3.4.1"// ignores ignores 
		"not-yet-installed-versionless-module": "*", // installs installs 
		"not-yet-installed-semver-module": "~4.2.1"  // installs installs 
		"not-yet-installed-versioned-module": "2.7.8"// installs installs 
	} 
}

Javascript ES6+ & Typescript

What‘s the difference? (JS vs TS)

Typescript is superset of Javascript. It compiles Javascript but also give you option to use strong typing, additional syntactic suggar and transpiles to supported JS.

Using let and const

vars are hoisted and therefore should be avoided

 

var is replaced by:

  • mutable let
  • immutable const 
console.log(a); // what value is a here?
a = 5;
var a;

Using let and const

let and const both keep their scope since declaration

const a = 5;
let b = 6;

String templates

  • you don‘t have to concatenate strings if you need to add variable content into text
  • you can add any JS expression
  • you can use also quotes there

 

let text = `string text ${expression} string text`;

Null assertion

  • there is nice syntax to check for null and undefined and get valu

 

😐
 
 
function(input: any) { // we expect some object with value prop
   let num: number? = input && input.value;
}

Arrow functions

  • shorter function syntax
  • no problems with this and binding it

 

2
😐
 
 
function(input: number) {
   return input * 5;
}

can be rewritten to

(input: number): number => ({ input * 5});

Modules

  • basic structuring concept of Javascript code
  • you can use function from other files or packages

 

2
😐
 
 
import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";

// or later
const validator = await import { ZipCodeValidator } from "./ZipCodeValidator";

Exports

  • export gives option to use function in other file
  • default give you fallback or exports single function

 

2
😐
 
 
export function add(a: number, b: number): number {
   return a + b;
}

export default function substract(a: number, b: number): number {
   return a - b;
}

// or export default {add};

Classes

  • Shall I introduce you to basic OOP concepts?
2
😐
 
 
class Greeter { 
	greeting: string; 
	constructor(message: string) { 
		this.greeting = message; 
	}
	greet() { 
		return "Hello, " + this.greeting; 
	} 
} 
let greeter = new Greeter("world");

Abstract classes

  • They can‘t be instantiated.
2
😐
 
 
abstract class Greeter { 
  // same code as previous example
} 
let greeter = new Greeter("world"); // can‘t do this!!!

class MyGreeter extends Greeter { 
  // some additional code
} 
let greeter = new MyGreeter("world"); // possible now

Interfaces

  • You define variables and DECLARE functions.
  • Used either for polymorphism or as a „structures“
2
😐
 
 
interface IGreeter { 
	greeting: string; 
	greet();
} 

class Greeter implements IGreeter { }

Abstract or interface?

Mostly use interfaces

Avoid abstract classes

 

 

Class inheritance?

Try to avoid it

Also avoid base classes in most cases

Try to use aggregates

 

 

Spread operator

  • Used on arrays, objects or functions
  • Copy object, change props immutably, merge arrays…

 

 

 

 
 
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

let mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

Destructuring

 

  • Same operator as spread
  • It gets you variables from same structure/object
 
 
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42 
console.log(bar); // true

var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

And last how to iterate through array

map()
every() 
filter() 
find() 
findIndex() 
reduce() 
some()

That's it. Now let's write some code

Title Text

Subtitle

Made with Slides.com