Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development
Code

Introduzione di Vue e Weex per le applicazioni mobile native

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

Vue è un framework JavaScript molto popolare per le applicazioni web con semplice binding tra i dati in memoria e dell'interfaccia utente. Adesso Weex ci permette di scrivere il codice nativo per le applicazioni mobile usando il framework Vue!

Perché usiamo Vue e altri framework data binding come Angular e React? Cosa hanno di speciale? Li usiamo per assicurarci che i dati dell'applicazione che sono memorizzati in memoria, rimangano sincronizzati con l'interfaccia utente e viceversa. 

Usiamo anche questi framework per essere in grado di creare applicazioni molto velocemente, e in un modo che è ottimizzato per la prestazione.

In questo tutorial ti mostrerò come usare il framework Vue, in particolare come capire il suo concetto di data binding e template. Poi, andrò avanti introducendo la piattaforma Weex per scrivere codice nativo per le applicazioni mobile usando Vue!

Data Binding

Diamo un'occhiata a questo semplice esempio per capire come questi framework possono salvarci il tempo. Quello che vogliamo è semplicemente un campo di input che rimane sincronizzato con i dati della nostra applicazione. La nostra applicazione può cambiare i dati a livello di codice, e l'utente può cambiarli dall'input utente, quindi, abbiamo bisogno di guardare sia l'interfaccia utente che i dati dell'applicazione. 

Two way data binding

Scrivere il codice che supporterebbe questo data binding sarebbe molto lungo. Avremmo bisogno di creare dei listener di eventi, oggetti proxy e osservabili per catturare ogni cambiamento nei dati dell'applicazione. E queste complessità crescono e crescono in base ai tipi di dati e di input che vengono aggiunti. Vue e altri framework di data binding, ci vengono in aiuto dallo scrivere tutto questo codice di binding.

Con Vue, se il nostro utente cambia qualche dato in input, sincronizzerà i dati dell'applicazione come questo esempio:

Changes flowing from the UI to the model

O se cambiano i dati dell'applicazione, aggiornerà l'interfaccia utente così:

Changes flowing from the model to the UI

Quando manteniamo l'interfaccia utente e i dati dell'applicazione sincronizzati assieme, significa che la nostra applicazione fa esattamente cosa ci aspettiamo di fare. Vue gestirà tutto ciò e permette agli altri potenti processi di data binding di verificarsi.

Come impostare

Adesso che sappiamo perché usiamo questi framework, procediamo ad impostare una semplice applicazione Vue per eseguire alcuni esempi. Crea un nuovo file HTML dove vuoi nel tuo PC e incolla il seguente codice all'interno:

Questo è un semplice file HTML che è collegato alla libreria Vue JS. Contiene un elemento div con l'ID di app. All'interno dei tag script abbiamo una variabile chiamata app che usiamo per puntare alla nostra vista - Spiegherà questa parte più tardi.

Poi creiamo una nuova istanza Vue, o "vista". Questo costruttore dice al framework quale elemento conterrà la nostra interfaccia utente dell'applicazione e la mantiene sincronizzata con i dati dell'applicazione.

Adesso doppio clic sul file HTML per aprirlo nel browser, e apri la finestra console del browser.

The browser console in Chrome

Interpolazione del testo

L'interpolazione del testo ci permette di incorporare espressioni nel nostro codice HTML che saranno interpretati quando la pagina viene processata. Le espressioni sono live quindi, se i dati da cui loro dipendono sono cambiati, la pagina sarà aggiornata in tempo reale. Questo è conosciuto come rendering dichiarativo, che ci permette di posizionare espressioni ovunque insieme al contenuto di un elemento. Andiamo a vedere con un semplice esempio.

JS

Il nostro codice JavaScript ora contiene un oggetto data che salverà tutti i dati della nostra applicazione per questa vista. Insieme, ho creato la proprietà message con la stringa "Hello world".

Quindi, andiamo a mostrare questa proprietà nel HTML.

HTML

Le espressioni sono indicate con la sintassi doppia graffa. Vue JS gestisce le dipendenze di ogni espressione e aggiorna la pagina in tempo reale se loro cambiano. Nel nostro caso, abbiamo due espressioni, con la proprietà message come dipendenza di ognuno. La prima espressione {{ message }} mostra solamente la proprietà message. La seconda espressione {{ message.split('').reverse().join('') }} prende la proprietà message, e poi:

  • Divide la stringa in un array:
    [ "h","e","l","l","o"," ","w","o","r","l","d" ]
  • Rovescia l'ordine dell'array:
    [ "d","l","r","o","w"," ","o","l","l","e","h" ]
  • Unisce l'array insieme per avere "dlrow olleh", che è lo stesso messaggio ma stampato al rovescio.

Adesso apri il browser e aggiorna la pagina HTML. Poi apri la finestra console del browser e assegna ad app.message un nuovo valore e guarda come l'output viene aggiornato nel browser.

Simple Vue template example

Puoi anche usare la matematica nelle espressioni del template o dati strutturati in oggetti. In realtà, come avrai immaginato, le espressioni di Vue sono solamente JavaScript. L'accesso alle variabili globali è limitato, anche se, puoi accedere a Math, ma non a window. Questo ti aiuta a mantenere le tue applicazioni sicure - così come per i tuoi utenti.

Usando Vue con solo alcune linee di codice, possiamo avere un avanzato data binding a doppio verso. Questo assicura che l'interfaccia utente e i dati dell'applicazione sono sincronizzati con relativa facilità.

Direttive

Le direttive sono un altro modo per fare il data binding nelle nostre viste. Possiamo usarle per fare dei bind dei dati agli attributi, eventi, campi di input e dati ripetitivi. Procediamo attraverso ogni direttiva e scopriamo come funzionano.

  • v-bind: bind di un valore attributo
  • v-model: bind dati applicazione verso un elemento input come textarea
  • v-on: definisce un gestore evento
  • v-for: bind per un array o oggetto

Direttiva v-bind

La direttiva v-bind è usata per il data binding di un attributo. Ci permette di fare un bind dei dati dell'applicazione ad un valore di un attributo. Pensa come interpolazione del testo ma con un attributo. Puoi fare un bind a class, id, value o qualsiasi altro attributo con la direttiva v-bind.

Per questo esempio, vorrei fare bind dei nostri dati dell'applicazione all'attributo data-attr usando la direttiva v-bind, v-bind:data-attr.

JS

HTML

Nell'esempio sopra, abbiamo legato un attributo chiamato data-attr a delle serie di diversi sorgenti dati. Prima, abbiamo lo abbiamo legato alle proprietà type e names di object. Poi lo abbiamo legato ad un'espressione matematica e poi, unito tutti i binding in un singolo array attributo.

Dai un'occhiata all'output nel browser: puoi fare clic sulla scheda Elementi per vedere l'output di ogni valore dell'attributo.

Binding attribute values

Di nuovo, puoi cambiare i dati dell'applicazione nella console per vedere il processo di data binding.

Changes to the model are rendered automatically

Pensa la direttiva v-bind come se stessi consentendo le espressioni nei valori degli attributi. Questo è incredibilmente potente e facile da stabilire con la libreria Vue.

Direttiva v-model

Questa direttiva è usata specificamente per mantenere i dati dell'applicazione in sincronizzazione con i campi di input, aree di testo ed elementi di selezione. Ecco un esempio:

JS

HTML

Per la prima sezione di questa pagina, abbiamo un campo di testo in input e un area di testo, entrambi hanno una direttiva v-model che mantiene questi campi di input sincronizzati con la proprietà message, usando v-model="message". In questo modo, se cambi uno a scelta, il modello sarà aggiornato e poi l'altro campo input sarà aggiornato. Vai avanti e prova!

Binding to input elements

