Siamo così abituati a essere on-line e con un telefono cellulare con le nostre mani, che spesso non siamo nemmeno a smettere di pensare a che tipo di tecnologia ci sta aiutando eseguire questa o quella applicazione. Di solito, non è un problema: non pensiamo all’elettricità quando accendiamo le luci., Tuttavia, quando affronti la decisione di creare un’app per la tua azienda, è utile capire cosa significa SPA (applicazione a pagina singola) e in che modo è diverso dalle applicazioni multipagina (MPA).

In questo articolo, parleremo di cos’è l’applicazione a pagina singola (SPA), quali vantaggi offre SPA agli utenti e alle aziende, come funziona con SEO, quali sono i suoi pro e contro e, infine, come funziona SPA con tecnologie come Blazor, Angular, React.js, e Vue.js.,

======================

In questo numero:

• a Pagina Singola Definizione di Applicazione
• a Pagina Singola Applicazione Vantaggi
• a Pagina Singola Applicazione Svantaggi
• a Pagina Singola Applicazione i Problemi di Migrazione
• i Vantaggi di BENESSERE per gli Utenti
• i Vantaggi di BENESSERE per le Imprese
• a Pagina Singola di Architettura dell’Applicazione
• SPA e Angolare, di Reagire.js, Vue.js, e .,RETE

======================

Cosa significa Applicazione a pagina singola e perché abbiamo bisogno di applicazione a pagina singola

Un’applicazione a pagina singola è un’app che non ha bisogno di ricaricare la pagina durante il suo utilizzo e funziona all’interno di un browser. Pensa alle app che usi quotidianamente: Facebook, Google Maps, Gmail, Twitter, Google Drive o anche GitHub. Tutti questi sono esempi di una SPA.

Uno dei migliori vantaggi di una SPA correttamente configurata è l’esperienza utente (UX), in cui l’utente gode di un ambiente naturale dell’app senza dover attendere il ricaricamento della pagina e altre cose., Si rimane sulla stessa pagina, che è alimentato dal linguaggio di programmazione JavaScript.

Prima di andare oltre, ci sono tre abbreviazioni che vedrai in questo articolo:

• SPA – applicazione a pagina singola (come abbiamo menzionato sopra)
• MPA-applicazione a più pagine (un’app tradizionale che carica nuove pagine quando fai clic su un link)
• PWA – applicazione web progressiva (un sito Web creato utilizzando JavaScript o i suoi framework e può agire come un’app, ,, puoi, ad esempio, aggiungerlo alla tua home page del telefono cellulare come app)

Vantaggi dell’applicazione a pagina singola: perché usare l’applicazione a pagina singola?

Il vantaggio principale delle applicazioni a pagina singola è la sua velocità. La maggior parte delle risorse ha bisogno di SPA (HTML + CSS + Script ) vengono caricati al lancio dell’app e non hanno bisogno di essere ricaricati durante l’utilizzo. L’unica cosa che cambia sono i dati che vengono trasmessi da e verso il server. Di conseguenza, l’applicazione è molto sensibile alle query dell’utente e non deve attendere la comunicazione client-server tutto il tempo.,

Numerosi studi di Google e risultati chiave di aziende come Amazon e Wal*Mart mostrano che se una pagina richiede più di 200 millisecondi per caricare, ha il potenziale per rovinare la tua attività o, per lo meno, ti costa molto denaro. Ad esempio, Amazon afferma che 1 secondo di ritardo aggiuntivo nel caricamento della pagina costa loro l ‘ 1% delle vendite (che, considerando l’ammontare delle vendite di Amazon, è di billion 1,6 miliardi all’anno.)

Dal punto di vista di uno sviluppatore, la creazione di tale app è semplificata e ottimizzata., Non è necessario scrivere codice per rendere le pagine sul server. Non hai nemmeno davvero bisogno di un server per iniziare il processo di sviluppo. È possibile dare il via da un file per iniziare. Inoltre, lo sviluppatore può riutilizzare completamente lo stesso codice back-end lato server e API efficiente per l’applicazione web e un’applicazione mobile nativa.

