11 librerie JavaScript Open Source per progetti front-end

by Janeth Kent Date: 17-06-2020 javascript librerie opensource scripts

Senza dubbio, JavaScript è uno dei linguaggi di programmazione più utilizzati al giorno d'oggi. Grazie ad esso, abbiamo accesso a varie funzionalità che vengono offerte sui siti web che visitiamo regolarmente e che rendono la nostra esperienza di navigazione molto più piacevole, semplice e divertente.

I browser che utilizziamo hanno i loro motori JavaScript integrati, al fine di sfruttare al meglio i loro vantaggi e cercare di offrire all'utente, una maggiore performance nelle applicazioni web che lo implementano in modo completo.

Interfacce utente, pagine web dinamiche, animazioni, framework per lo sviluppo di applicazioni che richiedono l'aggiornamento delle informazioni in tempo reale e molte altre cose sono possibili con questo linguaggio.

Tra le tante cose, ci sono biblioteche create per soddisfare obiettivi molto specifici, che ci aiuteranno a fornire ai nostri progetti caratteristiche molto interessanti, quindi vale la pena averle a portata di mano.

In questo articolo abbiamo compilato una lista delle migliori librerie dinamiche javascript e open source per progetti front-end.

 

1. Math.js

 

Sebbene il linguaggio JavaScript standard contenga diverse funzioni matematiche, non è affatto completo. 

Una caratteristica spesso trascurata è quella dei numeri complessi. Math.JS fornisce un'API relativamente facile da usare il cui utilizzo di base è simile a questo:

 
const a = math.complex(2, 3)
print(a.re) 2
print(a.im) 3
 

La precisione dei numeri variabili è un altro problema nei tempi di esecuzione di JavaScript. Math.JS risolve questo problema fornendo un'implementazione del numero variabile a punto fisso - è sufficiente impostare la precisione desiderata e aumentare il suo numero decimale:

 
math.bignumber('2.3e+500') BigNumber, 2.3e+500
 

Tenete presente che BigNumber e le sue varie classi non sono una panacea per tutti i problemi digitali. L'aritmetica a punto fisso è nota per essere molto più lenta della matematica di flottazione con accelerazione hardware - se non si ha una buona ragione per usare una maggiore precisione, è meglio farne a meno.

 

02. Leaflet

 

Leaflet è una libreria JavaScript open source per mappe web interattive. È leggera, semplice e flessibile, ed è probabilmente la biblioteca cartografica open source più popolare al momento. L'opuscolo è stato preparato da Vladimir Agafonkin (ora di MapBox) e da altri collaboratori.

 

03. Anime.js

 

Anime.JS fornisce una comoda implementazione del modello di animazione dei fotogrammi chiave. Specificare lo stato di inizio, lo stato di fine e una funzione di facilitazione - la biblioteca e il browser utilizzeranno le trasformazioni CSS per garantire che le animazioni funzionino alla velocità ottimale.

 

04. Hotkeys

 

Un'interfaccia basata su tastiera rende i prodotti più attraenti per gli utenti avanzati. Hotkeys si occupa dei dettagli spesso molto complicati della gestione della tastiera, lasciandovi concentrare sull'implementazione della logica di business. Per iniziare sono necessarie meno di dieci linee di codice!

 

05. Easy Toggle State

 

L'attivazione e la disattivazione di elementi GUI su base programmata è un compito vecchio ma ricorrente. Il facile stato di commutazione fornisce un modo ordinato per eseguire il compito infinito di raggruppare gli articoli e di accenderli e spegnerli senza sudare.

 

06. AutoNumeric

 

È difficile far apparire i numeri in tutte le occasioni. AutoNumeric è una biblioteca dedicata ai formati numerici e monetari del mondo. Basta passare una variabile numerica e deliziare gli occhi con una stringa. La biblioteca può anche "monitorare" i campi di testo per renderli più piacevoli.

 

 

07. D3.js

 

D3 crea collegamenti di dati tra oggetti DOM arbitrari ed elementi memorizzati nel codice dietro di essi. Ciò significa che l'aspetto del sito web può essere personalizzato in modo flessibile in base ai dati memorizzati.

D3 si differenzia dalle librerie di diagrammi tradizionali in quanto non fornisce alcun modello. Se, ad esempio, si vuole creare un grafico a torta, è meglio iniziare inserendo dei rettangoli e aggiungendo dei collegamenti di dati per calcolare l'altezza e altri.

La biblioteca brilla quando sono necessarie visualizzazioni estremamente complesse e/o animate e il tempo di preparazione non è un problema. Un esempio popolare sarebbero le mappe corporali, comunemente usate nei rapporti elettorali.

 

08. Element

 

Element si differenzia dal resto del settore per il fatto di essere sponsorizzato da diverse grandi aziende web con sede sia in Cina che negli Stati Uniti.

Da un punto di vista tecnico, Element è - in generale - una raccolta ben supportata di widget GUI basati su Vue 2.0. Importatelo nel vostro progetto web, aggiungete le schede specifiche e "hackeratelo" come se fosse l'interfaccia utente jQuery.

Un'area in cui il prodotto brilla davvero è quella in cui vengono visualizzate la data e l'ora. Il seguente estratto crea un insieme di controlli che permettono all'utente di specificare un periodo determinato di mesi:

 
<el-date-picker  	  
v-model="value1"  	  
type="monthrange"  	  
range-separator="To"  	  
start-placeholder="Start month"  	  
end-placeholder="End month">  	
</el-date-picker>
 

