Moment.js è ancora ampiamente considerato come il re delle librerie di date JavaScript, nonostante sia stato designato come progetto legacy dai suoi manutentori nel 2020. Ora, la ricerca è in corso per un degno successore. Anche se potrebbe essere un po ‘presto per dichiarare un vincitore, a detta di tutti, sembra Luxon è il front-runner. Non solo è l’alternativa consigliata dai manutentori di Moment.js, ma le capacità di Luxon sono un po ‘più efficienti sui browser moderni. Questo tutorial fornirà un confronto tra le due librerie e mostrerà come ottenere gli stessi risultati di Moment utilizzando Luxon.

Tree-shaking e Package Bloat

Sebbene Moment.js sia ricco di un sacco di ottime funzionalità e utilità, se stai lavorando su un’applicazione web sensibile alle prestazioni, può causare un significativo sovraccarico delle prestazioni a causa delle sue API complesse e delle grandi dimensioni del bundle: 235K (66K gzip) vs. 66K (con zip a 20 g) per Luxon.

Alcuni altri difetti di Moment.js:

1. Moment.js non supporta lo scuotimento degli alberi. Tree shaking è un termine comunemente usato in un contesto JavaScript per descrivere la rimozione di codice morto. Nelle moderne applicazioni JavaScript, utilizziamo bundler di moduli (ad esempio, webpack o Rollup) per rimuovere automaticamente il codice morto quando si raggruppano più file JavaScript in singoli file. Ciò contribuisce alle enormi dimensioni del bundle di Moment.js e ai potenziali problemi di prestazioni.
2. Moment.js è modificabile e causa bug relativi a modifiche accidentali e / o involontarie delle variabili oggetto.
3. Moment.js è basato su API di programmazione orientata agli oggetti, in modo che i metodi possano accettare varie combinazioni di parametri, come myDate.subtract (‘ms’, 50); e myDate.subtract (50, ‘ms’) ;. Ciò contribuisce anche ai primi due numeri.

Nel frattempo, Luxon riesce a fornire un set altrettanto ricco di funzionalità nonostante non supporti lo scuotimento degli alberi. In effetti, mantiene una dimensione ridotta rispetto ad altre popolari librerie di date che supportano lo scuotimento degli alberi, come date-fns. La sua dimensione ridotta è attualmente di poco inferiore a 90 KB, circa 24 KB più grande di Luxon.

Uno dei motivi per cui mi sono trasferito a Luxon è che la sua documentazione include una sezione specifica per gli utenti Moment che hanno bisogno di convertire il loro codice Moment.js esistente in Luxon.

Immutabilità

Allora perché gli oggetti Datetime mutabili sono un problema? Diamo un’occhiata a un esempio che illustra il pericolo:

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

Questo accade perché m1 e m2 sono davvero lo stesso oggetto; il Inserisci() ha mutato l’oggetto per essere un’ora dopo. Rispettare il codice equivalente in Luxon:

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

In questo caso, il file più() restituisce una nuova istanza, lasciando d1 non modificato. L’immutabilità degli oggetti significa che Luxon non richiede costruttori di copie o metodi di clonazione.

Esempi di codice

Luxon ha tutte le campane e i fischietti che vorresti da una libreria di date. Nel complesso, Luxon è un po ‘più prolisso di Moment, ma parte di ciò è che Luxon ha molti metodi statici. Ad esempio, quando creiamo una nuova data utilizzando Moment, possiamo chiamarne uno dei tanti costruttori:

var now = moment();
var fromTimestamp = moment((new Date()).valueOf();
var fromJsDate = moment(new Date());

L’oggetto globale di Luxor si chiama Appuntamento. Non ha un costruttore; invece, espone diversi metodi statici:

var now = DateTime.now();
var fromTimestamp = DateTime.fromMillis((new Date()).valueOf());
var fromJsDate = DateTime.fromJSDate(new Date());

Un’altra differenza tra Moment e Luxon è che quest’ultimo non fornisce getter. Invece, espone semplicemente le proprietà direttamente. Ecco alcuni dei getter di Moment in azione:

var now = moment();
var year = now.year();
var month = now.month();
var day = now.date();

Ed ecco le proprietà di Luxon per le stesse unità:

var now = DateTime.now();
var year = now.year;
var month = now.month;
var day = now.date;

Confronti e trasformazioni

Ovviamente, il vero motivo per utilizzare una libreria di date è confrontare date e ore e modificarle. Né Moment.js né Luxon mancano in quei reparti! Ecco un po ‘di codice Moment:

var now = moment();
var tomorrow = now.add(1, 'day');
var yesterday = now.subtract(1, 'day');
var lastDayOfMonth = now.endOf('month');

Ed ecco le stesse operazioni con Luxon:

var now = DateTime.now();
var tomorrow = now.plus({ days: 1 });
var yesterday = now.minus({ days: 1 });
var lastDayOfMonth = now.endOf('month'); //same as Moment!

Le date del momento possono essere confrontate utilizzando uno dei tanti metodi di confronto della libreria come il seguente:

var now = moment();
var tomorrow = now.add(1, 'day');
var isBefore = now.isBefore(tomorrow); //true
var isSameOrBefore = now.isSameOrBefore(tomorrow); //also true

A questo proposito, Luxon differisce in modo significativo da Moment, in quanto le date Luxon possono essere confrontate utilizzando gli operatori di confronto standard, come <, <=,> e> =:

var now = DateTime.now();
var tomorrow = now.plus({ days: 1 });
var isBefore = now < tomorrow; //true
var isSameOrBefore = now <= tomorrow; //also true

Formattazione

Entrambe le librerie formattano le date come stringhe ISO 8601, ma con alcune differenze. Moment fornisce un formato() metodo che può essere richiamato senza parametri:

moment().format(); // 2021-05-09T16:38:52-04:00

Luxon sovrascrive l’impostazione predefinita accordare() metodo per generare una stringa ISO 8601. Stranamente, include millisecondi, mentre Moment’s formato() non. Per produrre esattamente lo stesso formato di Moment, possiamo fornire una stringa di formato al file toFormat () metodo come segue:

DateTime.now().toUTC().toFormat("yyyy-MM-dd'T'TT"); // 2021-05-09T16:38:52-04:00

Conclusione

Se stai cercando di passare da Moment.js a una libreria di date JS diversa, consiglio vivamente Luxon. Non solo è un eccellente sostituto, ma potrebbe anche essere il più facile a cui passare, grazie all’approfondito confronto e alla guida della libreria di Luxon.

In un prossimo articolo, conosceremo meglio Luxon creando una piccola utility web per mostrare una data in diversi fusi orari.

Rob Gravelle risiede a Ottawa, in Canada, ed è un guru dell’IT da oltre 20 anni. In quel periodo, Rob ha costruito sistemi per organizzazioni legate all’intelligence come Canada Border Services e varie attività commerciali. Nel suo tempo libero, Rob è diventato un artista musicale affermato con diversi CD e versioni digitali a suo merito.