Part 2 | Vanilla JS Projects

## JS outside the Browser

### Node.js

[nodejs.org](https://nodejs.org)

- Server-side JS runtime based on V8
					- Con: Doesn't get all the Browser's APIs
					- Pro: Has its own system-related interfaces

- Download & Install 
					- Open a new Terminal window
					- Check that it's working:
					
					```
					$ node --version
					20.10.0
					$ node
					> console.log('hello world')
					```

### Running Node scripts

```js
					// whereAmI.js
					console.log('You are here:');
					const currentDir = process.cwd();
					setTimeout(() => console.log(currentDir), 1000);
					```

```
					$ node whereAmI.js
					```

### Browser vs. Node APIs

<span></span> | Browser | Node
					-- | -- | --
					setTimeout | y | y
					process | n | y
					window | y | n

### [npmjs.com](https://npmjs.com)

- Package manager for JS (but not the only one!)
					- Comes with Node
					- 2+ million packages!!

### Creating a new package

```
					$ mkdir where-am-i
					$ mv whereAmI.js where-am-i/
					$ cd where-am-i
					$ npm init
					```

### `package.json`

```json
					{
						"name": "where-am-i",
						"version": "1.0.0",
						"description": "Find out where your JS script is running",
						"main": "whereAmI.js",
						"scripts": {
							"test": "echo \"Error: no test specified\" && exit 1"
						},
						"author": "Anjana",
						"license": "ISC"
					}
					```

### Running scripts

```
					$ npm run test
					Error: no test specified
					```

### Custom scripts

```
					"scripts": [
						"find-me": "node whereAmI.js"
					]
					```

```
					$ npm run find-me
					```

### Installing dependencies

```
					$ npm install cowsay
					```
					or
					```
					$ npm i cowsay
					```

### Using dependencies

```js
					import { say } from 'cowsay'

const currentDir = process.cwd();
					const message = 'Moo are here:\n' + currentDir
					console.log(say({ text: message}));
					
					```

### Modules in JS

(and other problems)

- 1995: JS is just for click handling, right?
					- 2010s: Node.js & server-side complexity
					- now: Massive client-side projects
					
					--

### CommonJS modules

Original Node module system, still around

```js
					const cowsay = require('cowsay');

module.exports = {
						mooove: () => cowsay.say({text: 'Get going'})
					};
					```

### ECMAScript modules

The new(ish) hotness, supported by browsers too

```js
					import { say } from 'cowsay';
	
					export const mooove = () => cowsay.say({text: 'Get going'})
					```

### ESM FTW

![Gif of the Mandalorian and baby Yoda with text "This is the way"](../assets/the-way.gif)

### In the browser

```html
					<script type="module">
						// import away
					</script>
					```

### In Node

Option 1: `.mjs` extension

Option 2: `"type": "module"` in `package.json`

```
					% npm run find-me

> where-am-i@1.0.0 find-me
					> node whereAmI.js

_____________________________________
					/ Moo are here:                       \
					\ /Users/anjana/Dev/vakila/where-am-i /
					 -------------------------------------
							\   ^__^
							 \  (oo)\_______
								(__)\       )\/\
									||----w |
									||     ||
					```

## Modern JS development
					
					![Clip from A Christmas Story of Ralphie being wrapped up in warm clothes](../assets/ralphie.gif)

### The modern web is a blessing...

![Clip from Aladdin of Genie demonstrating his "phenomenal cosmic powers"](../assets/phenomenal.gif)

### ...and a curse

![Clip from Aladdin of Genie demonstrating his "itty bitty living space"](../assets/itty-bitty.gif)

- 1995: Web pages get a little JS, as a treat
					- 2010s: Tooling evolves to bundle & optimize large apps (pre-ESM)
					- now: Massive JS projects, super complex workflows

Not to worry, the community has come up with helpful tools & frameworks! 
					
					<img src="../assets/ecosystem.png" alt="Many logos of various projects in the web ecosystem" />

### Battling the web dev overwhelm

- Principles > Tools
					- If it fits, it sits
					- Stay open to change