Come distribuire un’applicazione Vue.js

Vue.js è un framework JavaScript sviluppato per risolvere problemi comuni nello sviluppo di applicazioni web, come la complessa gestione degli stati e la necessità di una soluzione leggera e flessibile.

Il framework è stato progettato per garantire semplicità, efficienza e facilità d’uso, con una sintassi simile a quella di HTML e JavaScript. Inoltre, Vue è reattivo, il che lo rende più veloce ed efficiente della manipolazione tradizionale del DOM.

In questo articolo scoprirete i vantaggi e i limiti dell’utilizzo di Vue e come distribuire gratuitamente la vostra applicazione Vue utilizzando il servizio di containerizzazione di Back4app.

Punti di forza

• Vue.js offre tecniche di prestazioni ottimizzate, flessibilità e un’ampia documentazione, che lo rendono una scelta popolare per lo sviluppo front-end.

• Tuttavia, Vue.js può avere dei limiti in termini di stabilità a lungo termine e un ecosistema meno maturo rispetto ad altri framework.

• Back4app Containers offre un modo semplice ed efficiente per distribuire applicazioni Vue.js, sfruttando la tecnologia Docker per migliorare le prestazioni, la sicurezza e semplificare la distribuzione e la scalabilità.

Vantaggi dello sviluppo del front-end con Vue

Vue è diventato sempre più popolare negli ultimi anni per diversi motivi. Ecco alcuni dei vantaggi dello sviluppo di applicazioni web con Vue:

Tecniche e soluzioni per ottimizzare le prestazioni

Vue fornisce una serie di tecniche per ottimizzare le prestazioni nella costruzione di applicazioni web, come il DOM virtuale e i meccanismi di aggiornamento sotto forma di funzioni.

Grazie a queste tecniche, Vue riduce al minimo il numero di operazioni DOM e l’overhead di rendering, con conseguenti tempi di ricarica più rapidi e migliori prestazioni dell’applicazione.

Vue utilizza un DOM virtuale, una rappresentazione leggera del DOM reale, e aggiorna il vDOM quando si apportano modifiche all’applicazione. Utilizza quindi un algoritmo di differenziazione per identificare le modifiche minime necessarie nel DOM reale.

Questo approccio riduce in modo significativo il numero di operazioni DOM costose, con conseguente accelerazione del rendering e miglioramento delle prestazioni.

Inoltre, Vue offre un controllo a grana fine sugli aggiornamenti dei componenti attraverso gli hook del ciclo di vita, i watcher e le proprietà calcolate.

Con queste funzioni, è possibile specificare quando un componente deve essere aggiornato in base a criteri specifici, evitando aggiornamenti inutili e migliorando le prestazioni complessive.

Vue è flessibile per natura

La flessibilità di Vue è evidente in diversi aspetti del framework, che permette di adattarsi a vari scenari di sviluppo, modelli o requisiti.

Uno dei punti di forza di Vue è il suo approccio di adozione incrementale, che lo rende un framework front-end perfetto per essere integrato in progetti esistenti.

Oltre al suo approccio di adozione incrementale, è possibile integrare Vue senza problemi con altre librerie ed ecosistemi esistenti.

Questa compatibilità favorisce l’interoperabilità e consente agli sviluppatori di scegliere le soluzioni migliori per le loro esigenze.

Ad esempio, le funzionalità di Vue possono essere integrate in altre librerie e framework come React e Angular.

Vue offre anche una sintassi dei template flessibile e intuitiva, che consente di scrivere template utilizzando una sintassi basata su HTML con l’aggiunta di direttive ed espressioni.

Questa sintassi bilancia semplicità e potenza, rendendo facile la comprensione e il lavoro con i template Vue.

Inoltre, Vue supporta approcci alternativi al rendering, tra cui JSX (JavaScript XML), offrendo flessibilità agli sviluppatori che preferiscono sintassi alternative.

Ampia documentazione e una comunità attiva

La documentazione di Vue è ben strutturata e concisa e spiega chiaramente i concetti con esempi pratici. La chiarezza e la completezza della documentazione riducono anche la curva di apprendimento, consentendo di iniziare a costruire applicazioni con Vue.

Un altro aspetto distintivo di Vue è la dedizione della sua comunità alla cultura open-source e al contributo attivo.

Gli sviluppatori di Vue contribuiscono attivamente al continuo miglioramento e all’evoluzione di Vue.js. Forniscono contributi di codice e partecipano a discussioni, offrono feedback preziosi e contribuiscono a plasmare la direzione futura di Vue.js.

