Geekly articles weekly

Luxon - une nouvelle bibliothèque pour travailler avec les dates de l'équipe Moment.js



Il semblerait, pourquoi avons-nous besoin d'une autre bibliothèque pour travailler avec les dates et heures alors qu'il existe une bibliothèque Moment bien connue?! D'autant plus intéressant que l'alternative a été proposée par l'équipe Moment elle-même.

La bibliothèque Luxon est déclarée comme un outil puissant, moderne et pratique pour travailler avec les dates et heures en JavaScript. La bibliothèque a été créée par Isaac Cambron, membre de l'équipe de développement Moment depuis 2013.

L'auteur avait beaucoup d'idées pour développer Moment, qu'il ne pouvait pas faire dans le cadre du code existant. Voici les principaux points que je voulais implémenter:

  • essayer quelques idées sur la façon de rendre l'API plus logique (mais ces idées n'étaient pas compatibles avec l'approche adoptée par Moment),
  • mettre en œuvre un travail «prêt à l'emploi» avec des fuseaux horaires sans extensions supplémentaires,
  • repenser complètement le travail avec l'internationalisation, en tenant compte de l'avènement de l'API Intl,
  • passer à un ensemble moderne d'outils et d'approches dans la formation du code JS.

Par conséquent, il a décidé de tout écrire à partir de zéro, ce qui a pris environ deux ans.
Le résultat est une sorte de version modernisée de Moment.
La version résultante semblait intéressante pour toute l'équipe de développement Moment, il a donc été décidé de promouvoir la nouvelle bibliothèque sous les auspices de l'équipe.

Principes de Luxon


  1. Chaînes d'appels comme dans Moment.
  2. Tous les types sont immuables.
  3. API plus claire et évidente: pour différents objets - différentes méthodes avec des paramètres clairement définis.
  4. API Intl pour l'internationalisation (retour à la version anglaise si le navigateur ne prend pas en charge l'API Intl).
  5. API Intl pour travailler avec les fuseaux horaires.
  6. Support plus complet pour le calcul de la durée.
  7. Prise en charge de l'intervalle natif.
  8. Documentation du code en ligne.

Ces principes ont conduit aux améliorations suivantes:

  • Le code Luxon est beaucoup plus facile à comprendre et à déboguer.
  • L'utilisation des fonctionnalités de navigateur intégrées pour l'internationalisation améliore le comportement de la bibliothèque et, encore une fois, facilite le débogage.
  • La prise en charge du fuseau horaire est mieux implémentée que dans toute autre bibliothèque JS.
  • Luxon fournit à la fois un outil simple et très puissant pour travailler avec la durée.
  • La bibliothèque a une bonne documentation.

Mais Luxon a ses inconvénients:

  • L'accent mis sur l'utilisation des capacités intégrées du navigateur entraîne des difficultés à prendre en charge les anciens navigateurs.
  • Certaines fonctionnalités d'internationalisation qui ne sont pas encore prises en charge par les navigateurs ne sont pas implémentées dans la bibliothèque (vous devez vous attendre à ce que cette prise en charge apparaisse dans les navigateurs).
  • La mise en œuvre de l'API Intl dans différents navigateurs peut varier, respectivement, le comportement de Luxon variera également.

L'installation


Luxon fournit des modules pour toutes les plates-formes JavaScript modernes.

La documentation contient une liste complète des navigateurs pris en charge avec des restrictions d'application. Pour les navigateurs qui n'ont pas ou ont une prise en charge Intl limitée, il est recommandé d'utiliser un polyfichier (en particulier, cela s'applique à IE 10 ou 11).

Lorsque vous travaillez avec Node.js (6+), si vous devez travailler avec des paramètres régionaux, vous devrez également installer le package full-icu et définir la variable d'environnement pour permettre l'utilisation de ce package.

La méthode d'installation standard de npm:
npm install --save luxon

Luxon prend en charge à la fois TypeScript et Flow, il existe également un module au format ES6.

Revue rapide


La bibliothèque Luxon comprend cinq classes principales:

DateTime - date et heure avec fuseau horaire et paramètres d'affichage, ainsi que les méthodes associées.
Durée - une période de temps (durée), par exemple, "2 mois" ou "1 jour, 3 heures".
Info - méthodes statiques pour obtenir des données générales sur l'heure et la date.
Intervalle - intervalle de temps et méthodes pour travailler avec lui.
Les paramètres sont des méthodes statiques qui définissent le comportement général de Luxon.

