alapok
This commit is contained in:
magdo
@@ -0,0 +1,350 @@
|
||||
\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}
|
||||
Reference in New Issue
Block a user