Architettura di un'applicazione web JavaScript a pagina singola?

https://stackoverflow.com/questions/3050869

27-09-2019
|

Domanda

Come dovrebbe essere strutturata sul lato client un'applicazione Web JS complessa a pagina singola?Nello specifico, sono curioso di sapere come strutturare in modo pulito l'applicazione in termini di oggetti del modello, componenti dell'interfaccia utente, eventuali controller e oggetti che gestiscono la persistenza del server.

All'inizio MVC sembrava adatto.Ma con i componenti dell'interfaccia utente annidati a varie profondità (ognuno con il proprio modo di agire/reagire ai dati del modello e ciascuno generare eventi che essi stessi possono o meno gestire direttamente), non sembra che MVC possa essere applicato in modo pulito.(Ma per favore correggimi se non è così.)

(Questa domanda ha portato a due suggerimenti sull'utilizzo di ajax, che è ovviamente necessario per qualsiasi cosa diversa dalla più banale app di una pagina.)

Soluzione

MVC architettura PureMVC / JS è la più elegante IMO . Ho imparato molto da lui. Ho trovato anche scalabile JavaScript Application Architecture da Nicholas Zakas utile nella ricerca di opzioni di architettura lato client.

Due altri suggerimenti

Ho trovato vista, messa a fuoco, e la gestione di input sono le aree che necessitano di particolare attenzione in applicazioni singola pagina web
Ho anche trovato utile per astrarre la libreria JS, lasciando la porta aperta al cambiamento mente su quello che si utilizza, o Mix & dovrebbe sorgere la partita necessità.

Altri suggerimenti

presentazione di Nicholas Zakas come condiviso da Dean è un ottimo posto per iniziare. Sono stato anche fatica a rispondere alla stessa domanda per un po '. Dopo aver fatto paio di larga scala Javascript prodotti, pensato di condividere i saperi come architettura di riferimento in caso qualcuno ne ha bisogno. Date un'occhiata a:

http://boilerplatejs.org/

Si rivolge a comuni problemi di sviluppo javascrip come:

Soluzione strutturazione
Creazione gerarchia modulo complesso
Autonomo componenti dell'interfaccia utente
basato modulo di comunicazione tra l'evento
Routing, Storia, Bookmarking
Test delle unità
Localizzazione
Documento Generation

ecc.

Il modo in cui creo app:

Framework ExtJS, app a pagina singola, ogni componente definito in un file JS separato, caricato su richiesta
Ogni componente contatta il proprio servizio web dedicato (a volte più di uno), recuperando i dati negli archivi ExtJS o in strutture dati speciali
Il rendering utilizza componenti ExtJS standard, quindi posso associare negozi a griglie, caricare moduli da record, ...

Basta scegliere un framework JavaScript e seguire le sue migliori pratiche.I miei preferiti sono ExtJS e GWT, ma YMMV.

NON lanciare la tua soluzione per questo.Lo sforzo richiesto per duplicare ciò che fanno i moderni framework Javascript è troppo grande.È sempre più veloce adattare qualcosa che esiste piuttosto che costruirlo tutto da zero.

Question - What makes an application complex ?

Risposta - L'uso della parola 'complesso' nella domanda stessa. Quindi, una tendenza comune sarà quello di guardare fuori per una soluzione giusta complesso dall'inizio.

Question - What does the word complex means ?

Risposta - Tutto ciò che è sconosciuto o parzialmente compreso. Esempio:. La teoria della gravità ancora oggi è complesso da me, ma non a Sir Isaac Newton che la scoprì nel 1655

Question - What tools can I use to deal with complexity ?

Risposta -. Comprensione e semplicità

Question - But I understand my application . Its still complex ?

Risposta - pensarci due volte, perché la comprensione e la complessità non lo fa coesistere. Se si capisce un enorme applicazione enorme, sono sicuro che sarete d'accordo che non è altro che un'integrazione delle unità di piccole e semplici.

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

Risposta - Perché,

-> SPA non è una sorta di tecnologia di base che è di recente invenzione per cui abbiamo bisogno di reinventare la ruota per un sacco di cose che stiamo facendo nello sviluppo di applicazioni.

-> Il suo un concetto guidato dalla necessità di migliorare le prestazioni, la disponibilità, la scalabilità e manutenibilità delle applicazioni web.

-> E 'un modello di progettazione abbastanza recentemente identificati, quindi una comprensione della ZPS come un modello di progettazione va lungo cammino per prendere decisioni informate circa l'architettura di una SPA.

-> A livello di root senza SPA è complessa, perché dopo aver compreso le necessità di un'applicazione e il modello SPA, vi renderete conto che lo si sta creando un'applicazione, più o meno allo stesso modo in cui avete fatto prima con alcune modifiche e re-accordi nel approccio di sviluppo.

Question - What about the use of Frameworks ?

risposta - quadri sono caldaia codice piastra / soluzione per alcuni modelli comunemente identificati e generiche, quindi possono decollare x% (variabile, in base all'applicazione) carico dallo sviluppo di applicazioni, ma poi non molto dovrebbe essere previsto fuori di essi specialmente per applicazioni pesanti e crescenti. E 'sempre un buon caso di essere in controllo completo del vostro struttura dell'applicazione e il flusso, ma soprattutto il codice per esso. Non ci dovrebbero essere zone d'ombra o nere nel codice dell'applicazione.

Question - Can you suggest one of the many approaches to SPA architecture ?

Risposta - Pensate al vostro proprio quadro in base alla natura della vostra applicazione. componenti dell'applicazione classificare. Cercare un quadro attuale che è vicino al vostro quadro derivato, se lo trovate, allora usarlo, se non lo trovate allora ti suggerisco di andare avanti con il proprio. La creazione di quadro è piuttosto un anticipo sforzo, ma produce risultati migliori nel lungo periodo. Alcuni componenti di base del mio quadro SPA saranno:

Fonte: Modelle / collezioni di modelli
Mark Up per la presentazione dei dati: Modelli
L'interazione con l'applicazione: Eventi
cattura Stato e di navigazione: Routing
Utilità, widget e plug-in: le librerie

Fammi sapere se questo ha contribuito in alcun modo e buona fortuna con la vostra architettura SPA !!

La cosa migliore da fare è quello di guardare esempio usi di altri framework:

TodoMVC vetrine molti molti quadri SPA.

È possibile utilizzare JavaScript framework MVC http://javascriptmvc.com/

L'applicazione web che sto lavorando sugli usi JQuery e io non lo consiglierei per qualsiasi grande applicazione web singola pagina. La maggior parte dei quadri cioè Dojo, Yahoo, Google e altri usano gli spazi dei nomi nelle loro biblioteche, ma JQuery non lo fa e questo è uno svantaggio significativo.

Se il tuo sito web è destinato ad essere piccola, allora JQuery sarebbe stato ok, ma se si intende costruire un sito di grandi dimensioni, allora mi sento di raccomandare guardando tutte le Javascript framework disponibili e decidere quale più soddisfa le vostre esigenze.

E mi sento di raccomandare l'applicazione del pattern MVC al tuo javascript / html e probabilmente la maggior parte del modello di oggetti per il javascript si potrebbe fare come il JSON che in realtà torna dal server tramite Ajax e la javascirpt utilizza il JSON per il rendering html .

Mi raccomando di leggere il libro Ajax in azione in quanto copre la maggior parte delle cose è necessario sapere.

Samm.js in diverse applicazioni di pagina uno con grande successo

Vorrei andare con jQuery MVC

http://bennadel.com/projects/cormvc-jquery-framework htm Ben è abbastanza acuto e se si scava intorno sul suo blog che ha dei bei post su come CorMVC è messo insieme e perché.

Alternativa: date un'occhiata alla ItsNat

Pensare in JavaScript, ma il codice stesso in Java nei server con le stesse API DOM, in modo server è più facile da gestire l'applicazione senza client personalizzato / ponti a causa dell'interfaccia utente e dei dati sono insieme.

Oppure dare un'occhiata alla https://github.com/flosse/scaleApp

NikaFramework consente di creare applicazioni a pagina singola. consente inoltre di scrivere HTML , CSS ( SASS ), JavaScript in file separati e raggruppare in una sola file di output alla fine.

mi sento di raccomandare di esplorare Yeoman . Esso consente di utilizzare esistente "best practice" per il nuovo progetto.

Ad esempio:

se si decide di utilizzare Angular.js, c'è un Yeoman generatore , che ti danno una struttura per il routing, vista, servizi, ecc si permettono anche di prova, minify il codice, ecc.

Se si decide di utilizzare Backbone, cassa questo generatore

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow