Share
Le applicazioni web a pagina singola - o SPA, come vengono comunemente chiamate - stanno rapidamente diventando lo standard di fatto per lo sviluppo di app Web. Il fatto che una parte importante dell'app si trovi all'interno di una singola pagina web lo rende molto interessante e accattivante, e la crescita accelerata delle funzionalità del browser ci spinge più vicino al giorno, quando tutte le app vengono eseguite interamente nel browser.
Tecnicamente, la maggior parte delle pagine Web sono già SPA; è la complessità di una pagina che differenzia un pagina web da un app web. A mio parere, una pagina diventa un'app quando si incorporano flussi di lavoro, operazioni CRUD e gestione dello stato attorno a determinate attività. Stai lavorando con una SPA quando ognuna di queste attività si svolge nella stessa pagina (utilizzando AJAX per la comunicazione client / server, ovviamente).
Iniziamo con questa comprensione comune e ci immergiamo in alcune delle cose più importanti che dovrebbero essere considerate quando si costruiscono le SPA.
Ci sono numerosi punti da considerare prima di costruire una nuova app; a peggiorare le cose, il vasto panorama di sviluppo web può intimidire sin dall'inizio. Sono stato in quelle scarpe inquietanti, ma fortunatamente, negli ultimi anni ho portato un consenso sugli strumenti e le tecniche che rendono l'esperienza di sviluppo delle applicazioni il più piacevole e produttiva possibile.
La maggior parte delle app consiste di parti client e lato server; sebbene questo articolo si concentri principalmente sulla parte client di un'app, fornirò alcuni puntatori sul lato server verso la fine di questo articolo.
C'è un mix colorato di tecnologie sul lato client, oltre a numerose librerie e pratiche che consentono un'esperienza di sviluppo app produttiva. Questo può essere riassunto, usando la seguente nuvola di parole.
Espanderò su ciascuno dei punti sopra nelle seguenti sezioni.
Ci sono un'abbondanza di quadri tra cui scegliere. Ecco solo alcuni dei più popolari:
Scegliere un framework è facilmente una delle scelte più importanti che farai per la tua app. Certamente, ti consigliamo di scegliere la struttura migliore per il tuo team e la tua app. Ciascuno dei suddetti framework incorpora il modello di progettazione MVC (in una forma o nell'altra). Come tale, è abbastanza comune riferirsi a loro come quadri MVC. Se dovessimo ordinare questi quadri su una scala di complessità, curva di apprendimento e set di caratteristiche, da sinistra a destra, potrebbe sembrare:
Benché dissimili nella loro implementazione e livello di sofisticazione, tutti i suddetti framework forniscono alcune astrazioni comuni, come ad esempio:
Solo guardando gli ultimi cinque anni, c'è stata una crescita esplosiva in biblioteche, strumenti e pratiche.
I framework più avanzati, come CanJS, BatmanJS, EmberJS e AngularJS, ampliano queste funzionalità di base fornendo supporto per l'associazione automatica dei dati e modelli client-side. I modelli sono associati ai dati e mantengono la vista sincronizzata con le eventuali modifiche al modello. Se decidi di scegliere un framework avanzato, otterrai sicuramente molte funzionalità pronte all'uso, ma ti aspetti anche che tu possa costruire la tua app in un certo modo.
Di tutti i framework precedentemente elencati, Meteor è l'unico framework full-stack. Fornisce strumenti non solo per lo sviluppo lato client, ma fornisce anche un pezzo lato server, tramite NodeJS e la sincronizzazione del modello end-to-end, tramite MongoDB. Ciò significa che, quando si salva un modello sul client, esso persiste automaticamente in MongoDB. Questa è un'opzione fantastica, se si esegue un back-end Node e si usa MongoDB per la persistenza.
In base alla complessità della tua app, dovresti scegliere il framework che ti rende più produttivo. Sicuramente ci sarà una curva di apprendimento, ma si tratta di un pagamento una tantum che si paga per lo sviluppo della corsia di sorpasso. Assicurati di ritagliarsi un po 'di tempo per valutare questi quadri, sulla base di un caso d'uso rappresentativo.
Nota: Se vuoi saperne di più su questi framework dai loro creatori, ascolta questi video da ThroneJS.
I più popolari sistemi di template basati su JavaScript sono modelli Underscore e Handlebars.
Alcuni dei framework avanzati della sezione precedente offrono sistemi di template integrati.
Ad esempio, EmberJS ha il supporto integrato per Handlebars. Tuttavia, devi prendere in considerazione un motore di template se decidi di utilizzare un framework snello, come Backbone. Underscore è un ottimo punto di partenza, se hai dei requisiti limitati per i template. Altrimenti, Handlebars funziona alla grande per progetti più avanzati. Offre anche molte funzionalità integrate per modelli più espressivi.
Se si rileva la necessità di un numero elevato di modelli lato client, è possibile risparmiare tempo computazionale pre-compilando i modelli sul server. La pre-compilazione ti offre le semplici funzioni JavaScript che invochi per migliorare il tempo di caricamento della pagina. I manubri supportano la pre-compilazione, facendo valere tempo e sforzi per esplorare completamente.
Gli utenti ExpressJS possono persino utilizzare lo stesso motore di templating sul client come sul server, offrendo il vantaggio di condividere i modelli tra client e server.
L'utilizzo di un preprocessore richiede un ulteriore passaggio nel processo di compilazione.
Il codice JavaScript è tradizionalmente aggiunto alla pagina, tramite il >
Accentsconagua