Tooling
javascript
Définition
tooling = les outils qui rendent le développement
JS plus facile, rapide et de meilleure qualité.
"Ensemble des outils utilisés par les
développeurs
"Améliorer le flux de travail"
Couvre bien les aspects création, test,
optimisation
avantages
"Gagner du temps grâce à l'automatisation"
"Améliore la qualité et la lisibilité"
"Facilite la collaboration"
"Prépare le code pour la mise en ligne"
Gestion des paquets
→
npm installe et gère les bibliothèques
👉 Exemple : npm install
→
yarn alternative plus rapide à npm
👉 Exemple : yarn add lodash
Vérification et formatage du code
ESLint → détecte les erreurs et
mauvaises pratiques
Exemple : npx eslint [Link]
Prettier → formate automatiquement le
code
Exemple : npx prettier --write [Link]
Transpilation et bundling
Babel → transforme le code moderne (ES6+) en code
compatible tous navigateurs
Exemple : npx babel [Link] --out-file [Link]
Webpack → regroupe tous les fichiers du projet (JS, CSS,
images…)
Exemple : npx webpack
Vite→ alternative rapide pour React, Vue, etc.
Exemple : npx vite
Parcel → bundler simple sans configuration
Exemple : npx parcel [Link]
Résumé
VS Code → où tu écris ton code
Terminal → où tu exécutes les commandes
npm / yarn → pour installer les outils
ESLint → pour détecter les erreurs
Prettier → pour formater ton code
Babel → pour rendre ton code compatible avec tous les
navigateurs
Résultat final → un code propre, lisible et prêt à exécuter
Module
javascript
Module
JS module: est simplement un fiche Java Script séparé qui contient
du contient du code réutilisable
Module
JS module: est simplement un fiche Java Script séparé qui contient
du contient du code réutilisable
[Link]
[Link] [Link]
[Link] [Link]
[Link]
Module
Pourquoi ?
Module
Pourquoi ?
Pour organiser ton code / Réntiliser le code /éviter les
conflis de variables /failement pour maitenance a les
projet .
Module
export → make avariable . import → use what’s avaible .
Export = export function add ( x;y ){ }
Import = Import { add} from ‘ ./[Link]’
Module
export → make avariable . import → use what’s avaible .
Export = export function add ( x;y ){ }
Import = Import { add} from ‘ ./[Link]’
Pour HTML nous utilisons “Type ” in module (modifier):
<script “type “module scr=”[Link]” defer></script>
Testing
javascript
Performance
javascript
Définition
La performance en JavaScript désigne la vitesse et l’efficacité avec
lesquelles le code JavaScript s’exécute dans une page web.
Définition
chargement interactivité utilisation
les causes :
Trop de javascript
Trop de media
Trop animation
Apple aux resaux lents ou multiple
fuites mémoire
Manipulation du DOM très fréquente
Manipulation du DOM très fréquente
La performance dans le code
JavaScript
[Link]()
C'est comme un chronomètre ultra-précis. Quand vous
appelez cette fonction, elle vous donne un nombre qui
représente le temps en millisecondes depuis que la page
a commencé à charger.
[Link]() et [Link]()
Des drapeaux que vous placez dans votre code pour
marquer des points importants, puis vous mesurez la
distance entre ces drapeaux.
[Link]()
Un rapport détaillé qui vous montre tout ce qui s'est passé
sur votre page (chargements, mesures, etc.).
PerformanceObserver
Un surveillant automatique qui vous alerte dès qu'une
mesure est créée, sans que vous ayez besoin de vérifier
manuellement.
Merci pour
votre attention !