Questo approccio collaborativo garantisce che Vue.js rimanga un framework all’avanguardia. Impegnandosi attivamente con la comunità di Vue, è possibile attingere a una vasta rete di risorse, ottenere un valido supporto e sbloccare opportunità per espandere le proprie capacità e competenze.

Limitazioni dello sviluppo del front-end con Vue

Sebbene Vue offra vantaggi per lo sviluppo front-end, è anche essenziale notare alcune limitazioni quando si sviluppa con Vue. Alcune di queste limitazioni includono:

Stabilità a lungo termine

Vue soffre di un sostanziale sostegno aziendale che lascia agli sviluppatori la percezione che Vue non sia adatto quando si considerano i framework per sviluppare il front-end di un’applicazione web.

Le organizzazioni spesso danno la priorità a framework con un solido supporto aziendale, come Angular e React, per garantire la capacità del framework di soddisfare le esigenze aziendali in evoluzione e di fornire una manutenzione continua.

Ecosistema meno maturo

Rispetto ad Angular e React, Vue ha un ecosistema meno maturo. Questo porta a scenari in cui gli sviluppatori di Vue incontrano limitazioni nelle librerie e negli strumenti disponibili per affrontare processi complessi in applicazioni di grandi dimensioni.

Gli sviluppatori Vue si trovano spesso in situazioni in cui è necessario ideare soluzioni personalizzate per i requisiti delle loro applicazioni. Questo comporta un ulteriore dispendio di tempo e di energie nello sviluppo dell’applicazione web.

Distribuzione di un’applicazione con i contenitori Back4app

Back4App Containers è una piattaforma che utilizza la tecnologia Docker per distribuire ed eseguire applicazioni in ambienti isolati chiamati container.

Grazie a questa tecnologia, è possibile impacchettare le applicazioni web con tutte le dipendenze necessarie e garantire distribuzioni coerenti in ambienti diversi.

Il deploy di un’applicazione su Back4app Containers è molto semplice. È necessario creare un file Docker nella root dell’applicazione che descriva il confezionamento e l’esecuzione dell’applicazione.

Quindi, si esegue il push dell’applicazione sul proprio repository GitHub. Da questo passaggio, Back4app costruisce l’immagine Docker ed esegue il contenitore.

Ecco alcuni dei vantaggi dell’utilizzo di Back4App Containers:

• Migliori prestazioni: I container sono leggeri ed efficienti e consentono di migliorare le prestazioni delle applicazioni.

• Maggiore sicurezza: I contenitori sono isolati l’uno dall’altro, il che può contribuire a migliorare la sicurezza.

• Distribuzione e scalabilità semplificate: I container possono essere scalati facilmente, risparmiando tempo e denaro.

Costruire l’applicazione Vue

In questa esercitazione si costruirà una semplice applicazione Vue che suggerisce agli utenti le attività da svolgere nel tempo libero.

L’applicazione Vue consumerà un’API per eseguire questa azione. Quindi, si distribuirà l’applicazione Vue nei contenitori Back4app

Per iniziare a costruire l’applicazione Vue, eseguire il seguente comando nella cartella preferita:

npm create vue@latest

L’esecuzione di questo codice genera un prompt che consente di dare un nome all’applicazione Vue e di selezionare le funzionalità che si desidera integrare nell’applicazione.

Per questa applicazione, si utilizzerà solo la funzione Vue Router. Dopo aver selezionato questa funzione, si deve andare nella cartella dell’applicazione ed eseguire npm install per scaricare e installare le dipendenze dell’applicazione.

Per creare questa applicazione, è necessario installare tre pacchetti npm aggiuntivi: axios, sass e @iconify/vue.

Axios è una libreria JavaScript che semplifica l’esecuzione di richieste HTTP, consentendo di recuperare facilmente i dati dall’API.

Sass è un preprocessore CSS che verrà utilizzato per lo stile dell’applicazione. Utilizzerete il pacchetto @iconify/vue per integrare icone vettoriali scalabili nella vostra applicazione.

Per installare questi tre pacchetti, eseguire il comando seguente nella directory principale dell’applicazione:

npm install axios sass @iconify/vue

Una volta installati questi pacchetti, è possibile aprire la directory corrente in Visual Studio Code eseguendo il seguente comando:

code .

Creare due componenti nella directory views dell’applicazione: HomeView e AboutView. Quindi, gestire il routing di questi due componenti aggiungendo il blocco di codice sotto il file index.js nella cartella router:

// index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

Il file index nella cartella router gestisce l’instradamento dell’applicazione web Vue. Qui vengono definite due rotte: HomeView e AboutVue.

Per consentire agli utenti dell’applicazione di navigare tra questi due percorsi, creare un’intestazione con questi percorsi nel file App.vue:

