\section{Node.js Alapok} \subsection{} \begin{frame}{Mi a Node.js?} \begin{itemize} \item \kiemel{JavaScript futtatókörnyezet} a V8 motoron alapulva \item \kiemelZ{Szerveroldali JavaScript} fejlesztés lehetősége \item Eseményvezérelt, nem-blokkoló I/O modell \item Kiváló nagy számú egyidejű kapcsolat kezelésére \item Létrehozta: Ryan Dahl (2009) \end{itemize} \vspace{0.5cm} \begin{block}{Miért Node.js?} \begin{itemize} \item Ugyanaz a nyelv frontend és backend oldalon \item Hatalmas ökoszisztéma (npm) \item Gyors fejlesztés és prototípuskészítés \item Skálázható, nagy teljesítményű alkalmazások \end{itemize} \end{block} \end{frame} \begin{frame}{Node.js architektúra} \begin{columns} \begin{column}{0.5\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 \item Rendkívül gyors végrehajtás \end{itemize} \end{block} \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} \begin{column}{0.5\textwidth} \begin{block}{Event Loop} \begin{enumerate} \item Timers (setTimeout, setInterval) \item Pending callbacks \item Poll (I/O műveletek) \item Check (setImmediate) \item Close callbacks \end{enumerate} \end{block} \vspace{0.2cm} \centering \kiemel{Single-threaded}, de \kiemelZ{aszinkron}! \end{column} \end{columns} \end{frame} \begin{frame}[fragile,shrink=10]{Első Node.js program} \begin{block}{hello.js} \begin{lstlisting}[style=NodeJS] console.log('Hello, Node.js!'); console.log('Node verzio:', process.version); console.log('Platform:', process.platform); console.log('Aktualis konyvtar:', __dirname); console.log('Fajl neve:', __filename); \end{lstlisting} \end{block} \begin{block}{Futtatás} \begin{lstlisting}[language=bash] node hello.js \end{lstlisting} \end{block} \vspace{0.3cm} \begin{alertblock}{Fontos} A Node.js \kiemel{nem böngésző}! Nincs \texttt{window}, nincs \texttt{document}, de van \texttt{global} és \texttt{process}. \end{alertblock} \end{frame} \begin{frame}[fragile,shrink=10]{Modulrendszer - CommonJS} \begin{columns} \begin{column}{0.5\textwidth} \begin{block}{math.js - Modul exportálás} \begin{lstlisting}[style=NodeJS] function add(a, b) { return a + b; } function multiply(a, b) { return a * b; } module.exports = { add, multiply }; \end{lstlisting} \end{block} \end{column} \begin{column}{0.5\textwidth} \begin{block}{app.js - Modul importálás} \begin{lstlisting}[style=NodeJS] const math = require('./math'); console.log(math.add(2, 3)); // 5 console.log(math.multiply(4, 5)); // 20 \end{lstlisting} \end{block} \end{column} \end{columns} \vspace{0.3cm} \begin{block}{Beépített modulok} \begin{lstlisting}[style=NodeJS] const fs = require('fs'); // File system const path = require('path'); // Path mukodtatas const http = require('http'); // HTTP szerver \end{lstlisting} \end{block} \end{frame} \begin{frame}[fragile,shrink=10]{ES Modules (ESM)} \begin{columns} \begin{column}{0.5\textwidth} \begin{block}{math.mjs - Export} \begin{lstlisting}[style=NodeJS] export function add(a, b) { return a + b; } export function multiply(a, b) { return a * b; } // Default export export default { add, multiply }; \end{lstlisting} \end{block} \end{column} \begin{column}{0.5\textwidth} \begin{block}{app.mjs - Import} \begin{lstlisting}[style=NodeJS] // Named import import { add, multiply } from './math.mjs'; console.log(add(2, 3)); // Default import import math from './math.mjs'; console.log(math.multiply(4, 5)); \end{lstlisting} \end{block} \end{column} \end{columns} \vspace{0.3cm} \begin{alertblock}{package.json} ESM használatához: \texttt{\{"type": "module"\}} a package.json-ben \end{alertblock} \end{frame} \begin{frame}[fragile,shrink=10]{File System műveletek} \begin{block}{Fájl olvasás - Szinkron} \begin{lstlisting}[style=NodeJS] const fs = require('fs'); const data = fs.readFileSync('input.txt', 'utf8'); console.log(data); // Blokkolja a vegrehajtast! \end{lstlisting} \end{block} \begin{block}{Fájl olvasás - Aszinkron (Callback)} \begin{lstlisting}[style=NodeJS] fs.readFile('input.txt', 'utf8', (err, data) => { if (err) { console.error('Hiba:', err); return; } console.log(data); }); // Nem blokkolja a vegrehajtast! \end{lstlisting} \end{block} \end{frame} \begin{frame}[fragile,shrink=10]{File System - Promises API} \begin{block}{Fájl olvasás - Promise} \begin{lstlisting}[style=NodeJS] const fs = require('fs').promises; async function readData() { try { const data = await fs.readFile('input.txt', 'utf8'); console.log(data); } catch (error) { console.error('Hiba:', error); } } readData(); \end{lstlisting} \end{block} \begin{block}{Fájl írás} \begin{lstlisting}[style=NodeJS] await fs.writeFile('output.txt', 'Hello Node.js!', 'utf8'); \end{lstlisting} \end{block} \end{frame} \begin{frame}[fragile,shrink=10]{HTTP szerver létrehozása} \begin{block}{Egyszerű HTTP szerver} \begin{lstlisting}[style=NodeJS] const http = require('http'); const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain; charset=utf-8'); res.end('Hello, Node.js szerver!\n'); }); const PORT = 3000; server.listen(PORT, () => { console.log(`Szerver fut: http://localhost:${PORT}`); }); \end{lstlisting} \end{block} \vspace{0.3cm} \centering \kiemel{Böngészőben:} \texttt{http://localhost:3000} \end{frame} \begin{frame}[fragile,shrink=10]{Process objektum} \begin{block}{Process információk és műveletek} \begin{lstlisting}[style=NodeJS] // Kornyezeti valtozok console.log(process.env.NODE_ENV); // Parancssori argumentumok console.log(process.argv); // Kilepes process.exit(0); // Sikeres kilepes process.exit(1); // Hiba // Esemenyek process.on('exit', (code) => { console.log(`Kilepes kod: ${code}`); }); \end{lstlisting} \end{block} \end{frame} \begin{frame}[fragile,shrink=10]{Path modul} \begin{block}{Útvonal műveletek} \begin{lstlisting}[style=NodeJS] const path = require('path'); // Utvonalak osszefuzese const filePath = path.join(__dirname, 'data', 'users.json'); // Kiterjesztes lekerese const ext = path.extname('file.txt'); // .txt // Fajlnev bazisresz const base = path.basename('/user/local/file.txt'); // file.txt // Konyvtar resz const dir = path.dirname('/user/local/file.txt'); // /user/local // Abszolut utvonal const abs = path.resolve('data', 'users.json'); \end{lstlisting} \end{block} \end{frame} \begin{frame}[fragile,shrink=10]{Events - Eseménykezelés} \begin{block}{EventEmitter használata} \begin{lstlisting}[style=NodeJS] const EventEmitter = require('events'); class MyEmitter extends EventEmitter {} const myEmitter = new MyEmitter(); // Esemeny figyelese myEmitter.on('event', (data) => { console.log('Esemeny tortent:', data); }); // Esemeny kivaltas myEmitter.emit('event', {message: 'Hello Events!'}); \end{lstlisting} \end{block} \vspace{0.3cm} \centering Node.js \kiemel{eseményvezérelt} architektúrája alapja! \end{frame} \begin{frame}{Node.js vs. Böngésző} \begin{table} \centering \begin{tabular}{|l|l|l|} \hline \textbf{Jellemző} & \textbf{Node.js} & \textbf{Böngésző} \\ \hline JavaScript engine & V8, SpiderMonkey & V8, SpiderMonkey, stb. \\ \hline DOM API & \kiemel{Nincs} & Van \\ \hline window objektum & \kiemel{Nincs} & Van \\ \hline global objektum & \kiemelZ{global} & window \\ \hline File system & \kiemelZ{Van (fs)} & Nincs (limitált) \\ \hline Modulrendszer & CommonJS, ESM & ESM \\ \hline HTTP szerver & \kiemelZ{Készíthető} & Nem \\ \hline Használat & Backend, CLI & Frontend \\ \hline \end{tabular} \end{table} \end{frame} \begin{frame}{Összefoglalás} \begin{block}{Node.js alapok} \begin{itemize} \item V8 engine alapú JavaScript futtatókörnyezet \item Event-driven, non-blocking I/O modell \item Modulrendszer: CommonJS és ES Modules \item Beépített modulok: fs, path, http, events \item Process objektum: környezeti változók, argumentumok \item File system műveletek: szinkron, aszinkron, Promise \item HTTP szerver készítése \item EventEmitter: saját események létrehozása \end{itemize} \end{block} \end{frame}