CM5 - TOOLING
ou comment bien setup un VRAI projet web !
Pourquoi on est là ?
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 ?
Qui on est ?
![](/CM5-Tooling/_astro/micka.3e617ce7.jpeg)
Mickaël Alves
![](/CM5-Tooling/_astro/pops.03cb03aa.jpg)
Etienne Idoux
Qui on est ?
![](/CM5-Tooling/_astro/micka.3e617ce7.jpeg)
Mickaël Alves
![](/CM5-Tooling/_astro/pops.03cb03aa.jpg)
Etienne Idoux
![](https://applimobile.univ-lyon1.fr/assets/photos/logo_lyon1.png)
Qui on est ?
![](/CM5-Tooling/_astro/micka.3e617ce7.jpeg)
Mickaël Alves
![](/CM5-Tooling/_astro/pops.03cb03aa.jpg)
Etienne Idoux
![](https://applimobile.univ-lyon1.fr/assets/photos/logo_lyon1.png)
![](https://training.zenika.com/_nuxt/img/zenika_logo_horizontal_black.a41f832.png)
Qui on est ?
![](/CM5-Tooling/_astro/micka.3e617ce7.jpeg)
Mickaël Alves
![](/CM5-Tooling/_astro/pops.03cb03aa.jpg)
Etienne Idoux
(Anciennement)
(Actuellement)
![](https://d1.awsstatic.com/Bedrock-logo.a922b69c6e52e50d8a03b907bf33332903e0a653.png)
![](https://cdn-icons-png.flaticon.com/512/4338/4338295.png)
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 !
![](https://cdn-icons-png.flaticon.com/512/4338/4338295.png)
Allons faire un petit tour sur le projet...
Demo 👨🏼💻
![](https://media.giphy.com/media/elrFAUtV7ZOH7TSPhF/giphy.gif?cid=ecf05e474nhkl1romi7yzu11bj0ojnoxio6y7l7tke6phf98&ep=v1_gifs_search&rid=giphy.gif&ct=g)
👏🏼 Utilisation de Git !
Les bases de Git !
![](/CM5-Tooling/_astro/git_schema.379e961b.jpeg)
Premier problème...
Premier problème...
Mauvaise utilisation de Git !
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 !
![](https://miro.medium.com/v2/resize:fit:1400/1*6NqkGS0Jwv5Pwhv_LOC3yQ.png)
Semantic Commit Messages !
Demo 👨🏼💻
![](https://media.giphy.com/media/elrFAUtV7ZOH7TSPhF/giphy.gif?cid=ecf05e474nhkl1romi7yzu11bj0ojnoxio6y7l7tke6phf98&ep=v1_gifs_search&rid=giphy.gif&ct=g)
Pourquoi utiliser GitLab / Github ... !
![Gitlab logo](https://penseeartificielle.fr/wp-content/uploads/2017/09/github-logo.png)
![Github logo](https://images.ctfassets.net/xz1dnu24egyd/1hnQd13UBU7n5V0RsJcbP3/769692e40a6d528e334b84f079c1f577/gitlab-logo-100.png)
...
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) !
Integrated Development Environment (IDE) !
![](https://st.quantrimang.com/photos/image/2021/10/21/code-phien-ban-nhe1.jpg)
Integrated Development Environment (IDE) !
![](https://upload.wikimedia.org/wikipedia/commons/7/71/WebStorm_Icon.png)
![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/IntelliJ_IDEA_Icon.svg/1200px-IntelliJ_IDEA_Icon.svg.png)
![](https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/PhpStorm_Icon.svg/1200px-PhpStorm_Icon.svg.png)
![](https://blog.jetbrains.com/wp-content/uploads/2022/05/new_ui-2x-12.png)
📦 Node Package Manager (NPM)...
📦 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
Alternative à npm...
![](https://whatthelogo.com/storage/logos/yarn-272918.png)
Demo 👨🏼💻
![](https://media.giphy.com/media/elrFAUtV7ZOH7TSPhF/giphy.gif?cid=ecf05e474nhkl1romi7yzu11bj0ojnoxio6y7l7tke6phf98&ep=v1_gifs_search&rid=giphy.gif&ct=g)
👮 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://stylelint.io/
Demo 👨🏼💻
![](https://media.giphy.com/media/elrFAUtV7ZOH7TSPhF/giphy.gif?cid=ecf05e474nhkl1romi7yzu11bj0ojnoxio6y7l7tke6phf98&ep=v1_gifs_search&rid=giphy.gif&ct=g)
🧹 Formatters...
🧹 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://biomejs.dev/
Demo 👨🏼💻
![](https://media.giphy.com/media/elrFAUtV7ZOH7TSPhF/giphy.gif?cid=ecf05e474nhkl1romi7yzu11bj0ojnoxio6y7l7tke6phf98&ep=v1_gifs_search&rid=giphy.gif&ct=g)
Autres outils et astuces...
Typescript...
Typescript...
![](https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/2048px-Typescript_logo_2020.svg.png)
ℹ️ Langage de programmation qui a pour but d'améliorer et de sécuriser la production de code JavaScript.
https://www.typescriptlang.org/const Name: string = "Toto" // ✅
const Age: number = 12 // ✅
const Surname: string = false // ❌
const YearOfBirth: number = "1998" // ❌
JsDoc...
JsDoc...
![](https://miro.medium.com/v2/resize:fit:1131/1*HWCZD0bVvxm4EgCgLajc5g.png)
ℹ️ 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...
![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/2048px-Visual_Studio_Code_1.35_icon.svg.png)
![](https://upload.wikimedia.org/wikipedia/commons/7/71/WebStorm_Icon.png)
![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/IntelliJ_IDEA_Icon.svg/1200px-IntelliJ_IDEA_Icon.svg.png)
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 .
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 .
![https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/2048px-Visual_Studio_Code_1.35_icon.svg.png](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/2048px-Visual_Studio_Code_1.35_icon.svg.png)
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...
⚠️ A utiliser à bon escient...
- Gain de productivité...
⚠️ A utiliser à bon escient...
- Gain de productivité...
- Mais il faut savoir évaluer les réponses !
⚠️ A utiliser à bon escient...
- Gain de productivité...
- Mais il faut savoir évaluer les réponses !
- Une IA ne remplacera jamais une bonne doc 📚
ChatGPT...
ChatGPT...
![](https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/ChatGPT_logo.svg/1024px-ChatGPT_logo.svg.png)
ℹ️ Le pionnier des LLM, pratique et gratuit mais se trompe souvent sur des problèmes un peu complexe.
https://chat.openai.com/Github Copilot...
Github Copilot...
![](https://static-00.iconduck.com/assets.00/brand-github-copilot-icon-2048x1775-2h15dc8k.png)
ℹ️ Une extension à vos IDE entraînés sur les données de github. Très pratique pour de l'auto-complétion.
https://github.com/features/copilotParlons CI/CD !
Continuous Integration (CI)...
Continuous Integration (CI)...
- Détecter rapidement les erreurs
Continuous Integration (CI)...
- Détecter rapidement les erreurs
- Automatiser les bonnes pratiques
Continuous Integration (CI)...
- Détecter rapidement les erreurs
- Automatiser les bonnes pratiques
- Fusionner régulièrement le code pour s'assurer de sa qualité !
Continuous Integration (CI)...
- Détecter rapidement les erreurs
- Automatiser les bonnes pratiques
- Fusionner régulièrement le code pour s'assurer de sa qualité !
Lint Staged
Gitlab CI/CD
Demo 👨🏼💻
![](https://media.giphy.com/media/elrFAUtV7ZOH7TSPhF/giphy.gif?cid=ecf05e474nhkl1romi7yzu11bj0ojnoxio6y7l7tke6phf98&ep=v1_gifs_search&rid=giphy.gif&ct=g)
Continuous Delivery (CD)...
Continuous Delivery (CD)...
- Automatiser le deploiement de l'application
Continuous Delivery (CD)...
- Automatiser le deploiement de l'application
- Livrer rapidement et avec sérénité 🧘
Continuous Delivery (CD)...
- Automatiser le deploiement de l'application
- Livrer rapidement et avec sérénité 🧘
- Mettre en place des tests automatisés
Continuous Delivery (CD)...
- Automatiser le deploiement de l'application
- Livrer rapidement et avec sérénité 🧘
- Mettre en place des tests automatisés
Notre app est super belle ! Et maintenant ?
Les bundlers !
Les bundlers !
- Beaucoup de fichiers (html, css, js, images, ...)
Les bundlers !
- Beaucoup de fichiers (html, css, js, images, ...)
- Il faut réduire le poids de nos applications !
Les bundlers !
- Beaucoup de fichiers (html, css, js, images, ...)
- Il faut réduire le poids de nos applications !
- On compresse tout grâce aux bundlers 💪
Les bundlers !
- Beaucoup de fichiers (html, css, js, images, ...)
- Il faut réduire le poids de nos applications !
- On compresse tout grâce aux bundlers 💪
![](https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png)
Les bundlers !
- Beaucoup de fichiers (html, css, js, images, ...)
- Il faut réduire le poids de nos applications !
- On compresse tout grâce aux bundlers 💪
![](https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png)
Les bundlers !
- Beaucoup de fichiers (html, css, js, images, ...)
- Il faut réduire le poids de nos applications !
- On compresse tout grâce aux bundlers 💪
![](https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png)
Les bundlers !
![](https://miro.medium.com/v2/resize:fit:4800/format:webp/1*dbLSMmG_9YNaVRyn30YKBQ.png)
Comment mettre le code sur internet ?
Comment mettre le code sur internet ?
![](https://www.aitoolsclub.com/content/images/2023/05/Screenshot-2023-05-21-221857.png)
ℹ️ Permet d'héberger votre app en quelques clics. Propose aussi des métriques.
https://vercel.comComment mettre le code sur internet ?
![](https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Nginx_logo.svg/1280px-Nginx_logo.svg.png)
ℹ️ Gérer votre propre serveur et les sites que vous mettez en ligne.
https://www.nginx.com/Comment mettre le code sur internet ?
- OVH - https://www.ovhcloud.com
- Clevercloud - https://www.clever-cloud.com
- Netlify - https://www.netlify.com/
- Heroku - https://www.heroku.com/
- Github - https://pages.github.com/
Gestion des versions - Semantic Versioning
Comment surveiller tout ça ?
Grafana...
Grafana...
![](https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Grafana_logo.svg/1200px-Grafana_logo.svg.png)
ℹ️ Permet de surveiller et analyser les données de votre application avec des graphes.
https://grafana.com/Grafana...
![](https://grafana.com/media/products/cloud/grafana/grafana-dashboard-english.png)
New Relic...
New Relic...
![](https://companieslogo.com/img/orig/NEWR-de5fcb2e.png?t=1681801483)
ℹ️ Observe vos applications et vos machines et propose beaucoup de fonctionnalités.
https://newrelic.comNew Relic...
![](https://newrelic.com/sites/default/files/styles/1200w/public/2023-01/newrelic_serverless_v2.png?itok=cJB-Es9Q)
Tests de performance...
Tests de performance...
![](https://upload.wikimedia.org/wikipedia/en/thumb/7/7e/Datadog_logo.svg/1200px-Datadog_logo.svg.png)
ℹ️ Fournir des insights pour optimiser les perfs et garantir une expérience utilisateur optimale
https://www.datadoghq.com/Tests de performance...
![](https://upload.wikimedia.org/wikipedia/commons/2/22/Apache_JMeter.png)
ℹ️ Evaluer les performances des applications web en simulant un grand nombre d'utilisateurs concurrents.
https://jmeter.apache.org/Restons informé !
Restons informé !
![](/CM5-Tooling/_astro/alerting_mail.8d743a1b.png)
📬 Par mail
Restons informé !
![](/CM5-Tooling/_astro/alerting_slack.8c0becc5.png)
💬 Par slack
En conclusion
En conclusion
Pourquoi on fait tout ça ?
Linter, Format, Nommage, pourquoi ?
- Améliorer la qualité du code
- Améliorer la consistance et lisibilité du code
- Plus simple à relire
- Plus simple à maintenir
- Automatiser pour gagner en efficacité
Linter, Format, Nommage, pourquoi ?
- Améliorer la qualité du code
- Améliorer la consistance et lisibilité du code
- Plus simple à relire
- Plus simple à maintenir
- Automatiser pour gagner en efficacité
❗On choisit puis on s'y tient ❗
CI/CD, Alerting, Monitoring, pourquoi ?
- Automatiser pour gagner en efficacité
- Permettre la détection précoce des erreurs
- Livrer en continu et de manière itérative
- Surveillance et dépannage des applications
CI/CD, Alerting, Monitoring, pourquoi ?
- Automatiser pour gagner en efficacité
- Permettre la détection précoce des erreurs
- Livrer en continu et de manière itérative
- Surveillance et dépannage des applications
💸 Une petite erreur peut coûter cher...
Merci !
![](/CM5-Tooling/_astro/micka.3e617ce7.jpeg)
Mickaël Alves
![](/CM5-Tooling/_astro/pops.03cb03aa.jpg)
Etienne Idoux
![](/CM5-Tooling/_astro/mick_linkedin.3535abd5.png)
![](/CM5-Tooling/_astro/pops_linkedin.f747081b.png)