Introduzione a WebJars

1. Panoramica

Questo tutorial introduce WebJars e come utilizzarli in un'applicazione Java.

In poche parole, i WebJar sono dipendenze lato client impacchettate in file di archivio JAR. Funzionano con la maggior parte dei container JVM e dei framework web.

Ecco alcuni WebJar popolari: Twitter Bootstrap , jQuery , Angular JS , Chart.js ecc; l'elenco completo è disponibile sul sito ufficiale.

2. Perché utilizzare WebJars?

Questa domanda ha una risposta molto semplice, perché è facile.

L'aggiunta e la gestione manuale delle dipendenze lato client spesso risulta difficile da mantenere le basi di codice .

Inoltre, la maggior parte degli sviluppatori Java preferisce utilizzare Maven e Gradle come strumenti di gestione della compilazione e delle dipendenze.

Il problema principale che WebJars risolve è rendere le dipendenze lato client disponibili su Maven Central e utilizzabili in qualsiasi progetto Maven standard.

Ecco alcuni interessanti vantaggi di WebJars:

  1. Possiamo gestire esplicitamente e facilmente le dipendenze lato client nelle applicazioni web basate su JVM
  2. Possiamo usarli con qualsiasi strumento di compilazione comunemente usato, ad esempio: Maven, Gradle, ecc
  3. I WebJar si comportano come qualsiasi altra dipendenza Maven, il che significa che otteniamo anche dipendenze transitive

3. La dipendenza da Maven

Facciamo subito un salto e aggiungiamo Twitter Bootstrap e jQuery a pom.xml :

 org.webjars bootstrap 3.3.7-1 org.webjars jquery 3.1.1 

Ora Twitter Bootstrap e jQuery sono disponibili nel classpath del progetto; possiamo semplicemente farvi riferimento e usarli nella nostra applicazione.

Nota: puoi controllare l'ultima versione di Twitter Bootstrap e le dipendenze di jQuery su Maven Central.

4. L'app semplice

Con queste due dipendenze WebJar definite, configuriamo ora un semplice progetto Spring MVC per poter utilizzare le dipendenze lato client.

Prima di arrivare a questo, tuttavia, è importante capire che WebJars non ha nulla a che fare con Spring , e qui stiamo usando Spring solo perché è un modo molto semplice e veloce per impostare un progetto MVC.

Ecco un buon punto di partenza per impostare il progetto Spring MVC e Spring Boot.

E, con la semplice configurazione del progetto, definiremo alcune mappature per le nostre nuove dipendenze client:

@Configuration @EnableWebMvc public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry .addResourceHandler("/webjars/**") .addResourceLocations("/webjars/"); } }

Ovviamente possiamo farlo anche tramite XML:

5. Dipendenze indipendenti dalla versione

Quando si utilizza Spring Framework versione 4.2 o successiva, rileverà automaticamente la libreria webjars-locator sul percorso di classe e la utilizzerà per risolvere automaticamente la versione di qualsiasi risorsa WebJars.

Per abilitare questa funzione, aggiungeremo la libreria webjars-locator come dipendenza dell'applicazione:

 org.webjars webjars-locator 0.30 

In questo caso, possiamo fare riferimento alle risorse WebJars senza utilizzare la versione; vedere la sezione successiva per un paio di esempi reali.

6. WebJars sul client

Aggiungiamo una semplice pagina di benvenuto in HTML alla nostra applicazione (questa è index.html ):

 WebJars Demo 

Ora possiamo usare Twitter Bootstrap e jQuery nel progetto - usiamo entrambi nella nostra pagina di benvenuto, a partire da Bootstrap:

Per un approccio indipendente dalla versione:

Aggiungi jQuery:

E l'approccio indipendente dalla versione:

7. Test

Ora che abbiamo aggiunto Twitter Bootstrap e jQuery nella nostra pagina HTML, proviamoli.

Aggiungeremo un avviso di bootstrap nella nostra pagina:

Success! It is working as we expected.

Si noti che qui si presuppone una conoscenza di base di Twitter Bootstrap; ecco le guide introduttive sull'ufficiale.

Questo mostrerà un avviso come mostrato di seguito, il che significa che abbiamo aggiunto con successo Twitter Bootstrap al nostro classpath.

Usiamo jQuery adesso. Aggiungeremo un pulsante di chiusura a questo avviso:

× 

Ora dobbiamo aggiungere jQuery e bootstrap.min.js per la funzionalità del pulsante di chiusura, quindi aggiungili all'interno del tag body di index.html, come di seguito:

Nota: se utilizzi un approccio indipendente dalla versione, assicurati di rimuovere solo la versione dal percorso, altrimenti le importazioni relative potrebbero non funzionare:

Ecco come dovrebbe apparire la nostra pagina di benvenuto finale:

 WebJars Demo

× Success! It is working as we expected.

Ecco come dovrebbe apparire l'applicazione. (E l'avviso dovrebbe scomparire quando si fa clic sul pulsante di chiusura.)

8. Conclusione

In questo rapido articolo, ci siamo concentrati sulle basi dell'utilizzo di WebJars in un progetto basato su JVM, il che rende lo sviluppo e la manutenzione molto più semplici.

Abbiamo implementato un progetto supportato da Spring Boot e utilizzato Twitter Bootstrap e jQuery nel nostro progetto utilizzando WebJars.

Il codice sorgente dell'esempio sopra utilizzato può essere trovato nel progetto Github: questo è un progetto Maven, quindi dovrebbe essere facile da importare e costruire.