import {DateTime, Duration, Info, Interval, Settings} from 'luxon';

Votre premier datetime


La classe la plus importante à Luxon est DateTime. DateTime représente la date + l'heure avec le fuseau horaire et les paramètres régionaux. Voici comment vous pouvez définir le 15 mai 2017 08:30 dans le fuseau horaire local:

 var dt = DateTime.local(2017, 5, 15, 8, 30);

Voici l'appel pour déterminer l'heure actuelle:

 var now = DateTime.local();

Créer à partir d'un objet


 DateTime.fromObject({ month:12, day: 22, hour: 12, minutes: 20, zone: 'Europe/Kaliningrad' }); //=> 2018-12-22T12:20:00.000+02:00

Créer à partir d'une chaîne au format ISO 8601


 DateTime.fromISO("2017-05-15"); //=> May 15, 2017 at 0:00 DateTime.fromISO("2017-05-15T08:30:00"); //=> May 15, 2017 at 8:30

Lors de la conversion en chaîne, Luxon renvoie également une chaîne au format ISO 8601:

 DateTime.local().toString(); //=> "2018-12-18T20:58:29.995+03:00"

Obtention de composants individuels:


 var dt = DateTime.local(); dt.year; //=> 2018 dt.month; //=> 12 dt.day; //=> 18 dt.second; //=> 27 dt.weekday; //=> 2 dt.zoneName; //=> "Europe/Moscow" dt.offset; //=> 180 dt.daysInMonth; //=> 31

Sortie formatée


Luxon a de nombreuses méthodes pour convertir DateTime en une chaîne, deux d'entre elles sont les plus importantes pour LocaleString et toISO, la première convertit en un format prenant en compte la laque du navigateur, et la seconde prépare le texte pour le traitement programmatique (par exemple, pour le transfert vers un serveur):

 dt.toLocaleString(); //=> "18.12.2018" dt.toLocaleString(DateTime.DATETIME_MED); //=> "18 . 2018 ., 21:46" dt.toISO(); //=> "2018-12-18T21:46:55.013+03:00"

Luxon dispose de deux douzaines de «préréglages» prêts à l'emploi pour la sortie formatée (tels que DATETIME_MED et TIME_WITH_LONG_OFFSET).

Vous pouvez également créer votre propre option de formatage basée sur des jetons:

 dt.setLocale('ru').toFormat('d MMMM tt - ZZZZZ'); //=> "18  21:46:55 - ,  "

Conversions DateTime


Remarque importante: les objets Luxon sont immuables, c'est-à-dire toutes les méthodes de modification qui leur sont appliquées renverront la copie modifiée sans changer l'objet d'origine. Par conséquent, tous les termes de cet article (comme dans la documentation Luxon) tels que «changer», «installer», «redéfinir» doivent être compris comme «créer une nouvelle instance avec d'autres propriétés».

Transformations mathématiques


 var dt = DateTime.local(2018, 12, 18, 20, 30); //=> "18.12.2018, 20:30" dt.plus({hours: 3, minutes: 2}); //=> "18.12.2018, 23:32" dt.minus({days: 7}); //=> "11.12.2018, 20:30" dt.startOf('day'); //=> "18.12.2018, 0:00" dt.endOf('hour'); //=> "18.12.2018, 20:00"

Remplacement des paramètres individuels


 var dt = DateTime.local(); dt.set({hour: 3}).hour //=> 3

Conversions internationales


Luxon prend en charge plusieurs transformations Intl différentes, l'une des plus importantes est le formatage pour différents paramètres régionaux:

 var dt = DateTime.local(); var f = {month: 'long', day: 'numeric'}; dt.setLocale('fr').toLocaleString(f); //=> "18 décembre" dt.setLocale('en-GB').toLocaleString(f); //=> "18 December" dt.setLocale('en-US').toLocaleString(f); //=> "December 18"

La classe Info peut renvoyer des listes de mois et de jours de la semaine dans un lieu donné:

 Info.months('long', {locale: 'it'}); //=> ["gennaio", "febbraio", "marzo", ...] Info.weekdays ('short', {locale: 'de'}); //=> ["Mo", "Di", "Mi", ...]

