\section{Express.js}

\begin{frame}[fragile]{Miért nem elég a nyers \texttt{http} modul?}
\footnotesize
Emlékezzünk vissza az 1. héten írt szerverre: egyetlen callback-ben kellett eldöntenünk, milyen útvonalra és milyen metódussal érkezett a kérés.

\begin{lstlisting}[language=JavaScript,style=NodeJS]
const server = http.createServer((req, res) => {
  if (req.url === '/users' && req.method === 'GET') {
    // ...
  } else if (req.url === '/users' && req.method === 'POST') {
    // ...
  } else if (req.url.startsWith('/users/') && req.method === 'GET') {
    // egy adott felhasznalo -- id kezzel kivagva az URL-bol
  } // es igy tovabb...
});
\end{lstlisting}

\begin{alertblock}{A probléma}
Tíz-húsz végpontnál ez a lánc kezelhetetlenné válik: nincs beépített segítség a paraméterek kiolvasásához, a JSON törzs feldolgozásához, vagy az útvonalak csoportosításához.
\end{alertblock}
\end{frame}

\begin{frame}{Mi az Express.js?}
\footnotesize
Az \textbf{Express.js} a legelterjedtebb Node.js webes keretrendszer (web framework): a nyers \texttt{http} modulra épül, és eltünteti a kézi \texttt{if-else} láncokat egy sokkal kényelmesebb, deklaratív routing API-val.

\begin{itemize}
\item Egyszerű, minimalista -- nem kényszerít ránk egy előírt projektszerkezetet
\item Beépített segítség: útvonal-paraméterek, query stringek, JSON válaszok
\item Hatalmas ökoszisztéma: middleware-ek szinte minden problémára (autentikáció, naplózás, CORS, stb.)
\item Ez lesz a tárgy hátralévő részének elsődleges keretrendszere
\end{itemize}

\begin{block}{Fontos}
Az Express \emph{nem} helyettesíti a Node.js-t -- ráépül. Amit az 1. héten a \texttt{http} modulról tanultunk (request/response ciklus), az Express alatt is pontosan úgy működik.
\end{block}
\end{frame}

\begin{frame}[fragile]{Az első Express alkalmazás}
\footnotesize
Néhány sorból már működő szerverünk van -- hasonlítsd össze az előző dia \texttt{if-else} láncával!

\begin{block}{Telepítés}
\begin{verbatim}
npm install express
\end{verbatim}
\end{block}

\begin{lstlisting}[language=JavaScript,style=NodeJS]
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello, Express!');
});

app.listen(3000, () => {
  console.log('Szerver fut: http://localhost:3000');
});
\end{lstlisting}
\end{frame}

\begin{frame}[fragile]{A middleware fogalma}
\footnotesize
Az Express legfontosabb koncepciója a \textbf{middleware}: egy függvény, ami a kérés és a válasz között fut le, és vagy továbbengedi a folyamatot (\texttt{next()}), vagy lezárja azt egy válasszal.

\begin{lstlisting}[language=JavaScript,style=NodeJS]
app.use((req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next(); // tovabb a kovetkezo middleware-hez/route-hoz
});

app.use(express.json()); // JSON body-t olvaso middleware
\end{lstlisting}

\begin{itemize}
\item A kérések egy "csövön" (pipeline) haladnak végig, middleware-eken keresztül
\item \texttt{express.json()} nélkül a \texttt{req.body} üres lenne POST/PUT kéréseknél
\item Naplózás, autentikáció, hibakezelés -- mind middleware-ként valósul meg
\end{itemize}
\end{frame}

\begin{frame}{Összefoglalás -- Express.js}
\footnotesize
\begin{block}{Express.js alapok}
\begin{itemize}
\item Node.js-re épülő, minimalista webes keretrendszer
\item Kiváltja a kézi \texttt{if-else} útvonal-elágazásokat
\item \texttt{app.listen()} -- szerver indítása, ugyanaz mint a nyers \texttt{http}-nél
\item Middleware: \texttt{app.use()} -- a kérés-válasz "csövének" építőeleme
\item \texttt{express.json()} -- beépített middleware a JSON törzs feldolgozásához
\end{itemize}
\end{block}
\end{frame}