Architettura di un'applicazione web JavaScript a pagina singola?
-
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:
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