<!-- App.vue -->
<script setup>
import { RouterLink, RouterView } from 'vue-router'

</script>

<template>
  <header>
  <h1> Unbored </h1>

  <nav>
    <RouterLink to="/" class="link"><button>Home</button></RouterLink>
    <RouterLink to="/about" class="link"><button>about</button></RouterLink>
  </nav>
  </header>

  <RouterView />
</template>

<style lang="scss" scoped>
header{  
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;

    nav{
      display: flex;
      gap: 1rem;

      .link{
        text-decoration: none;
        color: inherit;
      }
    }

  }
</style>

Nel file App.vue sono stati importati i componenti RouterLink e RouterView dal pacchetto vue-router.

Il componente RouterLink collega i pulsanti alle rispettive rotte, mentre il componente RouterView visualizza il contenuto della rotta. Nel blocco di stile è stato anche creato lo stile dell’intestazione.

Dopo aver gestito i percorsi, costruire il componente HomeView dell’applicazione. Il componente HomeView deve visualizzare una nuova attività che l’utente dell’applicazione può eseguire quando viene annoiato da ogni clic del pulsante. A tale scopo, copiare il codice seguente nel componente HomeView:

<!-- HomeView.vue -->
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { Icon } from '@iconify/vue';

const activity = ref('');

