Architettura di un'applicazione Web JavaScript a pagina singola?

Question

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

MVC all'inizio sembrava un problema. Ma con le componenti dell'interfaccia utente nidificate a varie profondità (ciascuna con il proprio modo di agire/reagire ai dati del modello e ogni generazione di eventi che essi stessi possono o non possono gestire direttamente), non sembra che MVC possa essere applicato in modo pulito. (Ma per favore correggetemi se non è questo il caso.)

-

(This question portato a due proposte di utilizzo di Ajax, che è ovviamente necessaria per qualcosa di diverso da quello-pagina più banale app.)

Answer 1

L'architettura MVC di PureMVC/JS è l'IMO più elegante. Ho imparato molto da questo. Ho anche trovato Scalable JavaScript Application Architecture di Nicholas Zakas utile nella ricerca di opzioni di architettura lato client. altri

Due consigli

1. ho trovato vista, messa a fuoco, e la gestione di input sono le aree che necessitano di particolare attenzione in un'unica pagina web apps
2. Ho anche trovato utile per astrarre la libreria JS, lasciare la porta aperta per cambiare idea su ciò che si usa, o combinare la partita & in caso di necessità.

Answer 2

vorrei andare con jQuery MVC

Answer 3

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

Answer 4

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

Answer 5

Il mio modo di costruire applicazioni:

• quadro ExtJS, pagina singola applicazione, tutti i componenti definiti in un file JS separato, caricati on-demand
• Ogni componente contatta il proprio servizio Web dedicato (a volte più di uno), recupera i dati negli archivi ExtJS o nelle strutture dati speciali
• Il rendering utilizza componenti standard ExtJS, quindi è possibile associare i 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 arrotolare la propria soluzione per questo. Lo sforzo richiesto per duplicare ciò che i moderni framework javascript fanno è troppo grande. È sempre più rapido adattare qualcosa di esistente piuttosto che costruirlo tutto da capo.

Answer 6

L'applicazione Web attualmente in uso utilizza JQuery e non la consiglierei a nessuna grande applicazione Web a pagina singola. La maggior parte dei framework, ad esempio Dojo, yahoo, google e altri usano spazi dei nomi nelle loro librerie, ma JQuery no e questo è uno svantaggio significativo.

Se il tuo sito web è destinato a essere piccolo, JQuery sarebbe ok ma se intendi costruire un sito di grandi dimensioni, allora ti consiglio di consultare tutti i framework Javascript disponibili e decidere quale soddisfi maggiormente le tue 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 potrebbe essere fatto come il JSON che in realtà torna dal server tramite Ajax e la javascirpt utilizza il JSON per il rendering html.

Consiglierei di leggere il libro Ajax in azione poiché copre la maggior parte delle cose che è necessario conoscere.

Answer 7

Alternativa: date un'occhiata al ItsNat

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

Answer 8

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

Answer 9

sto usando Samm.js in diverse applicazioni di una pagina con grande successo

Answer 10

presentazione di Nicholas Zakas come condiviso da Dean è un ottimo posto per iniziare. Ho anche faticato a rispondere per un po 'alla stessa domanda. Dopo aver fatto un paio di prodotti Javascript su larga scala, pensato di condividere gli apprendimenti come un'architettura di riferimento nel caso qualcuno ne avesse bisogno. Date un'occhiata a:

http://boilerplatejs.org/

Si rivolge a comuni problemi di sviluppo Javascript quali:

• Soluzione strutturazione
• Creazione gerarchia modulo complesso
• Autonomo componenti dell'interfaccia utente
• basato su eventi comunicazione inter modulo
• Rou ting, Storia, Bookmarking
• Unit Testing
• Localizzazione
• Document Generation

ecc

Answer 11

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

TodoMVC mostra molti quadri SPA.

Answer 12

NikaFramework consente di creare un'applicazione a pagina singola. Consente inoltre di scrivere HTML, CSS (SASS), JavaScript in file separati e distribuirli in un unico file di output alla fine.

Answer 13

Question - What makes an application complex ? 

Risposta: l'uso della parola "complesso" nella domanda stessa.Quindi, una tendenza comune sarà quella di cercare una soluzione complessa fin 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: pensate due volte, perché la comprensione e la complessità non coesistono. Se comprendi un'enorme applicazione enorme, sono sicuro che sarai d'accordo sul fatto che non è altro che un'integrazione di unità 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.

-> È un concetto guidato dalla necessità di migliori prestazioni, disponibilità, scalabilità e manutenibilità delle applicazioni Web.

-> Si tratta di un modello di progettazione appena identificato, quindi la comprensione della SPA come modello di progettazione è molto importante per prendere decisioni informate sull'architettura di una SPA.

-> A livello di root nessuna SPA è complessa, perché dopo aver compreso le esigenze di un'applicazione e il pattern SPA, ti renderai conto che stai ancora creando un'applicazione, più o meno come hai fatto prima con alcune modifiche e riorganizzazioni nell'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 dovrebbero essere previsto da loro appositamente per applicazioni pesanti e in crescita. È sempre un buon caso controllare completamente la struttura e il flusso delle applicazioni, ma soprattutto il codice. Non ci dovrebbero essere aree grigie o nere nel codice dell'applicazione.

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

Risposta: pensate al vostro framework basato sulla natura della vostra applicazione. Categorizzare i componenti dell'applicazione. Cerca un framework esistente che sia vicino al tuo framework derivato, se lo trovi quindi usalo, se non lo trovi allora ti suggerisco di andare avanti con il tuo. La creazione di un framework è piuttosto impegnativa in anticipo, ma produce risultati migliori a lungo termine.Alcuni componenti di base del mio quadro SPA saranno: Fonte

• dati: Modelle/collezioni di modelli

• Mark Up per i dati di presentazione: Modelli

• interazione con l'applicazione: Eventi

• Cattura dello stato e navigazione: Routing

• Utilities, widget e plug-in: biblioteche

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

Answer 14

Vorrei raccomandare di esplorare Yeoman. Ti consente di utilizzare le "migliori pratiche" esistenti per il tuo nuovo progetto.

Ad esempio:

se si decide di utilizzare Angular.js, c'è un Yeoman generator, che ti danno una struttura per il routing, vista, servizi, ecc permettono anche di testare, la minimizzazione dei codice, ecc .

Se si decide di utilizzare Backbone, cassa this generator