Introduction à node.js

--- title: Introduction à node.js author: Nicolas Borboën <nicolas.borboen@epfl.ch> tags: Talk description: Une petite introduction à node.js slideOptions: transition: slide theme: simple spotlight: enabled: false progress: true --- # node.js ![logo](https://i.imgur.com/oKZmRrc.png) <br> <br> <div class="footer2"><small>2020-02-17 / EPFL-SI / <a href="nicolas.borboen@epfl.ch">nicolas.borboen@epfl.ch</a></small></div>   ---- ## wikipedia > Node.js est une plateforme logicielle libre en JavaScript, orientée vers les applications réseau événementielles hautement concurrentes qui doivent pouvoir monter en charge. > Elle utilise la machine virtuelle V8, la librairie libuv pour sa boucle d'évènements, et implémente sous licence MIT les spécifications CommonJS. <cite>https://fr.wikipedia.org/wiki/Node.js</cite>   ---- ## nodejs > Node.js® est un environnement d’exécution JavaScript construit sur le [moteur JavaScript V8 de Chrome](https://v8.dev/). <cite>https://nodejs.org/fr/</cite>   ---- ## V8 > V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others. It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, macOS 10.12+, and Linux systems that use x64, IA-32, ARM, or MIPS processors. V8 can run standalone, or can be embedded into any C++ application. <cite>https://v8.dev/</cite>   ---- ## ECMAScript > ECMAScript est un ensemble de normes concernant les langages de programmation de type script et standardisées par Ecma International dans le cadre de la spécification ECMA-262. Il s'agit donc d'un standard, dont les spécifications sont mises en œuvre dans différents langages de script, comme JavaScript ou ActionScript. C'est un langage de programmation orienté prototype. <cite>https://fr.wikipedia.org/wiki/ECMAScript</cite>   ---- ## javascript > JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives et à ce titre est une partie essentielle des applications web. Avec les technologies HTML et CSS, JavaScript est parfois considéré comme l'une des technologies cœur du World Wide Web. <cite>https://fr.wikipedia.org/wiki/JavaScript</cite>   ---- ## node vs javascript > JavaScript est un langage. node.js n'est pas un langage mais un "environnement/ensemble de logiciels" qui exécute du JavaScript normal. > Tous les navigateurs ont des moteurs JavaScript qui exécutent le JavaScript des pages web (Spidermonkey pour Firefox, V8 pour Chrome). <cite>https://stackoverflow.com/questions/38424672/newbie-javascript-vs-node-js</cite>   ---- ## node vs javascript > Node.js est simplement le moteur V8 fourni avec certaines bibliothèques pour faire les I/O et du réseau, de sorte de pouvoir utiliser **JavaScript en dehors du navigateur** (par exemple pour créer des services de backend). <cite>https://stackoverflow.com/questions/38424672/newbie-javascript-vs-node-js</cite>   --- # historique   ---- ##   ---- {%youtube Sh6lK57Cuk4 %}  --- # fonctionnement https://fr.wikipedia.org/wiki/Moteur_JavaScript https://fr.wikipedia.org/wiki/Compilation_%C3%A0_la_vol%C3%A9e https://fr.wikipedia.org/wiki/Bytecode <cite>http://blog.js-republic.com/v8-engine-comment-ca-marche/</cite>   ---- # typescript > TypeScript est un langage de programmation libre et open source développé par Microsoft qui a pour but d'améliorer et de sécuriser la production de code JavaScript. Il s'agit d'un sur-ensemble syntaxique strict de JavaScript (c'est-à-dire que tout code JavaScript correct peut être utilisé avec TypeScript). Le code TypeScript est transcompilé en JavaScript, et peut ainsi être interprété par n'importe quel navigateur web ou moteur JavaScript. <cite>https://fr.wikipedia.org/wiki/TypeScript</cite>   ---- # Hello World   ---- ## javascript ```js <!DOCTYPE HTML> <html> <body> <p>Before the script...</p> <script> alert( 'Hello, world!' ); </script> <p>...After the script.</p> </body> </html> ``` <br>   ---- ## nodejs ```js console.log('Hello World') ``` <br>   ---- ## typescript ```js let message: string = 'Hello, World!'; console.log(message); ``` <br>   --- # commencer Pour commencer un projet en node.js, on utilise `npm` ou `yarn`.   ---- ## npm > npm est le gestionnaire de paquets officiel de Node.js. [...] En avril 2020, GitHub annonce l'acquisition de npm. <cite>https://fr.wikipedia.org/wiki/npm</cite> <center><a href="https://www.npmjs.com/">https://www.npmjs.com</a></center>   ---- ## yarn > Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don't ever have to worry. <cite>https://yarnpkg.com/getting-started</cite> <center><a href="https://yarnpkg.com/">https://yarnpkg.com/</a></center>   ---- ## npm vs yarn Yarn s'appuie sur la même infrastructure que npm mais est plus rapide car il utilise du cache et parallélise ses tâches. * https://www.blogduwebdesign.com/yarn-gestionnaire-de-paquets-pour-nodejs/ * https://medium.com/javascript-in-plain-english/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f   ---- ## bower On peut encore mentionner `bower` qui est aussi un package manager pour les projets node.js. <center><a href="https://bower.io/">https://bower.io/</a></center>   ---- ## init * `npm init` * `yarn init`   ---- ## package.json > npm suit les modules installés dans un projet avec le fichier package.json, qui réside dans le répertoire d'un projet et contient : > > * Tous les modules nécessaires à un projet et leurs versions installées > * Toutes les métadonnées d'un projet, telles que l'auteur, la licence, etc. > * Les scripts pouvant être exécutés pour automatiser des tâches dans le cadre du projet <cite>https://www.digitalocean.com/community/tutorials/how-to-use-node-js-modules-with-npm-and-package-json-fr</cite> <center><a href="https://docs.npmjs.com/cli/v7/configuring-npm/package-json">https://docs.npmjs.com/cli/v7/configuring-npm/package-json</a></center>   ---- ## package-lock.json > * npm install n’est pas déterministe, et génère un package-lock.json > * package-lock.json permet d’avoir un node_modules déterministe avec la commande npm ci > * Rouler un npm ci sur un package-lock.json va TOUJOURS générer le MÊME node_modules <cite>https://nexusinno.com/quest-ce-quun-package-lock-json-et-quest-ce-que-ca-mange-en-hiver/</cite>   --- # asynchrone > Asynchrone fait référence à un environnement de communication où chaque partie reçoit et traite les messages lorsque c'est possible ou plus pratique, au lieu de le faire au même moment. > Il peut être utilisé pour décrire un environnement de communication humain comme le courriel : l'expéditeur envoie un courriel et le destinataire se contente d'y répondre quand cela lui convient ; il n'a pas à répondre immédiatement. <cite>https://developer.mozilla.org/fr/docs/Glossaire/Asynchronous</cite>    ---- ![](https://i.imgur.com/KiNoSgf.png) ---- # promesses ```js function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 2000); }); } async function asyncCall() { console.log('calling'); const result = await resolveAfter2Seconds(); console.log(result); // expected output: "resolved" } asyncCall(); ``` <cite>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function</cite>   --- # frameworks * pour faire du web "simple", [Express](https://expressjs.com/) * pour le frontend [Vue](https://vuejs.org/), [React](https://reactjs.org/), [Angular](https://angularjs.org/) ou [Svelt](https://svelte.dev/) * pour le backend [Nest](https://nestjs.com/) ou [Meteor](https://www.meteor.com/)   --- # apprendre 1. https://developer.mozilla.org/fr/docs/Apprendre/JavaScript 2. https://eloquentjavascript.net/ 3. https://nodeschool.io/   ---- # tutos * https://grafikart.fr/tutoriels/nodejs * https://nodejs.developpez.com/cours/ * https://practicalprogramming.fr/nodejs/ * https://openclassrooms.com/en/courses/6390246-passez-au-full-stack-avec-node-js-express-et-mongodb * https://www.udemy.com/fr/topic/nodejs/free/   ---- # webographie * https://javascript.info/ * https://nodejs.dev/learn * https://makina-corpus.com/blog/metier/2014/introduction-a-nodejs * https://www.toptal.com/nodejs/why-the-hell-would-i-use-node-js   --- # info ![><](https://i.imgur.com/3Ph9LPI.png) Présentation faite sur hackmd : <br>https://hackmd.io/@ponsfrilus/nodejs  <style> .reveal { background-color: #e6e6e6; background-image: url('https://epfl-idevelop.github.io/elements/svg/epfl-logo.svg'); background-repeat: no-repeat; background-position: 5px 5px; } .reveal { color: #111; } .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { color: #212121; } .reveal a { color: #f009; } .reveal a:hover { color: #f00; } .reveal .more { color: #339; } .reveal code { padding-top: 0.2em; padding-bottom: 0.2em; margin: 0; font-size: 85%; background-color: rgba(255, 255, 255, 0.46); border-radius: 3px; } [data-contrast="on"] > div { background-color: #ffffff50; } [data-contrast="on+"] > div { background-color: #ffffff99; } /* https://stackoverflow.com/a/39614958/960623 */ img[alt$=">"] { float: right; } img[alt$="<"] { float: left; } img[alt$="><"] { display: block; max-width: 100%; height: auto; margin: auto; float: none!important; } .reveal section img[alt$="logo"] { border: 0 } .reveal h1 { font-size: 2em; } .reveal h2 { font-size: 1.6em; } .reveal h3 { font-size: 1.4em; } .reveal h4 { font-size: 1.2em; } .reveal h5 { font-size: 1.1em; } .border { border: 1px solid #555; } .reveal blockquote { width: 100% } .reveal blockquote:before { display: block; padding-left: 10px; content: "\201C"; font-size: 80px; position: absolute; left: -20px; top: -20px; color: #7a7a7a; } .reveal cite:before { content: "\2009 \2015 \2009"; } .reveal cite { font-size: 80%; } .reveal code { color: #fff; background-color: #101010; border-radius: 3px; font-family: courier, monospace; padding: 0 3px; font-size: 0.8em; } .reveal .footer1 { position: absolute; bottom: 1em; left: 1em; font-size: 0.5em; } .footer2 {} position: absolute; bottom: 0%; left: 0%; } </style>

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.