6 tubi angolari puri per un’interfaccia utente leggibile dall’uomo

Tubi angolari personalizzati che migliorano l’interfaccia utente, promuovono i principi “DRY” e affrontano le attività quotidiane.

Tubi angolari per prestazioni e interfaccia utente

I tubi angolari sono un modo efficace per applicare piccole trasformazioni all’interfaccia utente. L’utilizzo di Pipes rende la tua applicazione più ASCIUTTA (Non ripetere te stesso).

Ti consente di separare le preoccupazioni e spostare la logica di trasformazione dell’interfaccia utente dalla logica del componente.

I tubi angolari puri sono una delle tante strategie di ottimizzazione delle prestazioni che puoi utilizzare in un’applicazione Angular. I tubi sono puri per impostazione predefinita.

Un tubo angolare prende un input e trasforma quell’input nell’output desiderato, tramite una funzione transform . La classe Pipe implementa l’interfaccia PipeTransform e può essere pura o impura.

Puro

Se il pipe è puro, il risultato calcolato viene memorizzato nella cache e la funzione transform viene eseguita solo quando l’input cambia. I Pure Pipes si comportano in modo simile alla memoizzazione.

Impuro

D’altra parte, se la pipe è non pura, ciò significherebbe che la funzione pipe transform viene eseguita durante ogni ciclo di rilevamento delle modifiche. Questo è utile se la tua pipe ha uno stato interno che influenza il risultato della trasformazione.

È importante notare che un tubo con pure: false verrebbe eseguito nei cicli di rilevamento delle modifiche anche se i valori di input non sono cambiati. È importante essere consapevoli dei colli di bottiglia delle prestazioni dovuti a questo comportamento.

Andiamo a questo …

1) Stringhe compatibili con URL: converti una stringa in uno slug

ToSlugPipe

Quando si implementano URL dinamici generati a causa dell’input dell’utente, delle categorie e di altri dati leggibili dall’uomo, spesso si desidera elaborare le stringhe tramite una funzione che produrrà una versione sicura per gli URL.

Gli URL non devono utilizzare trattini bassi, spazi o altri caratteri per separare le parole.

È preferibile che questo metodo sia DRY , in modo che gli URL seguano la stessa convenzione. Questo è il caso d’uso perfetto per un tubo angolare.

La pipe toSlugPipe trasforma un URL in uno slug. Rimuove tutti i caratteri non consentiti o irrilevanti negli URL, comprese le stringhe che potrebbero causare problemi se utilizzate come percorso / segmento dell’URL. toSlug utilizza un’espressione regolare (Regex) per eliminare i caratteri non conformi all’URL.

Che cosa <”toSlug fa in poche parole:

Bonus: rendi unici i tuoi URL

Il parametro id facoltativo aggiunge la metà del valore id passato alla fine dello slug.

Questo è utile se esiste la possibilità che tu generi slug simili o duplicati attraverso questa trasformazione. Si assicura che gli slug siano univoci, rendendo di conseguenza unico l'URL delle tue app.

Comprensibilmente, questo ha un grande effetto sulla SEO, grazie a una migliore rilevabilità e pertinenza.

Un output di esempio può essere visualizzato in un URL medio: https://itnext.io/smoother-ux-on-page-load-with-angular-resolvers-e063ef035124

2) Visualizza la chiave Enum (stringa) associata al suo valore (numero)

Utile per recuperare i nomi delle categorie da visualizzare nell'interfaccia utente.

CategoryAsStringPipe

La pipe CategoryAsString accetta il TypeScript enum Category e recupera la chiave associata al valore enum.

Ciò è utile se hai utilizzato un enum per le categorie nella tua app. Questa barra verticale ti consente di passargli il valore enum come numero (tipo di categoria) e restituisce l ' etichetta ad essa associata che è di tipo stringa .

Ciò consente di risparmiare un sacco di codice duplicato, poiché senza questa pipe, dovresti importare Category in ogni componente che visualizza il nome Category nel modello HTML

Ad esempio, l'enumerazione Category potrebbe essere simile a…

Con questa enumerazione, se hai passato la categoria Musica come ...

o più realisticamente da dati reali…

restituirà la stringa Music

Bonus: utilizza le chiavi di categoria negli URL

Rendi l'URL della categoria conforme alla pipe toSlug .

Qui convertiamo la categoria di tipo number nella chiave string utilizzando la nostra pipe categoryAsString , prima di convertire il risultato in uno slug utilizzando toSlug .

Questo produrrebbe sports-fitness invece di Sports and Fitness . Molto più adatto agli URL.

3) Troncare il testo in eccesso con i puntini di sospensione

EllipsisPipe

A volte hai del testo traboccante che stai lottando per evitare che trabocchi. Forse desideri un controllo rigoroso sul numero di caratteri visualizzati da una stringa . O forse vuoi esporre solo un certo numero di caratteri per funzionare come un teaser pre-registrazione.

Qualunque sia il tuo particolare caso d'uso, i puntini di sospensione Pipe taglia una stringa a nessuna stringa che non sia più lunga di una lunghezza massima predefinita. La lunghezza massima viene passata come parametro alla funzione di trasformazione.

Quando si riceve una stringa più lunga della lunghezza massima, viene aggiunto un ... alla fine. In caso contrario, restituisce la stringa non modificata.