Fuseaux horaires


Luxon prend en charge les fuseaux horaires. Si vous créez un DateTime sans spécifier explicitement un fuseau horaire, le fuseau local sera sélectionné par défaut. Si vous modifiez le fuseau horaire d'un DateTime existant, l'heure et la date seront recalculées en tenant compte de la différence entre les fuseaux horaires.

 var dt = DateTime.local(2018, 12, 18, 20, 00); //=> 2018-12-18T20:00:00.000+03:00 dt.zone.name; //=> "Europe/Moscow" dt.setZone('Asia/Vladivostok'); //=> 2018-12-19T03:00:00.000+10:00

Luxon prend également en charge l'utilisation de la date et de l'heure au format UTC:

 DateTime.utc(2018, 5, 15); //=> 2018-05-15T00:00:00.000Z DateTime.utc(); //=> 2018-12-18T17:58:29.995Z DateTime.local().toUTC(); //=> 2018-12-18T17:58:29.995Z DateTime.utc().toLocal(); //=> 2018-12-18T20:58:29.995+03:00

La durée


La classe Durée permet de travailler avec, par exemple, une durée de «2 heures et 7 minutes». Vous pouvez créer une durée comme celle-ci:

 var dur = Duration.fromObject({hours: 2, minutes: 7});

Les durées peuvent être ajoutées et soustraites. La durée peut avoir une valeur négative.

 dur.minus(dur).minus(dur); //=> {hours: -2, minutes: -7}

De même, la durée peut être ajoutée ou soustraite de DateTime.

 DateTime.local().plus(dur);

La durée a des getters (similaires aux getters DateTime):

 dur.hours; //=> 2 dur.minutes; //=> 7 dur.seconds; //=> 0 dur.zone; //=> undefined

La durée a également d'autres méthodes utiles:

 dur.as('seconds'); //=> 7620 dur.toObject(); //=> { hours: 2, minutes: 7 } dur.toISO(); //=> 'PT2H7M'

Intervalles


Les intervalles sont définis comme la période entre deux points temporels; la classe Intervalle est utilisée pour travailler avec eux. L'heure de début est incluse dans l'intervalle, mais l'heure de fin ne l'est pas: en conséquence, le début lors de la conversion en chaîne est marqué d'un crochet carré et la fin est d'un crochet rond.

 var today = DateTime.local(2018, 12, 18); var later = DateTime.local(2020, 10, 12); var interval = Interval.fromDateTimes(today, later); interval.toString(); //=> "[2018-12-18T00:00:00.000+03:00 – 2020-10-12T00:00:00.000+03:00)" interval.toISO(); //=> "2018-12-18T00:00:00.000+03:00/2020-10-12T00:00:00.000+03:00" interval.length(); //=> 57369600000 interval.length('years', true); //=> 1.8169398907103824 interval.contains(DateTime.local(2019)); //=> true

Les intervalles peuvent être comparés entre eux et combinés entre eux:

 var nextYear = Interval.after(DateTime.local(), {year: 1}); var prevYear = Interval.before(DateTime.local(), {year: 1}); prevYear.overlaps(nextYear); //false prevYear.abutsStart(nextYear); //true nextYear.union(prevYear).length('years'); //=> 2

Luxon et Moment


La bibliothèque Luxon «vit» dans le projet «Moment», mais n'est pas un remplacement complet de la bibliothèque Moment. Luxon ne fournit pas toutes les fonctionnalités de Moment, par exemple, le formatage de la date relative n'a été implémenté que récemment dans la version 71 du navigateur Chrome, ne fonctionne pas encore dans d'autres navigateurs, et sa prise en charge n'a pas encore été implémentée dans Luxon (bien que cela soit prévu). Mais même si les navigateurs prennent en charge les fonctionnalités requises, vous devez comprendre qu'elles ne seront disponibles que dans ces nouveaux environnements. Dans les navigateurs plus anciens, Luxon fonctionnera avec des problèmes, tandis que Moment fonctionnera à tout moment, n'importe où.

De plus, l'API Luxon a été entièrement repensée et est complètement différente de l'API Moment.

Notez les principales différences entre Moment et Luxon.

Immunité