Nella prossima sezione abbiamo una tendina sincronizzata alla proprietà selected con v-model="selected". In questo modo, se la selezione è cambiata, il nostro modello sarà aggiornato.

Infine, abbiamo una selezione multipla. Ti ho mostrato come fare ciò in due modi: con selezione a scelta multipla e con molteplici select input. Visto che possiamo avere molteplici valori, ho creato l'array checkedNames che può salvare molteplici valori. I molteplici input select e le caselle a scelta multipla hanno la direttiva v-model che puntano alla proprietà checkNames. Fai una prova, e dovrebbero rimanere sincronizzati così come fai delle selezioni.

Multiple selection binding

La direttiva v-on

Questa direttiva ci permette di attaccare eventi agli elementi HTML. Questa direttiva può essere usata su elementi specifici che possono avere eventi attaccati alle azioni di un input come hovering, clic, testo input, tasti premuti, e altro. Per questo esempio, andremo a creare un semplice bottone con un evento clic.

JS

HTML

Nella direttiva v-on, dopo i due punti, specifichiamo l'evento che vogliamo attaccare. In questo esempio, quando l'evento click è lanciato, eseguiremo alcune espressioni. Per prima cosa, apriamo un alert box di dialogo, e poi cambiamo il valore della proprietà clicked. Nota che puoi chiamare le funzioni nelle espressioni v-on.

A button with a click event

Direttiva v-for

Questa direttiva è una delle più potenti di tutte. Possiamo guardare qualsiasi oggetto o array per i cambiamenti e processare ripetutamente una parte del nostro codice template per ogni proprietà o elemento trovato in questo oggetto o array. Per esempio, per processare un array di nomi come una lista:

JS

HTML

In questo esempio, attacchiamo prima la direttiva v-for all'interno dell'elemento che vuoi ripetere. Il valore della direttiva specifica l'oggetto o l'array che vogliamo iterare sui (names - nomi) così come una variabile che contiene il valore per ogni iterazione (name - nome). Adesso, insieme questo elemento ripetitivo, possiamo usare la variabile name nell'espressione.

Se poi modifichiamo l'array, per esempio con un metodo come push, sort o reverse, i dati del template saranno automaticamente aggiornati. Prova ad eseguire l'esempio e modifica l'array nella finestra console.

Rendering a list of elements with the v-for directive

Componenti

Il processo data binding avviene nelle viste. I componenti sono soltanto delle viste riusabili che possiamo ripetere in tutta la nostra applicazione. Ogni componente deve avere qualche dato template da essere processato come parte dell'interfaccia utente e qualche dato per l'applicazione. Puoi opzionalmente includere qualche stile se vuoi.

Usiamo la direttiva v-for di nuovo per mostrare gli elementi di una lista. Ma questa volta, faremo ogni elemento un componente. Daremo a questo componente un nome così che possiamo individuarlo insieme al nostro codice del template: list-item. I componenti possono avere anche "proprietà registrate", in cui possiamo assegnare un valore da essere poi assegnato quando creiamo il componente. Nel mio caso, il componente list-item si aspetta di ricevere un valore per la proprietà name, definita con props: ["name"].

Andiamo ora a creare questo componente. Per favore aggiungi il seguente codice dentro i tuoi tag script:

JS

Assicurati anche di avere i seguenti dati dell'applicazione:

HTML

Ecco puoi vedere il componente list-item che sarà ripetuto per ogni nome trovato nell'array. Ogni nome sarà assegnato alla variabile name che è definita nella direttiva v-for. Andremo a passare la proprietà name al componente usando v-bind.

Ogni istanza è soltanto una copia del componente. Possiamo modificare ogni copia o istanza indipendentemente da un'altra. Quindi pensa ogni componente come un progetto e le istanze come copie fatte dal progetto, Ecco il risultato finale:

List rendered with components

Compilazione e il Vue CLI

