Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>Node.js</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>Node.js</h1> </header> <section bg="node-cover.jpg" class="slide cover"><div><h2> </h2> </div></section> <section class="slide" id="nodejs"><div><h2>Node.js</h2> <ul> <li>Server-side JavaScript Runtime</li> <li>Event-driven, non-blocking I/O</li> <li>V8 Engine</li> <li>Anwendung: prinzipiell alles, aber häufig <ul> <li>CLI-Programme</li> <li>Web-Server</li> <li>Desktop Apps über <a href="https://electronjs.org/">Electron</a></li> </ul> </li> </ul> <footer> <ul> <li>JS-Laufzeitumgebung basierend auf Chrome V8</li> <li>Node.js Architektur: Event Loop, Single-threaded,</li> <li>kann alles, was andere sprachen auch können: dynamische inalte erzeugen, dateien lesen, formular-daten entgegen nehmen, inhalte in datenbank speichern</li> </ul> </footer> </div></section> <section class="slide" id="installation"><div><h2>Installation</h2> <ul> <li><a href="https://nodejs.org/de/download/">Download von nodejs.org</a></li> <li>macOS mit brew: <code class="language-plaintext highlighter-rouge">brew install node</code></li> <li>Für Windows: <a href="https://www.ionos.de/digitalguide/websites/web-entwicklung/einfuehrung-in-nodejs/#c94365">bebilderte Installationsanleitung</a></li> </ul> </div></section> <section class="slide" id="debugging"><div><h2>Debugging</h2> <ul> <li>REPL: <code class="language-plaintext highlighter-rouge">node</code></li> <li><code class="language-plaintext highlighter-rouge">console.log</code> im Code</li> <li><a href="https://github.com/GoogleChromeLabs/ndb">ndb</a> + <code class="language-plaintext highlighter-rouge">debugger;</code></li> <li>(<a href="https://code.visualstudio.com/docs/nodejs/nodejs-debugging">VSCode</a> und <a href="https://www.jetbrains.com/help/idea/running-and-debugging-node-js.html">IntelliJ</a> haben integrierte Debugger)</li> </ul> <footer> <ul> <li>global object</li> <li>live expressions</li> </ul> </footer> </div></section> <section class="slide" id="module--npm"><div><h2>Module & NPM</h2> <ul> <li>JS hatte lange keine eigenen Sprachkonstrukte für Module, darum globale Funktion <code class="language-plaintext highlighter-rouge">require</code></li> <li>mit ES6 kam <code class="language-plaintext highlighter-rouge">import</code> dazu, ist aber noch nicht vollständig verbreitet (nur in <code class="language-plaintext highlighter-rouge">.mjs</code>)</li> <li>Node.js hat nur wenige integrierte Module, z.B. <code class="language-plaintext highlighter-rouge">fs</code>, <code class="language-plaintext highlighter-rouge">http</code>, <code class="language-plaintext highlighter-rouge">os</code>, <code class="language-plaintext highlighter-rouge">path</code>, <code class="language-plaintext highlighter-rouge">url</code></li> <li>für alles andere: reichhaltiges Ökosystem über <a href="https://www.npmjs.com/">npm</a></li> <li>Deklaration in <code class="language-plaintext highlighter-rouge">package.json</code></li> <li>neues Projekt mit <code class="language-plaintext highlighter-rouge">npm init</code> starten</li> <li>Pakete mit <code class="language-plaintext highlighter-rouge">npm install Paketname</code> installieren</li> </ul> <footer> <ul> <li>Java: <code class="language-plaintext highlighter-rouge">import java.util.*;</code></li> <li>Node-Philosophie: small core, small modules</li> <li>hat Vor- und Nachteile (schnelle Innovation aber keine klaren Wege)</li> <li>global verfügbares Objekt <code class="language-plaintext highlighter-rouge">module</code> mit property <code class="language-plaintext highlighter-rouge">exports</code></li> </ul> </footer> </div></section> <section class="slide" id="beispiel-core-modules--asynchrone-programmierung"><div><h2>Beispiel Core Modules + asynchrone Programmierung</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">const</span> <span class="nx">fs</span> <span class="o">=</span> <span class="nf">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">fs</span><span class="dl">'</span><span class="p">);</span> <span class="c1">// sync / blocking</span> <span class="kd">const</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">fs</span><span class="p">.</span><span class="nf">readFileSync</span><span class="p">(</span><span class="nx">filename</span><span class="p">,</span> <span class="dl">'</span><span class="s1">utf8</span><span class="dl">'</span><span class="p">);</span> <span class="c1">// async / non-blocking</span> <span class="nx">fs</span><span class="p">.</span><span class="nf">readFile</span><span class="p">(</span><span class="nx">filename</span><span class="p">,</span> <span class="dl">'</span><span class="s1">utf8</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">content</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span> <span class="p">});</span> <span class="nx">fs</span><span class="p">.</span><span class="nf">writeFile</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello.txt</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Hello world!</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span> <span class="p">});</span> </code></pre> <footer> <ul> <li>Callbacks</li> <li>Promises</li> <li>Async/await</li> </ul> </footer> </div></section> <section class="slide" id="anwendung---web-server"><div><h2>Anwendung - Web-Server</h2> <p><code class="language-plaintext highlighter-rouge">node --watch server.mjs</code></p> <pre class="highlight language-js" data-lang="js"><code> <span class="k">import</span> <span class="p">{</span> <span class="nx">createServer</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">node:http</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">server</span> <span class="o">=</span> <span class="nf">createServer</span><span class="p">((</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">res</span><span class="p">.</span><span class="nx">statusCode</span> <span class="o">=</span> <span class="mi">200</span><span class="p">;</span> <span class="nx">res</span><span class="p">.</span><span class="nf">setHeader</span><span class="p">(</span><span class="dl">'</span><span class="s1">Content-Type</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">text/plain</span><span class="dl">'</span><span class="p">);</span> <span class="nx">res</span><span class="p">.</span><span class="nf">end</span><span class="p">(</span><span class="dl">'</span><span class="s1">Hello World</span><span class="dl">'</span><span class="p">);</span> <span class="p">});</span> <span class="nx">server</span><span class="p">.</span><span class="nf">listen</span><span class="p">(</span><span class="mi">3000</span><span class="p">,</span> <span class="dl">'</span><span class="s1">127.0.0.1</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Server started</span><span class="dl">'</span><span class="p">);</span> <span class="p">});</span> </code></pre> <footer> <ul> <li>Dateiendung: <code class="language-plaintext highlighter-rouge">mjs</code>, damit wir Imports nutzen können</li> <li>Client-Server-Modell erklären</li> <li>Aufgabe eines Web-Servers: TCP-Verbindung entgegen nehmen, auf HTTP-Anfrage mit HTTP-Antwort reagieren</li> <li>Beispiel umbauen <ul> <li>auf <code class="language-plaintext highlighter-rouge">text/html</code> setzen</li> <li><code class="language-plaintext highlighter-rouge">debugger</code> setzen und <code class="language-plaintext highlighter-rouge">req</code> untersuchen</li> <li>eigenen Pfad einbauen</li> </ul> </li> <li>und weil das alles schnell viel wird, haben Leute Frameworks entwickelt, die das abstrahieren, das populärste davon ist Express</li> </ul> </footer> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>