\documentclass[10pt,a4paper]{article} % Packages \usepackage{fancyhdr} % For header and footer \usepackage{multicol} % Allows multicols in tables \usepackage{tabularx} % Intelligent column widths \usepackage{tabulary} % Used in header and footer \usepackage{hhline} % Border under tables \usepackage{graphicx} % For images \usepackage{xcolor} % For hex colours %\usepackage[utf8x]{inputenc} % For unicode character support \usepackage[T1]{fontenc} % Without this we get weird character replacements \usepackage{colortbl} % For coloured tables \usepackage{setspace} % For line height \usepackage{lastpage} % Needed for total page number \usepackage{seqsplit} % Splits long words. %\usepackage{opensans} % Can't make this work so far. Shame. Would be lovely. \usepackage[normalem]{ulem} % For underlining links % Most of the following are not required for the majority % of cheat sheets but are needed for some symbol support. \usepackage{amsmath} % Symbols \usepackage{MnSymbol} % Symbols \usepackage{wasysym} % Symbols %\usepackage[english,german,french,spanish,italian]{babel} % Languages % Document Info \author{Huluvu424242 (FunThomas424242)} \pdfinfo{ /Title (mit-javascript-unter-node-js-entwickeln.pdf) /Creator (Cheatography) /Author (Huluvu424242 (FunThomas424242)) /Subject (Mit Javascript unter Node.js entwickeln Cheat Sheet) } % Lengths and widths \addtolength{\textwidth}{6cm} \addtolength{\textheight}{-1cm} \addtolength{\hoffset}{-3cm} \addtolength{\voffset}{-2cm} \setlength{\tabcolsep}{0.2cm} % Space between columns \setlength{\headsep}{-12pt} % Reduce space between header and content \setlength{\headheight}{85pt} % If less, LaTeX automatically increases it \renewcommand{\footrulewidth}{0pt} % Remove footer line \renewcommand{\headrulewidth}{0pt} % Remove header line \renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit % This two commands together give roughly % the right line height in the tables \renewcommand{\arraystretch}{1.3} \onehalfspacing % Commands \newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour \newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols \newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns \newcommand{\tn}{\tabularnewline} % Required as custom column type in use % Font and Colours \definecolor{HeadBackground}{HTML}{333333} \definecolor{FootBackground}{HTML}{666666} \definecolor{TextColor}{HTML}{333333} \definecolor{DarkBackground}{HTML}{A3A3A3} \definecolor{LightBackground}{HTML}{F3F3F3} \renewcommand{\familydefault}{\sfdefault} \color{TextColor} % Header and Footer \pagestyle{fancy} \fancyhead{} % Set header to blank \fancyfoot{} % Set footer to blank \fancyhead[L]{ \noindent \begin{multicols}{3} \begin{tabulary}{5.8cm}{C} \SetRowColor{DarkBackground} \vspace{-7pt} {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}} } \end{tabulary} \columnbreak \begin{tabulary}{11cm}{L} \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Mit Javascript unter Node.js entwickeln Cheat Sheet}}}} \\ \normalsize{by \textcolor{DarkBackground}{Huluvu424242 (FunThomas424242)} via \textcolor{DarkBackground}{\uline{cheatography.com/19991/cs/6137/}}} \end{tabulary} \end{multicols}} \fancyfoot[L]{ \footnotesize \noindent \begin{multicols}{3} \begin{tabulary}{5.8cm}{LL} \SetRowColor{FootBackground} \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}} \\ \vspace{-2pt}Huluvu424242 (FunThomas424242) \\ \uline{cheatography.com/funthomas424242} \\ \uline{\seqsplit{github}.com/Huluvu424242} \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}} \\ \vspace{-2pt}Published 10th March, 2019.\\ Updated 5th July, 2020.\\ Page {\thepage} of \pageref{LastPage}. \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}} \\ \SetRowColor{white} \vspace{-5pt} %\includegraphics[width=48px,height=48px]{dave.jpeg} Measure your website readability!\\ www.readability-score.com \end{tabulary} \end{multicols}} \begin{document} \raggedright \raggedcolumns % Set font size to small. Switch to any value % from this page to resize cheat sheet text: % www.emerson.emory.edu/services/latex/latex_169.html \footnotesize % Small font. \begin{multicols*}{2} \begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Grundlegender Aufbau des Javascript Universums}} \tn % Row 0 \SetRowColor{LightBackground} v8 & Javascript Compiler (z.B. in Node.js und Chrome genutzt) \tn % Row Count 3 (+ 3) % Row 1 \SetRowColor{white} nvm & Node Versions Manager (Verwaltung parallel installierter Node.js Versionen) \tn % Row Count 7 (+ 4) % Row 2 \SetRowColor{LightBackground} node.js & Umgebung für Javascript (Compilieren, Ausführen, Debuggen, Installation von Werkzeugen, ...), stellt zus{\"a}tzlich eine eigene \{\{popup="https://nodejs.org/api/"\}\}Standardbibliothek\{\{/popup\}\} bereit welche in anderen Umgebungen z.B. Browser nicht verfügbar ist. \tn % Row Count 19 (+ 12) % Row 3 \SetRowColor{white} npm & Node Package Manager (Verwaltung der zu installierenden Werkzeuge und Pakete) \tn % Row Count 23 (+ 4) % Row 4 \SetRowColor{LightBackground} Javascript & Hochsprache für Clients die im Browser laufen, standardisiert über \{\{popup="https://en.wikipedia.org/wiki/ECMAScript"\}\}ECMAScript\{\{/popup\}\} \tn % Row Count 30 (+ 7) \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Grundlegender Aufbau des Javascript Universums (cont)}} \tn % Row 5 \SetRowColor{LightBackground} Typescript & Javascript Spracherweiterung. Jedes Javascript stellt gültiges Typescript dar. Typescript wird compiliert nach \{\{popup="https://en.wikipedia.org/wiki/ECMAScript"\}\}ECMAScript\{\{/popup\}\} \tn % Row Count 9 (+ 9) % Row 6 \SetRowColor{white} Angular & Javascript Framework \tn % Row Count 10 (+ 1) % Row 7 \SetRowColor{LightBackground} Browser APIs & Konstrukte im Browser welche auf Javascript aufbauen \tn % Row Count 13 (+ 3) % Row 8 \SetRowColor{white} Third party APIs & APIs anderer Webseiten wie Facebook und Twitter \tn % Row Count 16 (+ 3) % Row 9 \SetRowColor{LightBackground} JavaScript libraries & Module von Drittanbietern z.B. jQuery oder React \tn % Row Count 19 (+ 3) % Row 10 \SetRowColor{white} \{\{nobreak\}\}JavaScript frameworks & Frameworks zum Schreiben von Apps z.B. Angular oder Ember im Unterschied zur Lib geht hier die Kontrolle vom Entwickler auf das Framework über. Das Framework ruft Entwicklerkode auf, nicht umgekehrt. \tn % Row Count 29 (+ 10) \hhline{>{\arrayrulecolor{DarkBackground}}--} \SetRowColor{LightBackground} \mymulticolumn{2}{x{8.4cm}}{Quellen: \newline * \seqsplit{https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side\_web\_APIs/Introduction}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{nvm Grundlagen}} \tn % Row 0 \SetRowColor{LightBackground} \seqsplit{https://github.com/coreybutler/nvm-windows} & Window Installation mittels Installer \tn % Row Count 3 (+ 3) % Row 1 \SetRowColor{white} curl -o- \seqsplit{https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh} | bash & Linux Installation mittels curl + bash \tn % Row Count 8 (+ 5) % Row 2 \SetRowColor{LightBackground} \{\{nobreak\}\}nvm install \textless{}nodeVersion\textgreater{} & Installiert die gewünschte Node Version z.B. nvm install 6 \tn % Row Count 11 (+ 3) % Row 3 \SetRowColor{white} nvm use \textless{}nodeVersion\textgreater{} & Aktiviert die angegebene Version und deaktiviert alle anderen \tn % Row Count 15 (+ 4) % Row 4 \SetRowColor{LightBackground} nvm ls & Zeigt alle aktuell installierten Node Versionen an \tn % Row Count 18 (+ 3) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Node.js Grundlagen}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Node.js ist eine Entwicklungs- und Laufzeitumgebung für Javascript \newline % Row Count 2 (+ 2) Es wird {\"a}hnlich wie das Java SDK mit einer Standardbibliothek ausgeliefert deren Module in der \{\{popup="https://nodejs.org/api/"\}\}Node API Dokumentation\{\{/popup\}\} beschrieben sind. Diese Bibliothek steht nur zur Entwicklungszeit oder bei der Ausführung auf dem Server (auf welchem Node.js l{\"a}uft) zur Verfügung. Zur Laufzeit im Browser steht diese Bibliothek nicht zur Verfügung. \newline % Row Count 10 (+ 8) Node.js nutzt zum Compilieren der Javascript Dateien den Compiler V8. Dieser compiliert direkt in Maschinenkode (also früher z.B. x86 oder MIPS). \newline % Row Count 13 (+ 3) Im Chrome Browser kommt der V8 Compiler ebenfalls zum Einsatz. \newline % Row Count 15 (+ 2) Node.js wird stets in 2 Releases bereitgestellt (April und Oktober Release). Ein Release tr{\"a}gt dabei im Namen den Zusatz LTS (Long time support). Dieses eignet sich für den produktiven Einsatz. Für dieses Release werden ab Ver{\"o}ffentlichung ca. 30 Monate Bugfixes und sonstige Unterstützung angeboten. Das andere Release wird nur 6 Monate supported. \newline % Row Count 23 (+ 8) Grunds{\"a}tzlich l{\"a}uft Entwicklerkode in Node.js nur Singlethreaded ab aber Node.js selbst ist Multithreaded. Dem Entwickler steht halt nur ein Thread zur Verfügung. Um auf etwas zu warten oder zu pausieren stehen Konstrukte wie: setTimeout und setIntervall zur Verfügung. Der Trick dabei ist, dass dies Konstrukte nicht blockieren. \newline % Row Count 30 (+ 7) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Node.js Grundlagen (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Grundlegende Befehle}} \newline % Row Count 1 (+ 1) `\# Node.js Version herausfinden` \newline % Row Count 2 (+ 1) `\textgreater{}node -v` \newline % Row Count 3 (+ 1) `\# Node.js im interaktiven Mode starten` \newline % Row Count 4 (+ 1) `\textgreater{}node` \newline % Row Count 5 (+ 1) `\# Node.js zur Ausführung einer Datei starten` \newline % Row Count 6 (+ 1) `\textgreater{}node app.js`% Row Count 7 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{p{0.8 cm} x{7.2 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{AngularJS Bindungsarten}} \tn % Row 0 \SetRowColor{LightBackground} ? & wird angeh{\"a}ngt um optionale Parameter zu definnieren z.B. '@?' \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} '=' & 2 Wege Binding (Properties im Scope) \tn % Row Count 3 (+ 1) % Row 2 \SetRowColor{LightBackground} @ & fixe Zeichenkette (String), Ausdrücke wie ( 'ID' | translate) funktionieren nicht \tn % Row Count 6 (+ 3) % Row 3 \SetRowColor{white} \& & callback Funktion \tn % Row Count 7 (+ 1) % Row 4 \SetRowColor{LightBackground} \textless{} & 1 Wegebindung in Komponenten \tn % Row Count 8 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Spezifische Angular Probleme}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Lokalisierung (l10n) und i18n}} \newline % Row Count 1 (+ 1) Die Lokalisierung von Angular Anwendungen entsprechend den Angular Vorgaben erfolgt durch separat zu bauende Anwendungen für jede Sprache eine (nebst neuer Compilierung und Bündelung). \newline % Row Count 5 (+ 4) Die Texte werden dabei ausgelagert in separaten Dateien gehalten. Die Zuordnung der Texte zur Verwendung im Programm erfolgt über IDs. Sollen im HTML bestimmte Attribute mit lokalisierten Texten beladen werden so sind nach einer vordefinierten Syntax die Schlüssel dort anzugeben. Weiterhin muss bekanntgegeben werden welches Attribut ein i18n Attribut ist. Dazu wird das Attribut wiederholt und der Prefix i18n- vorangestellt. Handelt es sich bei dem Attribut leider um einen Input Parameter (@Input) welcher durch {[}{]} ausgedrückt wird, so funktioniert diese Ersetzung nicht. Hier hilft nur das Aufl{\"o}sen der {[}{]} und die Verwendung der Canonischen Form. Dadurch funktioniert der i18n Mechanismus als w{\"a}re der Attributwert ein Text und au{\ss}erdem wird der Wert an die Komponente als Input Wert reingereicht. \newline % Row Count 22 (+ 17) Problem{\"o}sung siehe hier: \seqsplit{https://stackoverflow.com/questions/43202600/how-to-use-angular2-i18n-x-to-localize-properties-constant-value?answertab=votes\#tab-top}% Row Count 26 (+ 4) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Node Module - ausgew{\"a}hlte Übersicht}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Testframeworks \newline % Row Count 1 (+ 1) \textasciitilde{}, stellen oft einen Testrunner und eine Assertion Library zur Verfügung. \newline % Row Count 3 (+ 2) * Jasmine {\"a}ltestes Framework, aus der Browserumgebung kommend nun durch Node auch im Serverumfeld gelandet. Beinhaltet Testrunner und Assertions. \newline % Row Count 6 (+ 3) * Mocha das zweit {\"a}lteste Framework, von Node.js her kommend l{\"a}sst es sich inzwischen auch im Browser verwenden \seqsplit{(https://medium.com/dailyjs/running-mocha-tests-as-native-es6-modules-in-a-browser-882373f2ecb0).} \newline % Row Count 11 (+ 5) * Ava, ein recht junges Framework welches Wert auf konsequente asynchrone Testausführung legt. In Spezialf{\"a}llen (Singleton etc.) schwieriger handhabbar. \newline % Row Count 15 (+ 4) Assertion Frameworks \newline % Row Count 16 (+ 1) * Assert Modul: Wird direkt von Node.js bereitgestellt \newline % Row Count 18 (+ 2) * assertthat: Bietet ein Fluent API \newline % Row Count 19 (+ 1) * should.js Sch{\"o}ne Schreibweise aber in Spezialf{\"a}llen bei denen das actual undefined ist, ist der Einsatz schwierig. \newline % Row Count 22 (+ 3) * expect.js Schick% Row Count 23 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{4.88 cm} x{3.12 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Quellen im Netz}} \tn % Row 0 \SetRowColor{LightBackground} \seqsplit{https://www.thenativeweb.io/learning/techlounge-nodejs} & über 20 Videos zu Node.js \tn % Row Count 3 (+ 3) \hhline{>{\arrayrulecolor{DarkBackground}}--} \SetRowColor{LightBackground} \mymulticolumn{2}{x{8.4cm}}{Die C't Serie der Techlounge stellte die initiale Grundlage für dieses Cheat Sheet dar.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{4.48 cm} x{3.52 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Online IDEs}} \tn % Row 0 \SetRowColor{LightBackground} \{\{popup="https://npm.runkit.com"\}\}runkit\{\{/popup\}\} & Node.js Spielwiese \tn % Row Count 3 (+ 3) % Row 1 \SetRowColor{white} \{\{popup="https://www.gitpod.io/"\}\}Gitpod\{\{/popup\}\} & IDE für Github Projekte \tn % Row Count 6 (+ 3) % Row 2 \SetRowColor{LightBackground} \{\{popup="https://next.plnkr.co"\}\}Plunker\{\{/popup\}\} & IDE für Javascript \tn % Row Count 9 (+ 3) % Row 3 \SetRowColor{white} \{\{popup="https://stackblitz.com/"\}\}Stackblitz\{\{/popup\}\} & IDE für Javascript \tn % Row Count 12 (+ 3) % Row 4 \SetRowColor{LightBackground} \{\{popup="https://labs.play-with-docker.com/"\}\}Play with Docker\{\{/popup\}\} & Spielwiese für Docker Container \tn % Row Count 16 (+ 4) \hhline{>{\arrayrulecolor{DarkBackground}}--} \SetRowColor{LightBackground} \mymulticolumn{2}{x{8.4cm}}{Für eine aktuelle IDE Liste schauen Sie bitte unter: \seqsplit{https://www.cheatography.com/funthomas424242/cheat-sheets/plattform-bergreifend-arbeiten/}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{npm Grundlagen}} \tn % Row 0 \SetRowColor{LightBackground} npm out & zeigt outdated Abh{\"a}ngigkeiten (upgradeable) \tn % Row Count 3 (+ 3) % Row 1 \SetRowColor{white} npm list & Listet alle installierten Pakete auf \tn % Row Count 5 (+ 2) % Row 2 \SetRowColor{LightBackground} npm update & Aktualisierung der installierten Pakete \tn % Row Count 7 (+ 2) % Row 3 \SetRowColor{white} sudo npm install \textless{}paketname\textgreater{} -g & Globale Installation eines Paketes Systemweit so das es als Kommando ausgeführt werden kann \tn % Row Count 12 (+ 5) % Row 4 \SetRowColor{LightBackground} \{\{nobreak\}\}npm install \textless{}paketname\textgreater{} -{}-save-dev & Projektinterne Installation eines Paketes im Unterordner node\_modules \tn % Row Count 16 (+ 4) \hhline{>{\arrayrulecolor{DarkBackground}}--} \SetRowColor{LightBackground} \mymulticolumn{2}{x{8.4cm}}{npm ist der Node Paketmanager} \tn \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{package.json Grundlagen}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Versionierung}} \newline % Row Count 1 (+ 1) Details unter: \seqsplit{https://flaviocopes.com/package-json/\#package-versions} \newline % Row Count 3 (+ 2) {\bf{\textasciicircum{}}}: Die angegebene Version mit Minor{\"a}nderungen aber keine Major{\"a}nderungen \newline % Row Count 5 (+ 2) {\bf{\textasciitilde{}}}: Die angegebene Version mit Patches \newline % Row Count 6 (+ 1) {\bf{ * }}: Alle Versionen \newline % Row Count 7 (+ 1) {\bf{\textgreater{}}}: Alle Versionen gr{\"o}{\ss}er als die angegebene \newline % Row Count 8 (+ 1) {\bf{\textgreater{}=}}: Alle Versionen gr{\"o}{\ss}er oder gleich der angegebenen \newline % Row Count 10 (+ 2) {\bf{\textless{}=}}: Alle Versionen kleiner oder gleich der angegebenen \newline % Row Count 12 (+ 2) {\bf{X.Y.Z}}: Exakte Versionsangabe und nur diese Version wird benutzt \newline % Row Count 14 (+ 2) {\bf{latest}}: Stets die aktuellste Version ist zu laden. \newline % Row Count 16 (+ 2) {\bf{\textless{}}}: Alle Versionen kleiner der angegebenen% Row Count 17 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Node.js - Http Server starten}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{const http = require('http'); \newline \newline const server = http.createServer((req, res) =\textgreater{} \{ \newline res.writeHead(200, \{ \newline 'Content-Type': 'text/html', \newline \}); \newline res.write('Hallo Httpl'); \newline res.end(); \newline \}); \newline \newline server.listen(3000, () =\textgreater{} \{ \newline console.log('Server lauscht auf Port 3000'); \newline \});} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Node.js Grundlagen - Module}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Module}} \newline % Row Count 1 (+ 1) Die weltweite Registry für npm Module befindet sich unter: npmjs.com \newline % Row Count 3 (+ 2) Wer hier Module ablegen will ben{\"o}tigt ein Login und muss sich registrieren. \newline % Row Count 5 (+ 2) `\# Ein eigenes Node.js Modul auf npmjs.com ver{\"o}ffentlichen` \newline % Row Count 7 (+ 2) `\textgreater{}npm login` \newline % Row Count 8 (+ 1) `\textgreater{}npm publish` \newline % Row Count 9 (+ 1) `\# Ein eigenes Node.js Modul von npmjs.com zurückziehen` \newline % Row Count 11 (+ 2) `\# {\bf{ nur 24 h lang m{\"o}glich - danach geht es nur noch über den Support}} ` \newline % Row Count 13 (+ 2) `\# lessons learned aus dem` \{\{popup="https://www.theregister.co.uk/2016/03/23/npm\_left\_pad\_chaos/"\}\}left-pad\{\{/popup\}\} `disaster` \newline % Row Count 16 (+ 3) `\textgreater{}npm unpublish {[}\textless{}@scope\textgreater{}/{]}\textless{}pkg\textgreater{}{[}@\textless{}version\textgreater{}{]}` \newline % Row Count 17 (+ 1) `\# Das Grundgerüst für ein eigenes Node.js Modul interaktiv erstellen` \newline % Row Count 19 (+ 2) `\textgreater{}npm init` \newline % Row Count 20 (+ 1) * Modul- (oder Projekt) {\bf{Metadaten}} werden in der Datei `package.json` verwaltet (wie bei maven die pom.xml). \newline % Row Count 23 (+ 3) Hier wird der Name und die Version des Moduls angegeben, seine Abh{\"a}ngigkeiten, seine Abh{\"a}ngigkeiten zur Entwicklungszeit und es gibt einen Script Abschnitt in dem Aliase für die Ausführung von Befehlen hinterlegt werden k{\"o}nnen z.B. um bestimmte Build Schritte anzusto{\ss}en wie `npm run test` um die Unittests auszuführen. \newline % Row Count 30 (+ 7) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Node.js Grundlagen - Module (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{* Es existiert weiterhin ein Verzeichnis `node\_modules` in dem alle Abh{\"a}ngigkeiten des Modules abgelegt werden (auch die transitiven). \newline % Row Count 3 (+ 3) * {\bf{Ladereihenfolge:}} Ein zu ladendes Modul wird von Node.js wie folgt gesucht; 1, Integriertes Modul (Module der Node.js Standardlib) 2. installierte Module (durch npm install im node\_modules Verzeichnis abgelegt) 3. eigenes, entwickeltes Modul. - Diese Reihenfolge soll sicherstellen, dass kein Schadkode als transitive Abh{\"a}ngigkeit eingeschleu{\ss}t werden kann. \newline % Row Count 11 (+ 8) * {\bf{Versionierung}} Node.js Module verwenden eine \{\{popup="https://semver.org/"\}\}semantische Versionierung.\{\{/popup\}\}% Row Count 14 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Fragen - offene Punkte - FAQ}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{\# Hier l{\"a}dt node.js das http Modul und gibt eine Referenz darauf zurück \newline % Row Count 2 (+ 2) http = require('http'); \newline % Row Count 3 (+ 1) {\bf{Frage:}} Ist require nur in node.js definiert oder auch in Javascript also auch im Browser und ist es zust{\"a}tzlich auch in angular oder typescript nutzbar? \newline % Row Count 7 (+ 4) {\bf{Antwort:}} require() is not part of the standard JavaScript API. But in Node.js, it's a built-in function with a special purpose: to load modules. (Quelle: \seqsplit{https://stackoverflow.com/questions/9901082/what-is-this-javascript-require)}% Row Count 12 (+ 5) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Fallstricke beim Testen}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Falsche Kombination Runner - Assert \newline % Row Count 1 (+ 1) Die Testrunner sorgen dafür, dass die Tests aus den Testdateien gefunden und ausgeführt werden. Die Assertion Frameworks prüfen Testergebnisse und werfen bei nicht zutreffenden Bedingungen eine Exception. Diese Exception muss der Testrunner erwarten, sonst bleibt der Test grün. Es ist also wichtig, dass das genutzte Assertion Framework eine zum Testrunner passende Exception wirft. Das ist in der Regel so, in Sonderf{\"a}llen muss man aber nachlesen. \newline % Row Count 11 (+ 10) Asynchrone Tests \newline % Row Count 12 (+ 1) Als Asynchrone Tests bezeichnen wir hier Tests welche mindestens eine Zeile enthalten in der eine Promise entsteht, das Kommando also sofort zurückkehrt, das Ergebnis aber noch nicht vorliegt sondern nur die Promise als Versicherung, dass es mal irgendwann ein Ergebnis geben wird. \newline % Row Count 18 (+ 6) Solche Tests werden in der Regel mit async gekennzeichnet und es wird in aller Regel auch ein callback (done) hineingegeben, welches man selbst nach dem letzten Assert aufrufen muss. Ruft man das callback nicht auf zum Beispiel weil man den Test gar nicht als async gekennzeichnet hat, betrachtet der Testrunner den Testfall nach dem letzten Assert als beendet auch wenn noch einige Promises gar nicht aufgel{\"o}st wurden. Er kennzeichnet den Test grün und wenn dann sp{\"a}ter noch eine Promise resolved wird - {\"a}ndert dies das Testergebnis nicht mehr. \newline % Row Count 30 (+ 12) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Fallstricke beim Testen (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Daher ist es sinnvoll pauschal alle Tests in der async Variante zu implementieren und idealerweise eine solche Abarbeitung zu erzwingen. Bei Mocha geht dies mit der Option -{}-async-only% Row Count 4 (+ 4) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} % That's all folks \end{multicols*} \end{document}