first week

órai anyagok/week01/sections/03-npm.tex

@@ -0,0 +1,253 @@
+\section{NPM Package Manager}
+
+\begin{frame}[fragile]{Mi az npm?}
+\footnotesize
+Amint elkezdünk egy valós projekten dolgozni, hamar szükségünk lesz mások által megírt kódra -- ne írjunk újra mindent nulláról! Az \textbf{npm} (Node Package Manager) ebben segít: ez a Node.js hivatalos csomagkezelője, amivel telepíthetünk, frissíthetünk és megoszthatunk kódcsomagokat.
+
+\begin{itemize}
+\item Node Package Manager -- Node.js csomagkezelője
+\item A világ legnagyobb szoftver registry-je (2+ millió csomag)
+\item Node.js-szel együtt települ, külön telepíteni nem kell
+\item Projekt függőségek kezelése, verziószám ellenőrzése
+\end{itemize}
+
+\begin{block}{Verziószám ellenőrzése}
+\begin{verbatim}
+node --version
+npm --version
+\end{verbatim}
+\end{block}
+\end{frame}
+
+\begin{frame}[fragile]{npm alternatívái}
+\footnotesize
+Bár a tárgy során mindvégig az npm-et fogjuk használni, érdemes tudni, hogy nem ez az egyetlen csomagkezelő a Node.js ökoszisztémában -- a szakmában több helyen találkozhatsz az alternatíváival is.
+
+\begin{alertblock}{Alternatívák}
+\texttt{yarn} és \texttt{pnpm} -- ugyanazt a célt szolgálják, mint az npm, csak némileg gyorsabbak és hatékonyabbak lehetnek nagyobb projekteknél. A \texttt{pnpm} például egyetlen, megosztott tárolóban tartja a csomagokat, így lemezterületet spórol.
+\end{alertblock}
+
+A parancsok szinte megegyeznek egymással (\texttt{npm install} $\leftrightarrow$ \texttt{yarn add} $\leftrightarrow$ \texttt{pnpm add}), így ha megtanulod az egyiket, a többit is könnyen felveszed majd.
+\end{frame}
+
+\begin{frame}[fragile]{npm init -- Projekt inicializálás}
+\footnotesize
+Minden Node.js projekt egy \texttt{package.json} fájllal kezdődik, ami leírja a projekt metaadatait (nevét, verzióját, függőségeit). Ezt a fájlt az \texttt{npm init} parancs generálja le nekünk.
+
+\begin{block}{Interaktív projekt létrehozás}
+\begin{verbatim}
+npm init
+\end{verbatim}
+Ekkor az npm sorra megkérdezi a projekt nevét, verzióját, leírását, stb.
+\end{block}
+
+\begin{block}{Gyors inicializálás alapértelmezett értékekkel}
+\begin{verbatim}
+npm init -y
+\end{verbatim}
+\end{block}
+\end{frame}
+
+\begin{frame}{npm init -- mit hoz létre?}
+\footnotesize
+Mindkét változat ugyanazt az egy fájlt hozza létre -- csak abban különböznek, hogy megkérdezik-e tőlünk előtte a projekt adatait, vagy rögtön alapértelmezett értékekkel dolgoznak.
+
+\begin{alertblock}{Eredmény}
+Létrejön a \texttt{package.json} fájl, amely a projekt metaadatait tartalmazza, és ami a projektünk "személyi igazolványaként" működik: ebben tároljuk a nevét, verzióját, a függőségeit és a saját parancsainkat is.
+\end{alertblock}
+
+Ha egy projektet klónozol githubról, az első dolgod mindig az legyen, hogy megnézed a \texttt{package.json}-t -- ebből azonnal kiderül, milyen technológiákat használ, és hogyan indítható.
+\end{frame}
+
+\begin{frame}[fragile]{package.json struktúra}
+\footnotesize
+Érdemes megismerkedni a \texttt{package.json} legfontosabb mezőivel, hiszen ez a fájl fogja a félév során minden projektünket összefogni.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+{
+  "name": "backend-app",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "dev": "nodemon index.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1"
+  }
+}
+\end{lstlisting}
+\end{frame}
+
+\begin{frame}{package.json mezői}
+\footnotesize
+A \texttt{scripts} mező alatt saját parancsainkat definiálhatjuk, a \texttt{dependencies} és \texttt{devDependencies} pedig a projekt függőségeit sorolja fel.
+
+\begin{itemize}
+\item \texttt{name}, \texttt{version} -- a projekt azonosítója és verziója
+\item \texttt{main} -- melyik fájl a belépési pont, ha valaki \texttt{require}-olja a projektünket
+\item \texttt{scripts} -- rövid parancsok gyakori feladatokra (erről bővebben pár dia múlva)
+\item \texttt{dependencies} / \texttt{devDependencies} -- a projekt függőségei (erről is bővebben mindjárt)
+\end{itemize}
+\end{frame}
+
+\begin{frame}[fragile]{Csomagok telepítése -- production függőségek}
+\footnotesize
+Amikor egy csomagra van szükségünk, az \texttt{npm install} (röviden \texttt{npm i}) paranccsal tudjuk hozzáadni a projekthez. Fontos eldönteni, hogy a csomagra csak fejlesztés közben, vagy éles működéskor is szükség lesz-e.
+
+\begin{block}{Production függőségként}
+\begin{verbatim}
+npm install express
+npm i express
+\end{verbatim}
+\end{block}
+
+Ezek a csomagok a \texttt{dependencies} alá kerülnek a \texttt{package.json}-ben -- ezek nélkül az alkalmazásunk éles környezetben sem tudna elindulni, hiszen a kódunk ténylegesen használja őket futás közben (pl. az Express.js keretrendszert magát).
+\end{frame}
+
+\begin{frame}[fragile]{Csomagok telepítése -- development függőségek}
+\footnotesize
+Vannak olyan eszközök, amikre csak a fejlesztés közben van szükségünk (pl. automatikus újraindítás, tesztelés, kódformázás) -- ezeket nem érdemes az éles szerverre is felmásolni.
+
+\begin{block}{Development függőségként}
+\begin{verbatim}
+npm install --save-dev nodemon
+npm i -D nodemon jest eslint
+\end{verbatim}
+\end{block}
+
+\begin{alertblock}{Mi a különbség?}
+\texttt{dependencies}: éles környezetben is kell \quad|\quad \texttt{devDependencies}: csak fejlesztéshez (pl. tesztelő, formázó eszközök)
+\end{alertblock}
+\end{frame}
+
+\begin{frame}{Semantic Versioning (SemVer)}
+\footnotesize
+Az npm csomagok verziószámozása egy szigorú, háromrészes konvenciót követ, amiből azonnal leolvasható, hogy egy frissítés mekkora változást hozhat.
+
+\begin{block}{Verzió formátum}
+\texttt{1.2.3} $\to$ \texttt{1} (major) . \texttt{2} (minor) . \texttt{3} (patch)
+\end{block}
+
+\begin{itemize}
+\item \textbf{MAJOR:} nem kompatibilis, "törő" API változás
+\item \textbf{MINOR:} új funkció, de visszafelé kompatibilis
+\item \textbf{PATCH:} hibajavítás, visszafelé kompatibilis
+\end{itemize}
+\end{frame}
+
+\begin{frame}{SemVer jelölések a package.json-ban}
+\footnotesize
+A \texttt{package.json}-ban a verziószám elé írt jel (\texttt{\^{}} vagy \texttt{\textasciitilde}) szabja meg, hogy \texttt{npm install}/\texttt{npm update} során milyen új verziókat fogadunk el automatikusan.
+
+\begin{tabular}{|l|l|}
+\hline
+\textbf{Jelölés} & \textbf{Jelentés} \\
+\hline
+\texttt{1.2.3} & Pontosan 1.2.3 verzió \\
+\texttt{\^{}1.2.3} & $\geq$ 1.2.3 és $<$ 2.0.0 (MINOR frissítések engedélyezve) \\
+\texttt{\textasciitilde 1.2.3} & $\geq$ 1.2.3 és $<$ 1.3.0 (csak PATCH frissítések) \\
+\texttt{latest} & Mindig a legfrissebb verzió \\
+\hline
+\end{tabular}
+
+\begin{alertblock}{Gyakori alapértelmezés}
+Az \texttt{npm install csomagnev} alapból a \texttt{\^{}} jelölést használja -- ez a leggyakoribb, kényelmes középút a stabilitás és a frissesség között.
+\end{alertblock}
+\end{frame}
+
+\begin{frame}[fragile]{npm scripts}
+\footnotesize
+A \texttt{package.json} \texttt{scripts} mezőjében saját, rövid parancsokat definiálhatunk a gyakran ismételt feladatokra (indítás, tesztelés, linting) -- így nem kell mindig hosszú parancsokat begépelni.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+{
+  "scripts": {
+    "start": "node index.js",
+    "dev": "nodemon index.js",
+    "test": "jest",
+    "lint": "eslint ."
+  }
+}
+\end{lstlisting}
+
+\begin{block}{Scripts futtatása}
+\begin{verbatim}
+npm run dev
+npm start   # 'run' nelkul is mukodik
+\end{verbatim}
+\end{block}
+\end{frame}
+
+\begin{frame}{node\_modules és package-lock.json}
+\footnotesize
+Amikor telepítünk egy csomagot, az npm két dolgot hoz létre: egy \texttt{node\_modules} mappát a tényleges kóddal, és egy \texttt{package-lock.json} fájlt. Fontos tudni, melyiket kell git-ben verziókövetni, és melyiket nem.
+
+\begin{columns}
+\begin{column}{0.48\textwidth}
+\begin{block}{node\_modules}
+\begin{itemize}
+\item A telepített csomagok tényleges kódját tartalmazó mappa
+\item Nagyon nagy tud lenni (akár több száz MB)
+\item Ne commitoljuk git-be!
+\item Újragenerálás: \texttt{npm install}
+\end{itemize}
+\end{block}
+\end{column}
+\begin{column}{0.48\textwidth}
+\begin{block}{package-lock.json}
+\begin{itemize}
+\item Pontosan rögzíti, melyik csomagból melyik verzió lett telepítve
+\item Determinisztikus, mindenkinél ugyanazt eredményező telepítést biztosít
+\item Ezt viszont commitoljuk git-be!
+\end{itemize}
+\end{block}
+\end{column}
+\end{columns}
+\end{frame}
+
+\begin{frame}[fragile]{Hasznos npm parancsok és npx}
+\footnotesize
+Néhány további parancs, amire a mindennapi munka során gyakran szükség lesz: a projekt állapotának ellenőrzésére, illetve arra, hogy egy csomagot telepítés nélkül, egyszer futtassunk le.
+
+\begin{columns}
+\begin{column}{0.48\textwidth}
+\begin{block}{Karbantartás}
+\begin{verbatim}
+npm list
+npm outdated
+npm audit
+npm audit fix
+\end{verbatim}
+\end{block}
+\end{column}
+\begin{column}{0.48\textwidth}
+\begin{block}{npx -- futtatás telepítés nélkül}
+\begin{verbatim}
+npx prisma init
+npx tsx index.ts
+\end{verbatim}
+\end{block}
+\end{column}
+\end{columns}
+
+Az \texttt{npx} egy segédeszközt csak egyszer, ideiglenesen tölt le és futtat le, anélkül, hogy állandó jelleggel telepítené a gépünkre.
+\end{frame}
+
+\begin{frame}{Összefoglalás -- NPM}
+\footnotesize
+\begin{block}{npm alapok}
+\begin{itemize}
+\item npm: Node Package Manager, 2+ millió elérhető csomag
+\item \texttt{npm init} -- projekt inicializálása, \texttt{package.json} létrehozása
+\item \texttt{npm install/uninstall/update} -- csomagkezelés
+\item \texttt{dependencies} vs \texttt{devDependencies} -- éles vs csak fejlesztői függőség
+\item Semantic Versioning: \texttt{MAJOR.MINOR.PATCH}
+\item \texttt{node\_modules} (ne commitold), \texttt{package-lock.json} (ezt viszont igen)
+\item \texttt{npx}: csomagok egyszeri futtatása telepítés nélkül
+\end{itemize}
+\end{block}
+\end{frame}