1. hét — Bevezetés: Node.js, V8, NPM és az ökoszisztéma

## Szerver oldali JavaScript

**1. hét**

Bevezetés: Node.js, V8, NPM és az ökoszisztéma.

-- PAGE --

### Csak a fontos dolgok

**Paróczi Zsombor** <paroczi@tmit.bme.hu> | **Dr. Kovács Gábor** <kovacsg@tmit.bme.hu> | 2 kredit | csütörtök 12:15 - 14:00 | https://portal.vik.bme.hu/kepzes/targyak/vitmav42 | **https://malna.tmit.bme.hu/vitmav42/** | https://tinyurl.com/nodeyoutube | https://github.com/VITMAV42

Gyakorlathoz nem kell gép!!!

-- PAGE --

## Meg ami még fontosabb

Hét fejlesztési gyakorlat megoldása
- Félévközi jegy a teljesített feladatok alapján
- Leadási határidő a weboldalon
- **Hét feladat megoldása kötelező**
- Két feladat pótolható vagy javítható a pótlási hét végéig
- Eredmények a weboldalon, módosítási kérések is ott lesznek felsorolva!

*https://malna.tmit.bme.hu/vitmav42/submit/*

-- PAGE --

## Eredmények és információk

Értékelés értelmezése:

- Szép munka vagy Ok: el lett fogadva, minden ok
- Hiányos: A megjegyzés alapján javítsunk valamin

Hiányos esetén **újra be kell adni a házi feladatot**, az eredeti leadási határidővel számoljuk a késést.

-- PAGE --

## 1. Feladat

Egy elképzelt megrendelő feladatát specifikáljuk:

- Legalább 2 entitás típus (legalább egyiknél az összes CRUD funkció megvalósítása)
- Legalább 3 nézet (mindegyikhez mockup)
- Részletes specifikáció kell

-- PAGE --
### Amit le kell adni:

- specifikáció pdfben ([minta](images/minta_speci.pdf))
- mockup specifikációban
- összezipelve fel lehet tölteni (nem rar, gz, etc...)

**2. hét péntek éjfél**

(szeptember 18, 23:59)

-- PAGE --
### Mintafeladat és korábbi évek

Githubon megtalálható végtelen, van hivatalos is.

Ésszel használjuk!

-- PAGE --
### Kérdések amikre a válasz: nem :/

- Lehet-e TS-et használni?
- Lehet-e SPA-t építeni hozzá?
- Lehet-e csoportban dolgozni?
- Megéri 2 kreditért a sok munka?

-- PAGE --

### És AI-t lehet használni?

Magyarázatra, hibakeresésre, boilerplate-re: nyugodtan.
**De, bármelyik beadott sorodat meg kell tudnod magyarázni.**

<small>Fenntartom a jogot hogy a beadott kódot ellenőrizzem,<br/>és ha nem tudod megmagyarázni, akkor a tárgy nem teljesített.</small>

-- PAGE --

-- PAGE --

### Háááát....

> „Még talán pont időben vagyunk, hogy elcsípjük azt, hogy ennek a tárgynak (és a szakma ezen részének) van piaca."

-- PAGE --

## Végre jöhet a lényeg

-- PAGE --
## Webfejlesztés

- sok fejlesztő, fura megítélés
- nagyon nagy a skála szaktudásban, projekt managementben

-- PAGE --
## Pozíciók

https://www.youtube.com/watch?v=-ta-D26iAIc

-- PAGE --

### Frontend 2006
CSS, HTML, JS

### Frontend 2026
CSS, HTML, Sass, Tailwind, TypeScript, JS (ES2026), Vite, esbuild, React, Vue, Svelte, Astro, Next, Nuxt, ...

### Frontend 2027
LLM?

-- PAGE --

## Agile módszerek

![Scrum](images/scrum.jpg)

-- PAGE --
## Amire készülni kell