Le applicazioni a pagina singola sono eccellenti quando si dispone di un team di sviluppatori che lavorano insieme., Consente agli sviluppatori di backend di concentrarsi sull’API, mentre gli sviluppatori di frontend possono prestare maggiore attenzione alla creazione della migliore esperienza utente basata sull’API di backend e all’implementazione di una bella interfaccia utente.

Il debug di un’applicazione a pagina singola è anche facile utilizzando il browser Chrome poiché ha strumenti speciali per Angular Batarang e React (le tecnologie utilizzate per le SPA.) Utilizzando una console, è possibile monitorare le operazioni di rete e analizzare vari elementi della pagina e i dati associati.,

Processo di caching è anche abbastanza efficiente-l’applicazione invia una sola richiesta, memorizza tutti i dati trasmessi, e può utilizzare questi dati. Ciò è particolarmente importante nei momenti in cui l’utente può avere una scarsa connettività – può ancora utilizzare la tua app poiché è sincronizzata con il server quando la connessione migliora.

Abbiamo menzionato le app Web progressive (PWA) sopra e le SPA possono essere facilmente trasformate in PWA. A sua volta, ciò consente agli sviluppatori di fornire il caching locale e offrire l’esperienza offline ai clienti e agli utenti.,

Svantaggi dell’applicazione a pagina singola: perché non un’applicazione a pagina singola?

Nonostante tutti i vantaggi delle applicazioni a pagina singola, nulla è mai perfetto. Diamo un’occhiata ai tempi in cui la SPA può non essere una soluzione ideale.

Cosa si intende per svantaggi delle applicazioni a pagina singola?

Le applicazioni a pagina singola mettono un carico più significativo sul browser. Ad esempio, se gli utenti dispongono di dispositivi a bassa potenza, avranno una scarsa esperienza app in termini di velocità.

Ulteriori problemi con JavaScript sorgono perché devi assicurarti che non ci siano perdite di memoria., Poiché l’app può funzionare per un lungo periodo di tempo – ore alla volta (al contrario dell’MPA, in cui la durata di una pagina è stata contata in minuti), è necessario assicurarsi che la SPA non consumi più memoria di quanto necessario. In caso contrario, il piacere delle pagine a caricamento rapido verrà distrutto dalla lentezza della memoria non disponibile sul dispositivo dell’utente.

Un altro svantaggio di JavaScript è che gli utenti possono semplicemente disabilitarlo sui loro dispositivi, e quindi è necessario pensare a ulteriori modi per accedere alle informazioni sul tuo sito Web o sulla tua app senza JavaScript.,

Un’altra cosa fondamentale da ricordare sull’utilizzo o la costruzione di una SPA è la sicurezza. A causa di cross-site scripting (XSS) e il fatto che non vengono caricate nuove pagine, gli hacker possono accedere al tuo sito web e iniettare nuovi script sul lato client.

Pertanto, se stai pensando di creare un’applicazione a pagina singola per la tua attività, assicurati di prendere le precauzioni necessarie per non lasciare che ciò accada.

Un altro problema di sicurezza è la privacy dei dati sensibili. Il caricamento iniziale della pagina non deve contenere informazioni che non dovrebbero essere disponibili per tutti gli utenti., Dal momento che l’intero SPA carica subito al dispositivo dell’utente, si potrebbe accidentalmente dare via i dati che dovrebbero essere dietro un login o non disponibili a tutti.

Ottimizzazione SEO per applicazioni a pagina singola

L’ottimizzazione SEO è complicata quando si dispone di un’applicazione a pagina singola, motivo per cui abbiamo deciso di dedicare una sezione separata ad essa negli Svantaggi SPA.

È più sicuro usare le SPA quando non ti affidi tanto all’ottimizzazione dei motori di ricerca (SEO), ad esempio, se la tua app è accessibile solo tramite un login.,

Se hai un blog, d’altra parte, è più difficile per i motori di ricerca indicizzare il tuo sito web SPA rispetto alle tradizionali pagine renderizzate dal server. Questo perché l’URL non cambia realmente e le pagine diverse di solito non hanno i loro indirizzi URL.