Les objets Luxon sont immuables, mais pas Moment.
Dans l'exemple ci-dessous, m1 et m2 sont le même objet qui a été modifié par la méthode add.

 var m1 = moment(); var m2 = m1.add(1, 'hours'); m1 === m2; //=> true

Dans le cas de Luxon, la méthode plus renvoie un nouvel objet d2 sans changer le d1 d'origine.

 var d1 = DateTime.local(); var d2 = d1.plus({ hours: 1 }); d1 === d2; //=> false d1.valueOf() === d2.valueOf(); //=> false

Pour cette raison, Luxon n'a pas besoin de constructeurs de copie spéciaux ni de méthodes de clonage que Moment utilise pour obtenir des copies sans modifier la valeur d'origine.

Différences fonctionnelles clés


  1. Le compte à rebours des mois à Luxon commence à partir de 1, et non à partir de zéro, comme dans Moment (et nativement dans l'objet Date js).
  2. La localisation et les fuseaux horaires sont implémentés à l'aide de l'API Intl native (ou polyphile) et ne sont pas intégrés à la bibliothèque.
  3. Luxon a des types intégrés de durée et d'intervalle.
  4. Luxon ne prend pas encore en charge le formatage de date relative.
  5. Luxon n'a pas non plus de méthode d'humanisation pour représenter la durée dans un style «humanisé» (par exemple, «quelques secondes»).

Différences de style API


  • Dans les méthodes de l'API Luxon, les paramètres facultatifs sont généralement situés en dernier.
  • Luxon a de nombreuses méthodes distinctes pour créer des objets (par exemple, fromISO), contrairement à Moment, qui a une fonction pour cela, et le type de l'objet est défini par des paramètres.
  • Luxon a des analyseurs très stricts, tandis que Moment a des analyseurs plus libéraux, c'est-à-dire si le format de la chaîne d'entrée est différent de la norme, Luxon donnera immédiatement une erreur et Moment essaiera de corriger certaines erreurs dans le format.
  • Luxon utilise des getters (dt.year, dt.isValid) pour obtenir la valeur des champs internes, et non des méthodes comme Moment (m.year (), m.isValid ()).
  • Luxon permet à une méthode de définir immédiatement tous les paramètres nécessaires dt.set ({année: 2016, mois: 4}), dans Moment, ils ne sont définis qu'un par un - une chaîne d'appels m.year (2016) .month (4).
  • La durée à Luxon est une classe de durée de niveau supérieur distincte.

Sinon, Luxon a emprunté beaucoup d'idées à Moment, la documentation contient même des tableaux d'équivalence des méthodes Moment et Luxon.

Tailles des fichiers de bibliothèque


Luxon (v. 1.8.2)
luxon.min.js - 61 Ko

Moment (v. 2.23.0)
moment.min.js - 51 Ko
moment.min.js + locale / ru.js - 59 Ko
moment-with-locales.min.js - 323 Ko

Comme vous pouvez le voir, sans les locales Moment, la taille est 10 Ko plus petite que Luxon, mais avec l'ajout de plusieurs locales, la taille devient approximativement égale.

Si le support est requis immédiatement pour tous les paramètres régionaux, alors il y a un gain significatif de Luxon.

Résumé


La bibliothèque est complètement prête à l'emploi et l'auteur promet son soutien. La bibliothèque a déjà 7k + étoiles sur le github et sa popularité ne fait que croître. Non seulement l'auteur lui-même fait les commits dans son code, mais au moins 6 autres développeurs.

Je suppose que la bibliothèque Luxon est une réponse à l'apparition du support de l'API Intl dans les navigateurs. Les développeurs Moment comprennent que l'utilisation des dates sur le Web peut changer de manière significative et essaient de se préparer à ces changements. Mais ils ne peuvent pas prédire avec précision le développement du web, et avec lui le nouveau projet (qu'ils appellent eux-mêmes le projet Moment labs). Les idées de Luxon seront-elles portées sur le moment 3? La plupart des utilisateurs passeront-ils de Moment à Luxon à un moment donné? Peut-être que Luxon sera renommé Moment? Les développeurs eux-mêmes admettent qu'ils ne peuvent pas maintenant répondre à ces questions.

Source: https://habr.com/ru/post/fr433850/

More articles:


All Articles