diff --git a/README.md b/README.md index c72d1b13..0eaf87f3 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,7 @@ Pour simplifier vos recherches, n'oubliez pas d’utiliser les filtres disponibl * [Utiliser le rechargement partiel d'une zone de contenu](/chapters/BP_038_fr.md) * [Éviter les animations JavaScript / CSS](/chapters/BP_039_fr.md) * [N'utilisez que les portions indispensables des librairies JavaScript et frameworks CSS](/chapters/BP_040_fr.md) + * [Utilisez des alternatives à Moment.js pour la gestion des dates](/chapters/BP_040_1_fr.md) * [Ne pas faire de modification du DOM lorsqu’on le traverse](/chapters/BP_041_fr.md) * [Rendre les éléments du DOM invisibles lors de leur modification](/chapters/BP_042_fr.md) * [Réduire au maximum le repaint (appearence) et le reflow (layout)](/chapters/BP_043_fr.md) diff --git a/chapters/BP_040_1_fr.md b/chapters/BP_040_1_fr.md new file mode 100644 index 00000000..1fe93c43 --- /dev/null +++ b/chapters/BP_040_1_fr.md @@ -0,0 +1,36 @@ +## NUtilisez des alternatives à Moment.js pour la gestion des dates + +### Description + +Moment.js est une librairie très connue pour la manipulation de dates en JavaScript. Mais avant de l'ajouter à notre application, nous devons avoir connaissance de certains problèmes liés à cette librairie : + +* Elle est tout d'abord plus maintenue. +* Lorsque nous l'importons dans un projet (sauf pour les projet React.js pour lesquels il y a une configuration particulière qui a été définie), Moment.js importe automatiquement les configurations de toutes les langues du monde (et donc celles que nous n'utilisons pas). Cela allourdit très lourdement le poid de la page visitée. + +Nous conseillons d'utiliser des librairies plus légères comme **date-fns** ou encore **day.js**. + +### Exemple + +Dans l'exemple ci-dessous, nous pouvons voir par exemple comment migrer du code JavaScript dans lequel nous formattons une date. + +Voici le code avec **Moment.js** : + +```javascript +import moment from 'moment'; + +moment(new Date()).format('DD-MM-YYYY'); +``` + +Voici le code avec **date-fns** + +```javascript +import { format } from 'date-fns': + +format(new Date(), "dd-MM-yyyy"); +``` + +### Principe de validation + +| Le nombre ... | est inférieur ou égal à | +|-------------------|:-------------------------:| +| d'imports de la librairie Moment.js dans le projet | 0 |