Pertanto, il nostro consiglio: se non vuoi preoccuparti delle impostazioni URL, scegli un framework che supporti il rendering lato server (SSR). Inoltre, non utilizzare finestre iframe, utilizzare URL statici e ottimizzare gli script sulla pagina per velocizzarli., Infine, assicurarsi che le pagine hanno HTML5 per Google crawler per essere in grado di accedervi.

Si dovrebbe anche prestare particolare attenzione ai messaggi del server, in particolare gli errori 200 e 404.

Single Page Application Migration Issues

Single-page applications sound like they were sent from heaven to simplify users’ experience with the website. È veloce e conveniente; è quasi perfetto. È davvero così?,

Quando stai pensando di migrare all’applicazione a pagina singola da un MPA, devi fermarti e considerare i pro e i contro (che abbiamo menzionato sopra.)

Quando usare una SPA

Potresti chiedere: “Quando dovrei usare un’applicazione a pagina singola?”Quando hai un’azienda o un sito Web personale che ha bisogno di una piattaforma dinamica e di un piccolo volume di dati, l’applicazione a pagina singola è una buona idea. È anche un’ottima opzione se hai intenzione di sviluppare un’app mobile in futuro, poiché, come abbiamo detto sopra, l’API backend può essere utilizzata sia per le app web che per quelle mobili.,

Lo svantaggio principale è il SEO, ma l’architettura è adatta per piattaforme Software-as-a-Service (SaaS), comunità chiuse e social network (motivo per cui Facebook lo utilizza). La ragione di questo è che questi siti non hanno bisogno di ottimizzazione per la ricerca su Google.

Quando utilizzare un MPA

Le grandi aziende con una vasta gamma di servizi e prodotti trarrebbero vantaggio da un’applicazione multipagina più tradizionale. Tali aziende includono negozi online, siti aziendali, cataloghi e mercati., La gestione di tale applicazione sarebbe anche molto più semplice poiché è possibile collegarla a più database utente.

Infine, questi tipi di aziende avrebbero bisogno di opzioni di ottimizzazione dei motori di ricerca poiché molti di loro vorrebbero essere trovati in Google, Bing e altri motori di ricerca (per vendere i prodotti o i servizi che offrono.)

Vantaggi della SPA per gli utenti

Il vantaggio principale delle applicazioni a pagina singola per gli utenti finali è, ovviamente, la velocità con cui l’app viene caricata e la possibilità di lavorare offline.,

SPA offre un’esperienza utente lineare, il che significa che è facile navigare nel sito web e capire dove trovare questa o quella cosa. Ad esempio, la Saucony SPA ha un inizio, un centro e una fine chiari. Utilizzando UI / UX design, gli sviluppatori di app Saucony hanno utilizzato parallax scrolling e transizioni per rendere il viaggio del cliente piacevole.

Applicazioni a pagina singola sono grandi su dispositivi mobili troppo, dal momento che la maggior parte del tempo, tutti gli utenti hanno bisogno è quello di scorrere (si pensi alla bacheca infinita di Facebook). Non è necessario fare clic su alcun link, e basta godere lo scorrimento.,

Vantaggi di SPA per le aziende

Quando si tratta di aziende, lo sviluppo di applicazioni a pagina singola richiede solitamente meno tempo poiché la stessa API di backend può essere utilizzata sia per il web che per i dispositivi mobili. Di conseguenza, il flusso di informazioni è semplificato e diventa molto più semplice creare un’applicazione mobile nativa autonoma.

Considerando i vantaggi nell’ottimizzazione della velocità della SPA, le aziende possono anche beneficiare perché gli utenti sarebbero più interessati a utilizzare un’app che è veloce (ergo, acquistare qualcosa o semplicemente utilizzare l’app più spesso.,)

Architettura dell’applicazione a pagina singola e come funziona l’applicazione a pagina singola

Come funzionano le applicazioni a pagina singola? L’architettura dell’applicazione a pagina singola è abbastanza semplice: consiste nelle tecnologie lato client (in HUSPI, ci affidiamo a React.js, angolare e Vue.js) e le tecnologie lato server (per le quali di solito usiamo Node.js)

In termini di modo in cui il sito rende come viene presentato all’utente, ci sono tre opzioni tra cui scegliere.,

