In questo articolo, ti guiderò attraverso alcuni concetti fondamentali per la creazione di applicazioni a pagina singola (SPA) e alcuni esempi di applicazione a pagina singola creati utilizzando Syncfusion Essential JS 2 components.
Che cos’è l’applicazione a pagina singola (SPA)?,
Un’applicazione a pagina singola (SPA) è un’applicazione Web in cui una singola pagina di visualizzazione radice verrà caricata dal server e quindi, in base all’interazione dell’utente, l’applicazione aggiornerà dinamicamente il contenuto sul lato client senza ricaricare la pagina.
Le SPA sono più fluide e reattive rispetto alle applicazioni multipagina convenzionali e sono più adatte per la creazione di SaaS (Software as a Service), dashboard aziendali e altre applicazioni Web basate su moduli.,
Ciclo di vita di SPA
Esistono più framework per costruire una SPA, ma il concetto di SPA in ogni framework rimane lo stesso. Recupera l’intera interfaccia utente o vista lato client dal server durante il caricamento iniziale. Quindi, in base alle interazioni dell’utente o alla navigazione attraverso l’applicazione, l’interfaccia utente verrà aggiornata dinamicamente sul lato client.
SPA utilizza la larghezza di banda minima per contattare il server per aggiornare i dati dalle interazioni dell’utente e per recuperare i dati aggiornati mentre si aggiorna la pagina Web.,
Fonte immagine:https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
I vantaggi di SPA
Le applicazioni a pagina singola sono più fluide e reattive rispetto alle applicazioni multipagina. A causa di ciò, queste applicazioni sono anche adatte per i dispositivi mobili, senza la necessità di creare un’applicazione mobile nativa separata.
SPA supporta ricche interazioni con più componenti, come editor e pop-up, nella pagina Visualizza. Questi componenti possono avere stati intermedi che possono essere più difficili da implementare con il rendering lato server.,
A parte il caricamento iniziale della pagina, SPA utilizza meno larghezza di banda per l’aggiornamento dell’interfaccia utente. Non ci sono aggiornamenti di pagina mentre un utente naviga l’applicazione, rendendo l’applicazione più comoda da usare nei dispositivi mobili.
Poiché il livello vista e il livello dati vengono mantenuti separatamente nella SPA, sarà molto più semplice distribuirli in produzione.
Concetti importanti di SPA
Routing
In SPA, tutti i contenuti sono mantenuti con URL separati e si può navigare a diversi contenuti rapidamente utilizzando questi URL.,
Le applicazioni a pagina singola mantengono lo stato utilizzando gli URL o gli stati di traccia internamente mentre un utente naviga attraverso l’applicazione.
Il caso d’uso principale con il routing delle pagine in SPA è quando una persona condivide l’URL. Quella persona può essere sicura che chiunque apra quel link vedrà esattamente lo stesso contenuto navigando verso l’URL esatto nell’applicazione.
Associazione e sincronizzazione dei dati
SPA utilizza una larghezza di banda minima per contattare il server per il recupero dei dati o per l’aggiornamento del modello di dati dopo l’interazione dell’utente nell’applicazione.,
Mentre un utente naviga attraverso l’applicazione, il modello di dati nel server verrà aggiornato simultaneamente utilizzando una richiesta HTTP asincrona (AJAX).
In base alle interazioni dell’utente, i dati vengono aggiornati al modello di dati nel server. E queste modifiche ai dati vengono aggiornate all’interfaccia utente contemporaneamente, rendendo così l’utente sempre in grado di visualizzare una pagina Web aggiornata senza aggiornarla.
Tempo di risposta veloce e fluido
SPA è noto per le loro risposte veloci e senza soluzione di continuità per l’interazione dell’utente., Le loro ricche interfacce gestiscono l’azione dell’utente e aggiornano dinamicamente l’interfaccia utente senza ritardi o richieste dal server. Possono quindi evitare interruzioni nell’esperienza e rendere l’app web più simile a un’applicazione desktop.
Separazione di vista e livello dati
SPA è costruito utilizzando modelli Model-View-Controller (MVC) e Model-View-ViewModel (MVVM), ma è ancora possibile costruire l’applicazione sul proprio modello MV*.,
Il file di visualizzazione (insieme al pacchetto CSS) che contiene il rendering dell’interfaccia utente per l’applicazione e il livello dati dell’applicazione sono ben mantenuti separatamente nell’architettura SPA.
La separazione tra la vista e il livello dati consente all’utente di riutilizzare la pagina di visualizzazione per diversi set di dati o modificare la pagina di visualizzazione senza influire sul modello di dati in produzione.
La separazione dei livelli di visualizzazione e dati in SPA facilita i voti di versioning e rollback nella produzione.,
Esempi di applicazioni a pagina singola e demo
Questi sono alcuni degli esempi di applicazioni a pagina singola del mondo reale costruiti utilizzando i controlli JS 2 essenziali.
Expense Tracker
L’esempio di applicazione a pagina singola Expense Tracker, mette in mostra diversi controlli JS 2 essenziali insieme per monitorare e visualizzare le spese quotidiane con una grande interfaccia utente.,
Expense tracker – SPA
Le diverse pagine Web nell’applicazione, nella Dashboard, nelle transazioni e su, utilizzano DataGrid, Grafici e altri controlli JS 2 essenziali per la visualizzazione del modello di dati. Questa applicazione utilizza un meccanismo di routing pagina per le transizioni di pagina per navigare tra le viste.
Gli utenti possono navigare tra queste viste utilizzando gli URL, che verranno creati per ogni pagina Web a causa del routing., Poiché questa applicazione è costruita utilizzando l’architettura SPA, tutte le pagine Web verranno scaricate al caricamento iniziale dell’applicazione web. Quindi le transizioni di pagina avverranno completamente sul lato client senza richiedere alcuna pagina Web del server. Durante la navigazione verso viste diverse, l’URL dell’applicazione verrà aggiornato di conseguenza.
L’associazione dei dati ha un ruolo importante nella SPA. Poiché tutte le pagine Web vengono scaricate sul lato client,i componenti dell’interfaccia utente devono essere aggiornati con i dati aggiornati., Durante l’esecuzione di qualsiasi azione di modifica nella pagina Web della transazione, le modifiche verranno aggiornate al modello di dati contemporaneamente. Queste modifiche si rifletteranno anche nei componenti dell’interfaccia utente disponibili in altre pagine.
Poiché le SPA sono adatte per il rendering sia nei browser desktop che negli ambienti mobili, questa applicazione è costruita con un design fluido e reattivo per il rendering nei dispositivi mobili.
La demo dal vivo di questa applicazione è disponibile sul nostro sito web e si può trovare fonte su GitHub qui.,
Expense Tracker – Mobile view
Web Mail
Web Mail è un esempio di applicazione a pagina singola con un’interfaccia utente simile a Outlook costruita per la gestione di una cassetta postale.
Questa applicazione è costruita con interfacce ricche e un design interattivo utilizzando componenti Syncfusion come la fisarmonica, ListView, e Sidebar come una pagina web single-view. L’applicazione è divisa in tre sezioni per la gestione della casella di posta: cartelle di posta, elementi di posta e l’area del contenuto della posta., Grazie al suo design reattivo, questa applicazione può essere resa con facilità su dispositivi mobili e browser desktop.
L’associazione dei dati svolge un ruolo significativo in questa applicazione per l’aggiornamento della casella di posta e per la visualizzazione del contenuto della posta in base all’interazione dell’utente. Gli elementi dell’elenco di posta verranno aggiornati con il contenuto appropriato in base alla selezione dell’utente nelle cartelle di posta. L’area posta verrà aggiornata con il contenuto aggiornato quando l’utente seleziona un elemento di posta dall’elenco di posta.
Puoi trovare la demo live di questa applicazione sul nostro sito web e puoi trovare la fonte su GitHub.,
Web Mail – SPA
L’applicazione gestisce più interazioni utente e aggiorna il contenuto di conseguenza senza alcun aggiornamento della pagina, rendendo l’applicazione simile a un’applicazione desktop.
Il design reattivo di questa applicazione rende facile il rendering su dispositivi mobili con la migliore interfaccia utente.,
Calcolatore di prestito
Il Calcolatore di prestito è un esempio di applicazione a pagina singola che mette in mostra componenti come DataGrid, grafici, Slider e altri insieme in una pagina a vista singola per calcolare un pagamento del prestito in base all’importo del prestito, agli interessi e alla durata.,
Calcolatrice Prestiti – SPA
L’associazione dei dati in questa applicazione funziona in modo tale che, durante la regolazione dei valori di un importo del prestito, interessi, e il termine che utilizza il componente slider, i dati per il grafico e componenti griglia verrà aggiornata con i dati di conseguenza.
Si può anche aggiornare il contenuto del grafico scegliendo il mese desiderato da visualizzare utilizzando il controllo DatePicker. Quando il mese da visualizzare viene modificato, i dati per il mese corrispondente verranno restituiti dal modello., Lo stesso verrà aggiornato anche nel controllo dei grafici.
Puoi trovare la demo live di questa applicazione sul nostro sito web e puoi trovare la sua fonte su GitHub.
Health Tracker
L’Health Tracker è un altro esempio di applicazione a pagina singola per monitorare la salute di una persona monitorando l’assunzione di cibo, la distanza percorsa, l’acqua consumata e la durata del sonno.
Questa applicazione è costruita con interfacce ricche e un design interattivo utilizzando controlli Syncfusion come grafici e scheda come una pagina web single-view. L’associazione dati viene utilizzata per mostrare i dati nel grafico., La fonte per questo esempio può essere trovata in questa posizione GitHub.
Health Tracker – SPA
Diagram Builder
Il Diagram Builder è un’applicazione che aiuta nella creazione dei vari diagrammi per diversi casi d’uso come organigrammi, alberi gerarchici e mappe mentali.
Questa applicazione è costruita con controlli potenti e ricchi di funzionalità come Diagramma, Selettore di colori, Finestra di dialogo e Cursore Gamma. La fonte di questo esempio può essere trovata in questa posizione GitHub.,
Diagram Builder – SPA
Story Estimator
Il Story Estimator è uno strumento efficace, Agile-based per la stima dei punti storia per le storie utilizzando tecniche di pianificazione Poker.
Questa applicazione è costruita con controlli come DataGrid, grafici, Maschera di input, Pulsante, Pulsante di opzione e casella di controllo. La fonte per questo esempio può essere trovata in questa posizione GitHub.,
Story Estimator – SPA
Grafico azionario
Il grafico azionario viene utilizzato per monitorare e visualizzare il prezzo delle azioni di qualsiasi azienda in un determinato periodo di tempo.
Questa applicazione è costruita con i grafici, Barra degli strumenti, DateTimePicker, discesa, e controlli dei pulsanti. Puoi trovare la sua fonte su GitHub.,
Stock Chart – SPA
Asset Management
L’applicazione Asset Management è un esempio di applicazione a pagina singola utilizzato per monitorare e visualizzare le risorse software e hardware di un’organizzazione.
Questa applicazione è costruita con i controlli DataGrid, Charts, TreeMap e DateRangePicker. Puoi trovare la sua fonte su GitHub.,
Asset Management – SPA
Considerazioni per SPA
Oltre ai numerosi vantaggi a pagina singola applicazione, vi sono alcune considerazioni da tenere a mente con SPA:
- si dovrebbe garantire object-oriented principi per la creazione di una SPA. Se ignorato, porterà a perdite di memoria all’interno del browser. Quindi, causando il rallentamento dell’applicazione, degradando così le sue prestazioni.
- Gestire correttamente il pulsante indietro del browser nelle applicazioni a pagina singola., In caso contrario, l’utente può fare clic sul pulsante Indietro del browser, causando la perdita del flusso di lavoro.
Tuttavia, le tecniche giuste possono risolvere tutti questi problemi.
Sommario
In questo post del blog, abbiamo visto i vantaggi delle applicazioni a pagina singola rispetto alle applicazioni multipagina. Inoltre, abbiamo visto gli esempi di applicazioni a pagina singola del mondo reale costruiti con più controlli Syncfusion Essential JS 2.
Gli esempi di applicazione a pagina singola discussi in precedenza sono disponibili anche per Angular, JavaScript, ASP.NET Nucleo, e ASP.,NET MVC piattaforme, e si può trovare la demo dal vivo di queste applicazioni sul nostro sito web. Puoi anche controllare altre applicazioni del mondo reale create con componenti Syncfusion qui.
Si consiglia di controllare il codice sorgente da soli, disponibile su GitHub, che è facilmente eseguibile, per vedere come le applicazioni a pagina singola sono costruite utilizzando i componenti Syncfusion.