- nagyfokú bővíthetőség és félúton változó igények
- rövid fejlesztési idő
- "nem házakat építünk" mentalitás vs utólagos módosíthatóság
- cél: moduláris, egyszerű elemek hasznlata

-- PAGE --

## Javascript

10 nap alatt "összedobott" programnyelv, amit 1995-ben Brendan Eich
hozzott létre, amikor a Netscape-nél dolgozott.

Az ECMA szabványosította 1996-1997-ben, azóta is ők foglalkoznak a nyelvi alapokkal.
Az ES6 (2015) óta **évente** jön kiadás.

Kiforrott technológia már.

-- PAGE --

## Egy egyszerű nyelv

```js
function foo(item) {
   console.log('Bar' + (item + 3) + "!");
}
foo(1);
```
-- PAGE --
## Vagy mégsem?

```js
Promise.all(Array.apply(null, {length: 8})
	.map(Number.call, Number)
    .filter(e => !(e % 2))
    .map(e => new Promise((r1, r2) => {r1(e + 3)})))
    .then(e => e.join(''))
    .then(console.log)
    .catch(e=>console.error(e))
```

-- PAGE --
## Chrome és V8

Google Chrome 2008 óta fejlesztés alatt lévő böngésző, induláskor már a V8 javascript motor volt benne.

A V8 natív kóddá fordítja a betöltött js-t, így gyorsítva a működést.
Nagyon sok "varázslat" van benne, mint minden JIT projektben.

Open source, bármiben használható library:

https://v8.dev/

Alapja a Node.js, MongoDB szoftvereknek.

-- PAGE --
## JS sebesség

-- PAGE --
## Node.js

Ha már kliens oldalon javascriptet használunk (de-facto),
miért ne használhatnánk szerver oldalon is?

**Mi is kell ehhez?**

![](images/nodejs-system-diagram.png)

-- PAGE --
## Node.js modulok

**Beépített standard modulok:**

- File system, Path
- Net, HTTP, UDP, DNS, Domain
- Cluster, Console, Crypto
- ...

A legalapvetőbb funkciók vannak csak meg és a nyelv.

Mit tegyünk?

-- PAGE --
## NPM

**npm is the package manager for javascript**

sok, sok, sok, sok, sok package

-- PAGE --
## Dependencies

-- PAGE --
## Node modules

-- PAGE --
## Telepítsünk!

<img src="images/nodeinstall.png" height="400"/>
-- PAGE --
## Egy egyszerű webszerver

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

const server = http.createServer((req, res) =>{
    res.writeHead(200);
    res.write("Hello world!");
    res.end();
});

const port = 3000;
server.listen(port, () => {
    console.log('server listening on port ' + port);
});
```
-- PAGE --
## Egy npm module telepítése

![](images/npminstall.png)

-- PAGE --
### Egy egyszerű webszerver (+ colors)

```js
const http = require('http');
const colors = require('colors');                         // 1.

const server = http.createServer( (req, res) => {
    res.writeHead(200);
    console.log('URL: ' + colors.red(req.url));          // 2.
    res.write("Hello world!");
    res.end();
});

const port = 3000;
server.listen(port, () => { 
    console.log('server listening on port ' + port);
});
```
-- PAGE --
![](images/colorsok.png)

-- PAGE --
### Mivel fogunk foglalkozni a félév során:

* javascript nyelvi elemek
* node alap modulok
* express struktúra, middleware gondolatmenet és használat
* npm, mongodb, ejs technológiák
* tesztelés (tényleg hasznos módon)
* egy csipetnyi HTML és CSS

-- PAGE --
## Mit tudok elsajátítani?

* Node.js és ökoszisztéma használata.
* Express.js alkalmazás tervezése és megvalósítása.

-- PAGE --
## Kik használják?

Netflix, PayPal, Uber, LinkedIn, Walmart,eBay, Groupon, Trello, GoDaddy, Yahoo, Medium, NASA, Yandex, Citibank, X / Twitter

-- PAGE --
## Random kérdések és észrevételek