Abbiamo lavorato con un file HTML davvero semplice e permesso a Vue di interpretare qualsiasi cosa durante l'esecuzione. Comunque, Vue è rilasciato insieme ad uno strumento a linea di comando. Forse ti staresti chiedendo perché. Una ragione è che le pagine di template pre-compilate si comportano meglio dei template che Vue deve interpretare durante l'esecuzione. Un'altra ragione è che, se dovevamo costruire una applicazione su larga scala e provare ad inserire il tutto in un file HTML, sarebbe diventato subito ingestibile.

Quindi abbiamo bisogno di modularità per suddividere una larga applicazione in piccoli pezzi.

Installare il Vue CLI

Per usare la linea di comando, hai bisogno di aprire la finestra console del tuo sistema operativo.

  • Per il Mac, premi Command-Space e poi digita terminale e premi Invio.
  • Per Windows, cerca per prompt dei comandi nel menù di avvio, assicurati di fare tasto destro e "apri come amministratore".
  • Per Linux, premi Control-Alt-T.

Prima di procedere, assicurati di avere l'ultima versione di Node.js installata. Poi abbiamo bisogno di installare Webpack, che comprimerà la dimensione dei file del nostro progetto, rendendolo veloce nel nostro browser. Poi possiamo installare il Vue CLI ed eseguire i comandi rilevanti per la tua piattaforma:

Mac & Linux

  • sudo npm install -g webpack
  • sudo npm install -g vue-cli

Windows (assicurati di eseguire la console come amministratore)

  • npm install -g webpack
  • npm install -g vue-cli

Questo è tutto! Siamo ora pronti per cominciare ad installare il nostro avanzato progetto Webpack. Prima di tutto, vai nella cartella dove vogliamo creare il nostro progetto, nel mio caso il desktop, e poi crea il progetto. Puoi sostituire myapp con qualsiasi nome che vorrai per il progetto.

  • vue init webpack myapp

Sarai guidato attraverso una serie di domande riguardanti il tuo progetto, chiesto di inserire dei dati come titolo e descrizione e chiesto se installare plugin di terze parti. Per questo esempio, puoi rispondere no a tutti gli extra facoltativi. Una volta creato, abbiamo bisogno di installare le dipendenze quindi, vai nella cartella del progetto e, eseguiamo il comando install.

  • cd myapp
  • npm install

Permettiamo a NPM di installare tutti i pacchetti delle dipendenze e poi, siamo pronti per andare avanti.

Creare un progetto Vue

Una volta che i pacchetti sono stati installati, possiamo poi eseguire il server di sviluppo scrivendo npm run dev. La finestra del tuo browser dovrebbe aprirsi, mostrando la seguente pagina.

The Vue starter project welcome screen

Non andremo attraverso la struttura dell'intero progetto ma, quando apri la cartella myapp vedrai la cartella src. Contiene un file App.vue, un file main.js e, nella cartella components, il file Hello.vue.

I file Vue sono componenti. Il file main.js configura la vista iniziale e potenzialmente anche altre configurazioni. Diamo un'occhiata ai file App.vue e Hello.vue.

The vue files from the Vue starter project

Qui puoi vedere ogni componente Vue suddiviso in tre parti:

  • <template>: il markup HTML che crea la parte dell'interfaccia utente.
  • <script>: dati dell'applicazione, filtri, metodi, proprietà calcolate, watchers e metodi.
  • <style>: lo stile CSS o Sass dei nostri componenti:

Compilazione

Compilare tutti i componenti assieme produrrà un'applicazione su larga scala. Questo significa che quando stiamo sviluppando, lavoriamo su piccoli pezzi di codice modulari, chiamati componenti, invece che di un'intera applicazione. In Vue abbiamo componenti su singolo file che contiene il JavaScript, HTML, e CSS. Si prenderà cura anche di trascrivere ES6 a ES5, Sass a CSS e Jade a HTML se scegli di usare questi linguaggi.

Avrai notato che nel file App.vue, ho evidenziato dove importa il componente Hello.vue. I componenti possono essere annidati all'interno di altri componenti!