const fetchActivity = async () => {
    try {
    const response = await axios.get('<https://www.boredapi.com/api/activity>');
    activity.value = response.data.activity
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

</script>

<template>
    <div>
        <h1>Tired of feeling bored. </h1>
        <p>Click on the button below to get an activity you can do.</p>
        <button @click="fetchActivity"> Get Activity</button>
        <Icon icon="system-uicons:arrow-down" />
        <h2> {{ activity }}</h2>
    </div>
</template>

<style lang="scss" scoped>

  div{
    display: flex;
    flex-direction: column;
    margin-block-start: 6rem;
    align-items: center;
    gap: 2rem;

    h1{
      text-transform: uppercase;
      letter-spacing: 0.5rem;
    }
  }
</style>

Il blocco di codice precedente illustra i dettagli del componente HomeView. Nel componente HomeView sono state importate le funzioni ref e axios dai rispettivi pacchetti. Il componente è stato anche personalizzato nel blocco di stile.

La variabile activity è un riferimento reattivo per memorizzare i dati dell’attività recuperati. La funzione fetchActivity recupera in modo asincrono i dati dall’endpoint API specificato“https://www.boredapi.com/api/activity” con axios e aggiorna il valore dell’attività quando l’utente dell’applicazione fa clic sul pulsante Ottieni attività.

Per spiegare agli utenti dell’applicazione di cosa si tratta, copiate e incollate il seguente codice nel componente AboutView:

<!-- AboutView.vue -->
<template>
  <div class="about">
    <h3>About Unbored</h3>
    <p>The Unbored App suggests activities you could perform instead of staying bored all day</p>
  </div>
</template>

<style lang="scss" scoped>

  h3{
    margin-block-start: 4rem;
    margin-block-end: 3rem;
  }
</style>

Per creare lo stile del corpo dell’APP Vue, creare un file main.css nella cartella assets e aggiungere il codice seguente:

/* main.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 50%;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
}

button{
    border: none;
    padding: 0.5rem 0.8rem;
    background-color: inherit;
    font-family: 'Montserrat', sans-serif;
    font-size: small;
    font-weight: bold;
    color: #333333;
    border-radius: 12px;
}

button:hover{
    color: #e2e2e2;
    background-color: #333333;
  }

Ecco fatto! Per visualizzare l’anteprima dell’applicazione Vue, eseguire il seguente comando nella directory dell’applicazione:

npm run dev

L’applicazione dovrebbe assomigliare all’immagine seguente.

Distribuzione di applicazioni Vue con i contenitori Back4app:

Questa è una guida passo passo su come distribuire la propria applicazione Vue. Per prima cosa, è necessario dockerizzarla. La dockerizzazione di un’applicazione richiede la creazione di un file Docker, che contiene tutte le istruzioni che il Docker Engine deve eseguire per costruire l’immagine.

Quindi, si testerà l’applicazione in locale per assicurarsi che tutto funzioni perfettamente prima di distribuirla sui container Back4app.

Dockerizzare l’applicazione Vue

Per dockerizzare l’applicazione Vue, è necessario creare un Dockerfile nella directory principale dell’applicazione Vue. Un Dockerfile è uno schema che il Docker Engine utilizza per creare un contenitore Docker con tutte le dipendenze e le configurazioni necessarie.

Il Dockerfile definisce l’immagine di base, imposta la directory di lavoro, copia i file nel contenitore, installa le dipendenze, configura l’ambiente di esecuzione e specifica i comandi da eseguire quando il contenitore viene lanciato.

Per comprendere meglio la tecnologia Docker, potete leggere questo riferimento al Dockerfile.

Per iniziare la dockerizzazione dell’applicazione Vue, creare un file Docker nella cartella principale e copiarvi il codice seguente:

# Dockerfile
FROM node:18

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:1.19.0-alpine

COPY --from=0 /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Il file Docker esegue le seguenti azioni:

• Il file Docker utilizza l’immagine di base node:18, che fornisce l’ambiente di runtime Node.js.

• Imposta la directory di lavoro all’interno del contenitore a /app.

• Copia i file package.json e package-lock.json nella directory di lavoro.

• Installa le dipendenze con il comando npm install.

• Copia l’intero codice dell’applicazione nella directory di lavoro.

• Costruisce l’applicazione eseguendo il comando npm run build.

• Il file Docker utilizza quindi l’immagine di base nginx:1.19.0-alpine, che fornisce il server web NGINX.

• Copia i file statici costruiti nella fase precedente nella cartella /usr/share/nginx/html dell’immagine NGINX.

• Espone la porta 80 per consentire il traffico HTTP in entrata.

• Esegue il server NGINX con la configurazione specificata "nginx", "-g", "daemon off;" usando l’istruzione CMD.

Costruire e testare l’applicazione Vue in Dockerizzazione

Prima di distribuire le immagini nel cloud, è possibile testare l’applicazione Docker in locale. Per testare l’applicazione, costruirla eseguendo il seguente comando:

docker build -t bored .

Dopo il processo di compilazione, è possibile eseguire il seguente comando per avviare il contenitore Docker in locale:

docker run -p 8080:80 bored

L’opzione -p 8080:80 specifica la mappatura delle porte tra l’host e il contenitore. La porta 8080 dell’host viene mappata sulla porta 80 del contenitore.

A questo punto, l’applicazione è in esecuzione in un contenitore locale. Si può quindi navigare su http://localhost:8080 per visualizzare l’applicazione.

Distribuzione dell’applicazione nei contenitori Back4app

Prima di distribuire l’applicazione su Back4app Containers, è necessario eseguire il push dell’applicazione su un repository GitHub. Potete imparare a farlo seguendo questi passaggi nella documentazione di GitHub.

Dopo aver inviato il codice sorgente a Github, è necessario creare un account Back4app. Per creare un account su Back4app, seguite questi passaggi:

• Visitate ilsito web ufficiale di Back4app .

• Individuare e fare clic sul pulsante Iscriviti nell’angolo in alto a destra della pagina di destinazione.

• Compilate il modulo di iscrizione con i dati necessari.

• Inviate il modulo per completare il processo di iscrizione.

Una volta creato il proprio account Back4app, accedere utilizzando le proprie credenziali. Quindi, individuate il pulsante NUOVA APP situato nell’angolo in alto a destra della vostra Dashboard.

Facendo clic sul pulsante NEW APP, si verrà reindirizzati a una pagina in cui si potrà scegliere il metodo di distribuzione dell’applicazione. Poiché si intende distribuire un contenitore, scegliere l’opzione Containers as a Service.

Dopo aver fatto clic sull’opzione Containers as a Service, collegare il repository GitHub dell’applicazione e fare clic su Select per distribuire l’applicazione.

Facendo clic sul pulsante Seleziona, si viene indirizzati a una pagina in cui è possibile fornire informazioni essenziali sull’applicazione. Queste includono il nome dell’applicazione, il ramo, la directory principale e le variabili ambientali.

Assicurarsi di compilare tutte le variabili d’ambiente necessarie per l’applicazione. Una volta completati i campi richiesti, fare clic sul pulsante Crea applicazione.

Facendo clic su questo pulsante, si avvia il processo di distribuzione dell’applicazione Vue, avviando le fasi necessarie per rendere disponibile l’applicazione. Sarà possibile seguire l’avanzamento della distribuzione, come illustrato nell’immagine seguente.

Conclusione

Vue è uno dei migliori framework JavaScript open-source per lo sviluppo front-end. Offre un approccio intuitivo alla costruzione di interfacce utente con caratteristiche come il data binding reattivo e un’architettura basata su componenti.

In questo articolo abbiamo imparato a costruire e distribuire un’applicazione Vue con i container Back4app. Il deploy delle applicazioni su Back4app aiuta a semplificare la complessa gestione dell’infrastruttura di back-end, poiché Back4app offre strumenti per gestire i dati, scalare e monitorare le prestazioni di un’applicazione.

FAQ