Architettura di un'applicazione web JavaScript a pagina singola?


99

Come dovrebbe essere strutturata una complessa applicazione web JS a pagina singola 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.

All'inizio l'MVC sembrava perfetto. 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 di generare eventi che 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 qualcosa di diverso dalla più banale app di una pagina.)


Puoi provare angularJS o backboneJS
Romain

2
Puoi fornire le tue intuizioni per questa domanda? È passato un po 'di tempo da quando hai posto questa domanda e mi interessa sapere quali sono gli aspetti più importanti che hai imparato dalla tua esperienza con le SPA Javascript.
Adrian Moisa

Risposte:


35

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

Altri due suggerimenti

  1. Ho riscontrato che la visualizzazione, lo stato attivo e la gestione dell'input sono aree che richiedono un'attenzione particolare nelle app Web a pagina singola
  2. Ho anche trovato utile astrarre la libreria JS, lasciando la porta aperta per cambiare idea su ciò che usi, o mescolare e abbinare in caso di necessità.

13

La presentazione di Nicholas Zakas condivisa da Dean è un ottimo punto di partenza. Ho anche lottato per rispondere alla stessa domanda per un po '. Dopo aver realizzato un paio di prodotti Javascript su larga scala, ho pensato di condividere gli apprendimenti come un'architettura di riferimento nel caso qualcuno ne avesse bisogno. Dai un'occhiata a:

http://boilerplatejs.org/

Risolve i problemi comuni di sviluppo Javascript come:

  • Strutturazione della soluzione
  • Creazione di gerarchie di moduli complesse
  • Componenti dell'interfaccia utente autonomi
  • Comunicazione tra moduli basata su eventi
  • Routing, cronologia, bookmarking
  • Test unitario
  • Localizzazione
  • Generazione di documenti

eccetera.


10

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 di dati speciali
  • Il rendering utilizza componenti ExtJS standard, quindi posso associare negozi a griglie, caricare moduli dai 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 di esistente che costruirlo tutto da zero.


10
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à anche oggi è COMPLESSA per me ma non per 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 - Pensaci due volte, perché comprensione e complessità non coesistono. Se comprendi un'applicazione enorme, sono sicuro che sarai d'accordo 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 appena inventata per la quale dobbiamo reinventare la ruota per molte cose che stiamo facendo nello sviluppo di applicazioni.

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

-> È un modello di progettazione abbastanza recente, quindi la comprensione di SPA come modello di progettazione fa molto 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 facevi prima con alcune modifiche e riorganizzazioni nell'approccio allo sviluppo.

Question - What about the use of Frameworks ?

Risposta - I framework sono codice / soluzione della piastra della caldaia per alcuni modelli comunemente identificati e generici, quindi possono togliere il carico x% (variabile, in base all'applicazione) dallo sviluppo dell'applicazione ma quindi non ci si dovrebbe aspettare molto da loro specialmente per i pesanti e applicazioni in crescita. È sempre un buon caso per avere il controllo completo della struttura e del flusso dell'applicazione, ma soprattutto del codice. Non dovrebbero essere presenti aree grigie o nere nel codice dell'applicazione.

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

Risposta: pensa al tuo framework in base alla natura della tua applicazione. Classifica i componenti dell'applicazione. Cerca un framework esistente che sia vicino al tuo framework derivato, se lo trovi allora usalo, se non lo trovi allora ti suggerisco di andare avanti con il tuo. La creazione di un framework è un vero sforzo in anticipo, ma produce risultati migliori a lungo termine. Alcuni componenti di base nel mio framework SPA saranno:

  • Fonte dati: modelli / raccolte di modelli

  • Mark Up per la presentazione dei dati: modelli

  • Interazione con l'applicazione: eventi

  • Acquisizione dello stato e navigazione: instradamento

  • Utilità, widget e plug-in: librerie

Fammi sapere se questo ha aiutato in qualche modo e buona fortuna con la tua architettura SPA !!


1
Questo aggiunge una grande prospettiva (che di solito è raro). Grazie!
Cody

4

La cosa migliore da fare è guardare esempi di utilizzo di altri framework:

TodoMVC mette in mostra molti molti framework SPA.



1

L'applicazione web su cui sto attualmente lavorando utilizza JQuery e non la consiglierei per nessuna applicazione web a pagina singola di grandi dimensioni. La maggior parte dei framework, ad esempio Dojo, yahoo, google e altri, utilizzano i namespace nelle loro librerie, ma JQuery no e questo è un inconveniente significativo.

Se il tuo sito web è pensato per essere piccolo, JQuery andrebbe bene, ma se intendi costruire un sito di grandi dimensioni, ti consiglio di guardare tutti i framework Javascript disponibili e decidere quale soddisfa maggiormente le tue esigenze.

E consiglierei di applicare il pattern MVC al tuo javascript / html e probabilmente la maggior parte del tuo modello di oggetti per javascript potrebbe essere fatto come il json che effettivamente ritorni dal server tramite ajax e javascirpt usa json per rendere html.

Consiglierei di leggere il libro Ajax in azione in quanto copre la maggior parte delle cose che dovrai sapere.


jQuery può essere scritto (come qualsiasi JS) in un modo a spaziatura dei nomi utilizzando prototipi. Non sono sicuro che sia una caratteristica abbastanza ampia o oscura da giustificare l'astrazione dietro un framework - preferisco imparare cosa sta effettivamente facendo JS. stackoverflow.com/questions/881515/...
SimplGy

4
JQuery non è inteso come framework applicativo lato client. Si rivolge a un "livello inferiore" di quello. JQuery è progettato per semplificare l'attraversamento di documenti HTML, la gestione degli eventi, l'animazione e le operazioni Ajax e per astrarre le differenze tra i browser. Per le app più grandi dovresti usare un framework applicativo lato client come knockout o backbone IN COMBINAZIONE CON JQuery.
Sam Shiles

Quindi il mio punto è ancora valido se knockout o backbone non includono, attraversamento di documenti, gestione di eventi, ecc., Allora non vale molto. Lo YUI3 App Framework fa e non è necessario JQuery se lo usi.
eaglestorm

1
jquery mantiene tutti i suoi metodi memorizzati nella variabile jQuery e nella variabile $. Se si utilizza l'opzione nessun conflitto, viene creato solo il nome jQuery nello spazio dei nomi globale. jQuery non è un framework, solo una libreria, non ti dice come fare le cose, ti dà solo alcune scorciatoie per fare alcune cose comuni. Il confronto tra jQuery e Dojo / YUI ecc. È sbagliato.
Hoffmann

1
@eaglestorm La tua istruzione if restituisce false.
John Lehmann




0

Alternativa: dai un'occhiata a ItsNat

Pensa in JavaScript ma codifica lo stesso in Java nel server con le stesse API DOM, nel server è molto più semplice gestire la tua applicazione senza client / bridge personalizzati perché l'interfaccia utente e i dati sono insieme.



0

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


0

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

Per esempio:

se decidi di usare Angular.js, c'è un generatore di Yeoman , che ti dà una struttura per il routing, le viste, i servizi, ecc. Inoltre ti permette di testare, minimizzare il tuo codice, ecc.

Se decidi di utilizzare Backbone, controlla questo generatore

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.