Quando compila, il nostro progetto è costruito con il seguente processo:

Vue build process

Andremo ad usare la stessa sintassi come gli esempi precedenti. Tuttavia, stiamo adesso lavorando con file Vue più piccoli e compilandoli insieme. Abbiamo anche alcune caratteristiche aggiuntive come preprocessori e Jade, Sass, ES6 e compressione Webpack.

Weex

Adesso che abbiamo capito la libreria Vue, diamo un'occhiata veloce per vedere come possiamo prendere la nostra applicazione web e convertirla in un'applicazione mobile nativa, installabile su iOS o Android.

Weex è un framework ibrido, significa che permette di avere diverse tecnologie, così come una macchina ibrida che può usare sia l'elettrico che il petrolio. Nel nostro caso, usiamo il codice JavaScript dalla nostra applicazione web, ma dobbiamo processare ad un'interfaccia utente nativa. Inoltre, dal JavaScript possiamo accedere alle API native del dispositivo per accedere all'hardware come camera, sensori, e file system.

Parts of a Weex app

Con Weex, invece di processare la nostra applicazione in HTML, usiamo XML. In realtà, HTML e XML sono molto simili quindi la sintassi sarà familiare. Questo XML sarà poi convertito a componenti nativi. Adesso il nostro JavaScript sarà in grado di parlare con quei componenti nativi come se stesse parlando al DOM in Vue con HTML. Non solo questo, ma i componenti nativi possono essere stilizzati e posizionati con il CSS includendo animazioni, transizioni e altro, e possono essere integrati con il livello nativo.

Questo è soltanto un'anteprima di cosa può fare Weex. Nei prossimi tutorial, ti poterò un po' più in profondità con Weex e, vedremo come costruire alcune applicazioni native multi-piattaforma.

Vantaggi

Vue ha una sintassi semplice e sta aumentato in popolarità davvero velocemente. Weex ci permette di creare applicazioni mobile usando JavaScript e Vue, ma fornisce una esperienza nativa all'applicazione.

Svantaggi

Vue è stabile, ma Weex è ancora in sviluppo - attualmente risiede nell'incubatore di Apache. Ma non preoccuparti, Weex sarà presto pronto per essere in produzione, ed è supportato dal gigante tech Alibaba. Quindi, se sviluppare su un'anteprima per sviluppatori ti riguarda, dovrai aspettare fino a quando Weex raggiunge il pieno rilascio.

Conclusione

Ora hai visto come il data binding è la ragione chiave per usare Vue o framework simili. Ci salva il tempo di sviluppo e fornisce una via standard per costruire le applicazioni. Hai anche visto come usare l'interpolazione del testo, direttive ed eventi in Vue, e come queste caratteristiche funzionano assieme per mantenere i dati dell'applicazioni sincronizzati con l'interfaccia utente.

Abbiamo cominciato con un progetto base con soltanto una vista. Ma poi abbiamo creato un progetto più avanzato che ha viste più piccole e modulari chiamate componenti. I componenti ci permettono di rompere il progetto in codice più facile da scrivere e mantenere. Poi, abbiamo visto come usare il compilatore di Vue per la trascrizione di ES6, Jade, e Sass in linguaggi standard, mentre si comprime la dimensione del file al minimo.

Tutta questa conoscenza ti aiuterà quando cominci a programmare con Weex. Weex ci permette di prendere la nostra applicazione web con Vue e trasformarla in un'applicazione mobile. Weex è leggermente differente - usiamo XML con componenti speciali, invece di HTML - ma possiamo usare le altre tecnologie web, come CSS e JavaScript. Questo significa che non dobbiamo cambiare la logica della nostra applicazione da applicazione web ad applicazione mobile.

Rimani aggiornato per il mio prossimo post sullo sviluppo con Weex, e nel frattempo, dai un'occhiata ad alcuni di altri post sullo sviluppo di applicazioni mobile con tecnologie web.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.