My Awesome Talk Title

CM5 - TOOLING

ou comment bien setup un VRAI projet web !

Pourquoi on est là ?

🧰 Vous montrer l'outillage d'un projet web

🏅Les bonnes pratiques

👨🏼‍🦳Vous faire un retour d'expérience

❓Répondre à TOUTES vos questions

Qui on est ?

Mickaël Alves

Etienne Idoux

Qui on est ?

Mickaël Alves

Etienne Idoux

Qui on est ?

Mickaël Alves

Etienne Idoux

Qui on est ?

Mickaël Alves

Etienne Idoux

(Anciennement)

(Actuellement)

Vous devez de toute urgence nous aider à mettre notre application en production ! Le code est déjà fait, mais j'ai peur qu'il ne soit pas très propre !

Allons faire un petit tour sur le projet...

Demo 👨🏼‍💻

👏🏼 Utilisation de Git !

Les bases de Git !

Premier problème...

Mauvaise utilisation de Git !

Des noms commits inadaptés
Des fichiers qui ne devraient pas être là ❗
Aucune merge request / pull request

Mauvaise utilisation de Git !

Des noms commits inadaptés
Des fichiers qui ne devraient pas être là ❗
Aucune merge request / pull request

Besoin d'un petit nettoyage 🧹

Conventional Commits !

Conventional Commits

Semantic Commit Messages !

Semantic Commit Messages

Demo 👨🏼‍💻

Pourquoi utiliser GitLab / Github ... !

...

Pourquoi utiliser GitLab / Github ... !

Interface de visualisation de projets Git
Utilisation des merge requests / pull requests
Gestion de projets avec les issues et boards
Continuous Integration / Delivery (CI/CD)

Exécution automatique de tests, du packaging, du déploiement, etc.

Déploiement sur GitLab / Github Pages
Espace de documentation (Wiki...)

Comment améliorer notre code ?

Environnement de travail !

Integrated Development Environment (IDE) !

📦 Node Package Manager (NPM)...

Gestionnaire de packages

📦 Node Package Manager (NPM)...

Gestionnaire de packages
Installation de dépendances

📦 Node Package Manager (NPM)...

Gestionnaire de packages
Installation de dépendances
Scripts personnalisés

📦 Node Package Manager (NPM)...

Gestionnaire de packages
Installation de dépendances
Scripts personnalisés

https://www.npmjs.com/

Alternative à npm...

https://yarnpkg.com/https://pnpm.io/fr/

Demo 👨🏼‍💻

👮 Linters...

Détection des erreurs de syntaxe dans le code

👮 Linters...

Détection des erreurs de syntaxe dans le code
Des règles pour le projet entier

👮 Linters...

Détection des erreurs de syntaxe dans le code
Des règles pour le projet entier
Améliorer la qualité du code

👮 Linters...

Détection des erreurs de syntaxe dans le code
Des règles pour le projet entier
Améliorer la qualité du code

https://eslint.org/
https://stylelint.io/

Demo 👨🏼‍💻

🧹 Formatters...

Réorganiser le code pour le rendre plus lisible et plus consistant

🧹 Formatters...

Réorganiser le code pour le rendre plus lisible et plus consistant
Gagner du temps sur le formattage

🧹 Formatters...

Réorganiser le code pour le rendre plus lisible et plus consistant
Gagner du temps sur le formattage
Produire du code uniforme et cohérent

🧹 Formatters...

Réorganiser le code pour le rendre plus lisible et plus consistant
Gagner du temps sur le formattage
Produire du code uniforme et cohérent

https://prettier.io/
https://biomejs.dev/

Demo 👨🏼‍💻

Autres outils et astuces...

Typescript...

ℹ️ Langage de programmation qui a pour but d'améliorer et de sécuriser la production de code JavaScript.

https://www.typescriptlang.org/

Typescript

const Name: string = "Toto" // ✅
const Age: number = 12 // ✅

const Surname: string = false // ❌
const YearOfBirth: number = "1998" // ❌

JsDoc...

ℹ️ Langage de balisage utilisé pour documenter du code source JavaScript.

https://jsdoc.app/

JsDoc...

Javascript

/**
 * Function to add a book to the list.
 *
 * @constructor
 *
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function addBook(title, author) {
	blablabla...
}

JsDoc...

bash

# Commande de génération de la documentation 📖

jsdoc book.js

Les extensions d'IDE...

Les extensions d'IDE .

Live Server

Serveur web minimaliste avec un système de HMR

https://ritwickdey.github.io/vscode-live-server/

Les extensions d'IDE .

https://ecmel.gallerycdn.vsassets.io/extensions/ecmel/vscode-html-css/2.0.9/1706810901404/Microsoft.VisualStudio.Services.Icons.Default

HTML CSS Support

Extension VSCode qui permet la complétion des attributs dans le code

https://github.com/ecmel/vscode-html-css

Les extensions d'IDE .

IntelliSense

Fonction d'édition de code, utilisée pour la complétion de code, les informations sur les paramètres... Vous pouvez trouver les extensions pour vos langages préférés !

https://code.visualstudio.com/docs/editor/intellisense

Et l'IA dans tout ça ?

⚠️ A utiliser à bon escient...