Per utilizzarlo, fornisci un numero al parametro max della barra dei puntini di sospensione . La biografia dell'utente risultante non sarebbe quindi più lunga di 50 caratteri + ... .

Se il valore non è più lungo del massimo, non verranno applicati i puntini di sospensione.

Bonus: fornisci un argomento dinamico al posto dei puntini di sospensione

Ciò ti consente di aggiungere la stringa ridotta con una sostituzione dinamica personalizzata .

La differenza tra la barra verticale puntini di sospensione originale è l ' argomento facoltativo < . L'argomento append ha un valore predefinito che è la notazione con i puntini di sospensione ... .

Assegniamogli un nome più appropriato: TruncatePipe

Per utilizzarlo, devi fornire la tua < che desideri aggiungere, anziché <”... come secondo parametro a destra.

Questo rende la nostra pipa con i puntini di sospensione più " ASCIUTTA" (non ripetere te stesso) poiché tutto il troncamento può essere gestito da una pipa.

4) Converti un numero (1) nel suo equivalente ordinale (1 °)

OrdinalSuffixPipe

Quando crei riepiloghi , descrizioni ed etichette dinamici basati su dati numerici, devi convertire le cifre in testo leggibile.

Questo spesso richiede un codice complesso per trasformare le statistiche nella sua forma più leggibile, meno robotica e più umana .

L'automazione dei rapporti che invii agli utenti in base a dati e cifre è pratica comune e richiederebbe questo tipo di formattazione.

Inoltre, l ' email transazionale automatizzata richiede la conversione dei dati nella loro forma leggibile dall'uomo.

Ad esempio:

"Hai appena assunto il tuo 32esimo dipendente"

suona meglio di ...

"Hai appena assunto il dipendente numero 32" o "Hai appena assunto il dipendente n. 32"

Utilizzo di ordinalSuffix

5) Tempo fino a - (GIORNI, MESI, ORE, SECS) fino a una data

TimeUntilPipe

<”Dipendenze:

Questa barra verticale prende due date ( una è la data odierna ) e restituisce la differenza tra di esse in un formato leggibile dall'uomo.

Dovrai importare formatDistanceToNow da date-fns , che sarà la funzione che svolgerà la maggior parte del lavoro di formattazione.

Richiede un argomento <”options, in cui possiamo specificare se desideri includere i secondi nel valore restituito.

Le opzioni disponibili sono includeSeconds , locale e addSuffix .

Per utilizzare questa pipe, devi solo fornire la data FUTURE ... date-dns gestisce la data FROM (che è il datetime in questo momento)

Questa pipe è particolarmente utile se hai funzionalità che devono mostrare:

Si tratta essenzialmente di un conto alla rovescia.

Lo useresti in questo modo ...

6) Tempo impiegato / Differenza - Differenza tra due date

DateDiffPipe

Analogamente alla precedente pipe timeUntil , questa pipe prenderà due date come input e restituirà la differenza tra le due in un formato leggibile.

Questa barra verticale è utile se desideri visualizzare il tempo impiegato tra una data di inizio e una di fine.

Output di esempio: 23 ore 59 minuti 30 secondi

Funzionalità come tempo di viaggio o tempo di viaggio tra due destinazioni.

Useremo un'altra funzione date-fns per recuperare la differenza leggibile dall'uomo in (DAYS, HOURS, MINS, SECS).

Ci sono due parti in questo tubo:

Usando questo semplice come passare il fromDate come secondo parametro (i parametri a destra).

Bonus: ottieni la differenza in modalità RIGOROSA

Utilizzando la stessa logica di dateDiff , puoi chiamare la funzione formatDistanceStrict () da date-fns, nel nostro transform () funzione.

Questo altera la lingua utilizzata nella stringa di differenza restituita. La differenza tra la funzione formatDistance e formatDistanceStrict è che quest'ultima funzione non utilizzerà un linguaggio approssimativo come "circa 5 mesi".

Puoi anche forzare un'unità, come ’second’ | 'Minuto' | 'Ora' | 'Giorno' | 'Mese' | "Anno" nel parametro opzioni .

Nota: esiste anche una versione rigorosa della funzione <”formatDistanceToNow chiamato formatDistanceToNowStrict . Quindi potresti implementare la modalità rigorosa nella nostra pipe timeUntil .

Per utilizzarlo, è sufficiente fornire al parametro strict un valore true per abilitare la modalità rigorosa.

Questo è tutto ... ora abbiamo 6 pipe più utili che rendono la nostra vita in via di sviluppo un po 'più facile.

Grazie per la lettura!

Hai domande? fammelo sapere nei commenti.

Una nota dal team di Plain English

Sapevi che abbiamo quattro pubblicazioni? Mostra un po 'di affetto dando loro un seguito: JavaScript in inglese semplice , AI in inglese semplice , UX in inglese semplice , Python in Inglese semplice : grazie e continua a imparare!

Abbiamo anche lanciato un YouTube e ci piacerebbe che ci sostenessi iscrivendoti al nostro canale in Plain English

E come sempre, Plain English vuole aiutare a promuovere buoni contenuti. Se hai un articolo che desideri sottoporre a una delle nostre pubblicazioni, invia un'e-mail a [email protected] con il tuo nome utente Medium e ciò che ti interessa scrivendo e ti risponderemo!