first week

órai anyagok/week01/sections/02-nodejs.tex

@@ -0,0 +1,196 @@
+\section{Node.js Alapok}
+
+\begin{frame}{Mi a Node.js?}
+\footnotesize
+A Javascript eredetileg kizárólag böngészőkben futott. A \textbf{Node.js} ezt változtatta meg: kiszedte a Google Chrome V8 motorját a böngészőből, és lehetővé tette, hogy Javascript kód a szerveren, önállóan is fusson -- így írhatunk vele backend alkalmazásokat, parancssori eszközöket, akár build-rendszereket is.
+
+\begin{itemize}
+\item JavaScript futtatókörnyezet a V8 motoron alapulva
+\item Szerveroldali JavaScript fejlesztés lehetősége
+\item Eseményvezérelt, nem blokkoló (non-blocking) I/O modell
+\item Létrehozta: Ryan Dahl (2009)
+\end{itemize}
+
+\begin{block}{Miért Node.js?}
+Ugyanazt a nyelvet használhatjuk frontend és backend oldalon is, hatalmas npm ökoszisztéma áll rendelkezésre szinte bármilyen problémára, és gyors vele a fejlesztés, prototípuskészítés.
+\end{block}
+\end{frame}
+
+\begin{frame}{Node.js architektúra}
+\footnotesize
+A Node.js két fő komponensre épül: a Javascript kódot lefordító és futtató \textbf{V8 motorra}, valamint a háttérben futó \textbf{libuv} könyvtárra, ami az aszinkron I/O műveleteket (fájl, hálózat) kezeli.
+
+\begin{columns}
+\begin{column}{0.48\textwidth}
+\begin{block}{V8 JavaScript Engine}
+\begin{itemize}
+\item Google Chrome motorja
+\item JIT (Just-In-Time) fordítás
+\item C++ nyelven íródott, rendkívül gyors
+\end{itemize}
+\end{block}
+\end{column}
+\begin{column}{0.48\textwidth}
+\begin{block}{libuv}
+\begin{itemize}
+\item Event loop implementáció
+\item Aszinkron I/O műveletek
+\item Cross-platform támogatás
+\end{itemize}
+\end{block}
+\end{column}
+\end{columns}
+
+\begin{alertblock}{Event Loop}
+Timers $\to$ Pending callbacks $\to$ Poll (I/O) $\to$ Check $\to$ Close callbacks. A Node.js egyetlen szálon (single-threaded) fut, de az I/O műveletek aszinkron módon, a háttérben zajlanak -- így egy lassú fájlművelet nem blokkolja a többi kérés kiszolgálását.
+\end{alertblock}
+\end{frame}
+
+\begin{frame}[fragile]{Első Node.js program}
+\footnotesize
+Nézzünk egy egyszerű, de tanulságos első programot, ami megmutatja, milyen beépített, Node.js-specifikus változókhoz férünk hozzá.
+
+\begin{block}{hello.js -- futtatás: \texttt{node hello.js}}
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+console.log('Hello, Node.js!');
+console.log('Node verzio:', process.version);
+console.log('Aktualis konyvtar:', __dirname);
+\end{lstlisting}
+\end{block}
+
+\begin{alertblock}{Fontos}
+A Node.js nem böngésző! Nincs \texttt{window}, nincs \texttt{document}, de van helyette \texttt{global} (a böngésző \texttt{window}-jának megfelelője) és \texttt{process} (a futó Node.js folyamatról ad információt).
+\end{alertblock}
+\end{frame}
+
+\begin{frame}[fragile]{Modulrendszer -- CommonJS}
+\footnotesize
+Ahogy a kódunk növekszik, elkerülhetetlen, hogy több fájlra bontsuk. A Node.js hagyományos, alapértelmezett modulrendszere a \textbf{CommonJS}, ahol a \texttt{require} és a \texttt{module.exports} párossal osztunk meg kódot fájlok között.
+
+\begin{columns}
+\begin{column}{0.48\textwidth}
+\begin{block}{math.js -- export}
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+function add(a, b) {
+  return a + b;
+}
+module.exports = { add };
+\end{lstlisting}
+\end{block}
+\end{column}
+\begin{column}{0.48\textwidth}
+\begin{block}{app.js -- import}
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+const math = require('./math');
+console.log(math.add(2, 3));
+// 5
+\end{lstlisting}
+\end{block}
+\end{column}
+\end{columns}
+
+\begin{block}{Beépített (core) modulok}
+A Node.js számos hasznos modult ad eleve a kezünkbe, telepítés nélkül: \texttt{fs} (file system, fájlkezelés), \texttt{path} (útvonalak kezelése), \texttt{http} (webszerver készítése).
+\end{block}
+\end{frame}
+
+\begin{frame}[fragile]{ES Modules (ESM)}
+\footnotesize
+A modern Javascript szabvány, az ECMAScript saját, egységes modulrendszert vezetett be \texttt{import}/\texttt{export} kulcsszavakkal -- ugyanezt ismerheted a frontend keretrendszerekből (React, Vue) is. A Node.js is támogatja ezt, ha bekapcsoljuk.
+
+\begin{columns}
+\begin{column}{0.48\textwidth}
+\begin{block}{math.mjs -- export}
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+export function add(a, b) {
+  return a + b;
+}
+\end{lstlisting}
+\end{block}
+\end{column}
+\begin{column}{0.48\textwidth}
+\begin{block}{app.mjs -- import}
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+import { add } from './math.mjs';
+console.log(add(2, 3));
+\end{lstlisting}
+\end{block}
+\end{column}
+\end{columns}
+
+\begin{alertblock}{package.json}
+Az ESM használatához be kell állítani: \texttt{\{"type": "module"\}} a \texttt{package.json} fájlban -- ekkor a \texttt{.js} kiterjesztésű fájlok is ES modulként fognak viselkedni.
+\end{alertblock}
+\end{frame}
+
+\begin{frame}[fragile]{File System műveletek}
+\footnotesize
+A backend fejlesztés egyik leggyakoribb feladata fájlokkal dolgozni (konfiguráció olvasása, log írása, feltöltött fájlok kezelése). A Node.js \texttt{fs} modulja ehhez háromféle API-t is kínál.
+
+\begin{block}{Fájl olvasás -- Promise API (ajánlott)}
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+const fs = require('fs').promises;
+
+async function readData() {
+  const data = await fs.readFile('input.txt', 'utf8');
+  console.log(data);
+}
+\end{lstlisting}
+\end{block}
+
+\begin{itemize}
+\item \texttt{readFileSync} -- szinkron, blokkolja a végrehajtást, amíg be nem fejeződik (kerülendő szerveroldalon)
+\item \texttt{readFile} callback-kel -- aszinkron, a régebbi, callback-alapú stílus
+\item \texttt{fs.promises} -- aszinkron, \texttt{async/await}-tel szépen, szinkron kódként olvasható -- ma ez az ajánlott megoldás
+\end{itemize}
+\end{frame}
+
+\begin{frame}[fragile]{HTTP szerver létrehozása}
+\footnotesize
+Ahogy korábban láttuk, a HTTP request-response modellt bármilyen nyelven meg lehet valósítani. Node.js-ben a beépített \texttt{http} modullal mindössze néhány sorból már működő webszervert tudunk indítani -- ez az alapja mindannak, amit a következő heteken Express.js-szel fogunk csinálni.
+
+\begin{block}{Egyszerű HTTP szerver}
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+const http = require('http');
+const server = http.createServer((req, res) => {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello, Node.js szerver!\n');
+});
+server.listen(3000, () => {
+  console.log('Szerver fut: http://localhost:3000');
+});
+\end{lstlisting}
+\end{block}
+\end{frame}
+
+\begin{frame}{Node.js vs. Böngésző}
+\footnotesize
+Fontos tudatosítani, hogy bár mindkét környezetben Javascript kód fut, a Node.js és a böngésző \emph{teljesen más} környezetet biztosítanak -- más API-k érhetők el, és más a rendeltetésük is.
+
+\begin{tabular}{|l|l|l|}
+\hline
+\textbf{Jellemző} & \textbf{Node.js} & \textbf{Böngésző} \\
+\hline
+DOM API & Nincs & Van \\
+\texttt{window} objektum & Nincs & Van \\
+Globális objektum & \texttt{global} & \texttt{window} \\
+File system & Van (\texttt{fs}) & Nincs \\
+HTTP szerver & Készíthető & Nem \\
+Használat & Backend, CLI & Frontend \\
+\hline
+\end{tabular}
+\end{frame}
+
+\begin{frame}{Összefoglalás -- Node.js}
+\footnotesize
+\begin{block}{Node.js alapok}
+\begin{itemize}
+\item V8 engine alapú JavaScript futtatókörnyezet, szerveroldalon
+\item Event-driven, non-blocking I/O modell -- egy szálon, de aszinkron módon
+\item Modulrendszer: CommonJS (\texttt{require}) és ES Modules (\texttt{import})
+\item Beépített modulok: \texttt{fs} (fájlok), \texttt{path} (útvonalak), \texttt{http} (szerver)
+\item HTTP szerver készítése pár sorban -- ez az alapja a jövő heti Express.js-nek
+\end{itemize}
+\end{block}
+\end{frame}