Purtroppo, iniziare con questo elemento richiede un po' di lavoro manuale. Il modo più conveniente è scaricare lo starter kit e farlo funzionare in un ambiente Node.JS.

 

09. HighCharts

 

Sebbene le librerie di diagrammi JavaScript open source siano di uso comune, alcuni lavori richiedono un ulteriore livello di sicurezza. In questo caso, HighCharts è una scommessa sicura.

Il prodotto, presente sul mercato da anni, è stato a lungo diversificato per includere soluzioni di visualizzazione per Android, cartografia e mercato azionario.

Il lancio di un diagramma HighCharts è semplice. Richiama la funzione chart(), insieme ad un'etichetta <div> e ad un oggetto contenente ulteriori descrizioni:

 
Highcharts.chart('container', {  	
chart: {  		
scrollablePlotArea: {  			
minWidth: 700  		
}  	
},
 


Highcharts si differenzia dai suoi concorrenti per la possibilità di ottenere i suoi dati da una varietà di fonti. Un chiaro esempio è il seguente, che utilizza un file CSV ospitato su un server di terze parti:

 
data: {  		
csvURL: 'https://cdn.jsdelivr.net/gh/  
highcharts/[email protected]/samples/data/  
analytics.csv',  		
. . .  },
 

10. Underscore.js

 

Underscore.js offre una piccola selezione di API ben invecchiata, che lo rende la scelta ideale per alcuni progetti web.

 

11. Hammer

 

Il riconoscimento tattile può essere un processo noioso. Hammer.js semplifica questo compito.

Potrebbe interesarvi:

 

12. Finance.js

 

La programmazione di alcuni processi matematici finanziari non è facile. Finance.JS fornisce l'accesso a diversi calcoli finanziari di uso comune.

 

13. Bideo.js

 

I puristi potrebbero vedere un video a schermo intero come il più decadente e inutile degli sfondi. Alcuni progetti, tuttavia, ne traggono grande beneficio - in questo caso, usate Bideo.js per eliminare lo stress della gestione del video.

 
by Janeth Kent Date: 17-06-2020 javascript librerie opensource scripts visite : 12972  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Articoli correlati

Creazione di testi didattici utilizzando software gratuiti e open source

Secondo i principi della didattica inclusiva, la scuola ha il compito di fornire tutti gli strumenti disponibili per facilitare la partecipazione degli studenti alla vita scolastica e c’è un consenso ormai…

Come creare un aplicazione Vue.js in 5 minuti

Vue.js sta acquisendo sempre più popolarità, diventando un importante concorrente di framework come Angular o React.js. Come framework per i principianti, conquista i cuori dei giovani sviluppatori front-end e delle…

JQuery morirà nel 2019?

Per un po' di tempo, la centralità di JQuery è stata oggetto di dibattito tra gli sviluppatori web. Come programmatori web interessati a Javascript, eravamo curiosi di sapere che opinioni…

30 Manuali di riferimento per JavaScript: jQuery, Node.js, React

Questa lista ha lo scopo di introdurre i nuovi sviluppatori a JavaScript (jQuery, Node.js e React) e agevolare il compito degli sviluppatori più esperti. jQuery jQuery API (Official) Leggi → jQuery Cheatsheet (Devhints) Leggi → jQuery Cheat Sheet (JavaScript Toolbox) Leggi…

Le migliori librerie JavaScript del 2018

Dal momento che Javascript si è rivelato il linguaggio di programmazione più popolare e ampiamente utilizzato nel 2018, l'ecosistema che si sviluppa intorno ad esso sta cominciando a diventare importante. JavaScript…

Convertire il testo in voce e viceversa con Javascript: tutorial+codice

In questo tutorial sperimenteremo la Web Speech API: un'interfaccia browser molto potente che consente di registrare la voce umana e convertirla in testo. La useremo anche per fare il contrario: interpretare…

I 5 Migliori Frameworks JavaScript per Applicazioni Desktop

Non molto tempo fa era impossibile costruire un'applicazione desktop con JavaScript. Fortunatamente, questi tempi sono passati, e ora gli sviluppatori JS possono utilizzare le loro conoscenze e competenze di sviluppo…

9 Utili Librerie CSS per il Disegno Web

I componenti perduti di bootstrap, un complemento che sicuramente non dovrete mai farvi mancare!  Jasny Bootstrap E se il vostro framework CSS parlasse? Ecco a voi un nuovo Framework Semantico.Un…

Introduzione a React: la prima libreria JavaScript costruita per sviluppatori frontend

React è una libreria JavaScript, creata da Facebook e Instagram, che permette di creare delle interfacce utente complesse grazie alla suddivisione in diversi componenti. React supporta la definizione di modelli HTML per ciascun componente attraverso un…

Riconoscimento facciale: rilevare la prossimità di un volto in javascript

No, non è una prerogativa di Facebook...La Face Detection è una tecnologia informatica che determina la posizione e le dimensioni di volti umani rappresentati in immagini digitali. Sicuramente avrete già  visto…

Risorse grafiche gratuite

Sul web si trovano moltissime librerie di risorse grafiche gratuite. Senza pretendere di essere esaustivi, anzi, sono graditi apporti e suggerimenti, vogliamo stilare un elenco delle fonti che, a nostro…

jQuery: consigli e trucchi utili per migliorare le performance di un sito web

Quando si sviluppa in jQuery ci si rende conto che esistono diverse maniere di implementare la stessa cosa. La tendenza è di migliorare e semplificare sempre più scrivendo meno righe di…

Clicky