Client-side rendering (CSR)

1. Il browser invia una richiesta per il file HTML dal server
2. Il server risponde rapidamente con un semplice file HTML con stili e script collegati
3. L’utente visualizza una pagina vuota o qualche immagine di caricamento, mentre il js è in esecuzione
4. L’applicazione recupera i dati, genera vista, e inietta nel DOM
5. Applicazione è pronta per l’uso

Questa potrebbe essere un’opzione per semplici siti web, ma di tenere presente che il rendering di informazioni sul lato client richiede un sacco di risorse del dispositivo e potrebbe sovraccaricare il browser., Di conseguenza, questa opzione potrebbe essere la più lenta delle tre. Allo stesso tempo, se si dispone di un sito Web ad alto traffico, la RSI sarebbe migliore poiché presenterebbe le informazioni all’utente senza dover parlare troppo con il server.

Inoltre, se hai bisogno di opzioni di condivisione sociale, tieni presente che tutte le pagine in CSR di solito hanno gli stessi valori open graph (og:), quindi devi usare SSR o SSG.,ng (SSR)

1. Il browser invia una richiesta per il file HTML dal server
2. Il server recupera tutti i necessari dati, rende l’applicazione che genera l’app file HTML al volo
3. L’utente vede il contenuto disponibile
4. Il single-page application framework è quello che si attacca eventi, genera un virtuale DOM, ed esegue altre azioni
5. Applicazione è pronta per l’uso

Server-side rendering è la possibilità che si affidano a HUSPI, perché combina la velocità del single-page application e non sovraccaricare il browser dell’utente, rendendo l’applicazione veloce.,

Sito Statico Generatori (SSG)

1. Il browser invia una richiesta per il file HTML dal server
2. Il server risponde rapidamente con un già preparato file HTML
3. l’utente vede La pagina
4. L’applicazione recupera i dati, genera vista, e inietta nel DOM
5. Applicazione è pronta per l’uso

Buona opzione, ma ricordate che se avete dinamica dei contenuti del sito web, sito statico, generatori di non essere i tuoi migliori amici, perché sono più orientata a pagine statiche (come si poteva già immaginare dal nome.,)

Come fare un’applicazione a pagina singola usando Angular, React.js, e Vue.js

Mentre stavo scrivendo questo articolo, mi sono consultato con i nostri sviluppatori per capire quali sono le migliori pratiche del mondo in termini di creazione di applicazioni a pagina singola che vengono utilizzate qui a HUSPI.

Gli sviluppatori HUSPI hanno provato e testato numerosi framework e hanno diversi background di lavoro, ma si uniscono nel dire che ci sono i primi tre framework per il frontend-Angular, React e Vue – e c’è un main (il loro preferito) per il nodo backend.js., Ci sono una manciata di altri framework disponibili sul mercato (come Ember o Knockout), ma non li usiamo tanto.

Per creare un’applicazione a pagina singola, è necessario AJAX e HTML5 per creare pagine reattive mentre Angular, React e Vue sono responsabili della gestione del “sollevamento pesante” sul lato client di una SPA.

Cosa scegliere: Reagire, angolare o Vue?

Abbiamo scritto diversi articoli sul tema del confronto tra questi framework., Tuttavia, confrontiamoli di nuovo per vedere se hanno vantaggi in termini di creazione di applicazioni a pagina singola.

Applicazioni angolari e a pagina singola

Angular è un framework JavaScript introdotto da Google nel 2010. Tra le tre opzioni che stiamo confrontando, Angular è la più antica e si basa su TypeScript. Grazie a TypeScript, Angular è una grande opzione da utilizzare da grandi team di sviluppatori e aziende che già utilizzano questa tecnologia nei loro altri prodotti.

È il più maturo tra i framework e ha un numero decente di contributori su GitHub., Potrebbe essere più difficile in termini di curva di apprendimento, ma allo stesso tempo, ne vale la pena.

Tra i client che utilizzano Angular per le loro applicazioni a pagina singola ci sono Google (e i loro prodotti come Gmail e Google Drive) e Wix, quindi se decidi di creare un’applicazione a pagina singola utilizzando Angular, sarai in ottima compagnia.

# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB

La comunità angolare sta per rilasciare Angular 9.0.0-cosa aspettarsi nella nuova versione di Angular?

Reagire.js e le applicazioni a pagina singola

Reagiscono.js è una libreria JavaScript creata nel 2013 da Facebook., Lo usano ampiamente in tutta la loro linea di prodotti, tra cui applicazioni a pagina singola ben note come Facebook stesso, Instagram e WhatsApp. Oltre a Facebook, Uber utilizza anche React.libreria js per i loro prodotti.

Dei tre concorrenti, React ha la più considerevole quantità di contributori su GitHub – oltre un migliaio – che aiuta a rimanere aggiornati con le varie sfide che gli sviluppatori devono affrontare ogni giorno.

I nostri sviluppatori qui a HUSPI preferiscono anche React per i progetti che sviluppiamo (a meno che non ci siano requisiti per un altro framework)., E ‘ sia leggero e abbastanza maturo per essere testato e provato ed essere trovato degno.

React è la scelta giusta per coloro che hanno appena iniziato con i framework frontend JavaScript e le startup e gli sviluppatori a cui piace essere flessibili. React offre buone opzioni di integrazione con varie altre tecnologie e framework, il che è molto utile quando si lavora su un progetto con un grande ecosistema.

# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB

Vue.js e applicazioni a pagina singola

Vue è il più giovane dei tre, creato nel 2014 da un ex dipendente di Google Yuxi (Evan) Si., Anche se nessuna grande società supporta il suo sviluppo, Vue è riuscita a crescere in popolarità. Attualmente, aziende come GitLab, Baidu e Alibaba usano Vue.js per le loro esigenze.

Se preferisci la semplicità e la flessibilità nei tuoi framework front-end, Vue è una buona opzione. Inoltre, è il più leggero di tutti.

# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB

Recentemente, abbiamo scritto un articolo su React.js contro Vue.js

Applicazioni a pagina singola e ASP.NET (Blazor)

Abbiamo deciso di aggiungere il ASP.NET opzione per l’elenco di framework e tecnologie per le applicazioni a pagina singola., C’e ‘ un nuovo ragazzo nell’isolato che si chiama Blazor. È un framework. NET che utilizza c # / Razor e HTML che viene eseguito nel browser con WebAssembly, secondo il repository GitHub.

Microsoft ha annunciato il rilascio di questo framework all’inizio di 2019 e attualmente sembra che la versione 1.0 sia pronta. Questo serio sostegno da parte di una grande azienda è un grande vantaggio di Blazor perché rende immediatamente questo strumento open-source una parte della comunità di oltre 60.000 collaboratori OSS con oltre 3.700 collaboratori OSS.,

Blazor è uno strumento utile perché non c’è bisogno di TypeScript o JavaScript, è possibile scrivere tutta la logica in c#. Detto questo, Blazor offre l’interoperabilità con le API e le librerie JavaScript, quindi se il tuo ecosistema è grande e consiste di librerie JS, non ti perdi nella transizione.

. NET Blazor offre anche due diverse opzioni: Blazor solo client e Blazor lato server. Quest’ultimo dovrebbe essere fornito con. NET Core 3.0.

Significa che Blazor ucciderà Angular, React o Vue? Non pensiamo. Tuttavia, è qualcosa da tenere d’occhio.

Per SPA utilizzando .,NET, è inoltre possibile utilizzare ASP.NET Nucleo e ASP.NET MVC. Come creare un’applicazione a pagina singola in ASP.NET MVC? Lo si imposta sul backend per servire l’HTML sul frontend.

# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+

Conclusione

Considerando l’ascesa dei dispositivi mobili e uno stile di vita on-the-go, applicazioni a pagina singola sono grandi. Se il vostro business sarebbe andato per una SPA o un MPA – che è più di una domanda per i vostri analisti di business e requisiti.,

In HUSPI, abbiamo analisti aziendali nel team che possono aiutare a comprendere e definire le esigenze tecniche del progetto (e sviluppatori che possono costruire l’architettura e il progetto stesso da zero).