Come strutturare una moderna applicazione web

Question

Come strutturare una moderna applicazione web

#1 da (2 voti)
#2 da (1 voti)

6

Sfondo

Recentemente ho sviluppato, per due diversi progetti, due applicazioni web. I due hanno seguito approcci abbastanza diversi. Il primo era una classica applicazione di inventario (elenchi di elementi da visualizzare, selezionare, modificare .. molto CRUD) ed è stata sviluppata con Razor e ASP.NET MVC: controller che accetta le richieste, ottiene un modello attraverso un repository, costruisce diversi Viewmodels da per visualizzare e modificare, passare Viewmodel al motore di visualizzazione e renderizzare la pagina.

Cose molto dirette (puoi quasi creare un'applicazione con wizard solo con ASP.NET MVC), con pochissimo Javascript "magico" (solo il minimo offerto fuori dagli schemi MVC, principalmente per la validazione).

Il secondo era abbastanza diverso: questa applicazione è fondamentalmente un insieme di schermate (viste) attraverso le quali l'utente può navigare avanti e indietro, il cui aspetto cambia man mano che gli utenti inseriscono i dati in luoghi diversi - è fondamentalmente un hub in cui visualizzazioni degli utenti e informazioni sulle recensioni collegate ai suoi account. Ho creato questa seconda applicazione come servizio REST (creato con ServiceStack e quindi seguendo i modelli di progettazione che applica - come Data Transfer Object) e un'applicazione SPA implementata utilizzando AngularJS. L'applicazione angolare utilizza il suo (eccellente) servizio http per ottenere gli oggetti JSON dal servizio di restituzione e quindi popola il suo Viewmodel (lato client) (l'ambito). Molto pulito e ordinato; è facile navigare avanti e indietro tra le varie informazioni sull'account (che viene visualizzato in molti modi diversi: liste, grafici, ...)

A volte potrebbe essere un po 'più difficile codificarlo (l'autenticazione / l'autorizzazione è un po' più difficile (ad esempio, devi fare attenzione a simulare il controllo su client e server).

Ora sto iniziando un terzo progetto. È una via di mezzo: è ancora un'applicazione CRUD, ma deve essere molto reattiva. Ad esempio, in una pagina, abbiamo un'informazione complessa da inserire (combo di forma e lista); nella lista l'utente deve selezionare un elemento da un altro elenco, ma se l'elemento non è lì vogliamo aprire la vista "modifica lista articoli", lasciarlo inserire l'oggetto e tornare alla pagina originale .. tutto senza refresh / pushback / ... hai avuto l'idea.

La domanda

Qual è il modo migliore per farlo, per sviluppare un'applicazione web moderna, veloce e reattiva? Ho visto troppi approcci diversi:

approccio basato sul controllo (jQuery): costruisci la pagina usando il tuo framework MVC (che produrrà html, una tabella per esempio), usa jQuery per "arricchire" l'html e renderlo ajax
"basato sui dati" (Angolare): crea la pagina come pagina html con collegamenti dati, un'applicazione JS e struttura il lato server come servizio REST, che l'app JS utilizza per ottenere / pubblicare dati
il mix n. 1: parte dell'app è costruita utilizzando il tuo framework MVC (che sputa html), parte utilizzando un framework basato sui dati (come angolare). L'ambito / modello angolare viene inizializzato utilizzando jQuery per estrarre i dati iniziali dal DOM html.
il mix # 2: parte dell'app è costruita usando il tuo framework MVC (che sputa html), parte usando un framework basato sui dati (come angolare). Oltre a html, il server scrive uno "script", che è dati JSON, e lo incorpora nella pagina. Angular quindi lo utilizza come modello per il rendering della visualizzazione dei dati (lato client)
il mix # 3: lo stesso, ma questa volta nessun JSON incorporato: il server espone un servizio REST che viene utilizzato da Angular per recuperare i dati di cui ha bisogno. È essenzialmente una parte generata sul server, una parte sul client attraverso una chiamata di secon per ottenere l'oggetto JSON e
(more ...?)

Personalmente trovo il mix n. 1 e n. 2 brutto, ma sono troppo "nuovo" per il moderno sviluppo di Javascript da giudicare. Sono comuni? Per esempio, vedo che un vantaggio del mix # 1 è che ottieni immediatamente la vista iniziale, non devi aspettare che JS lo renderizzi. Entrambi i mix 1 e 2 fanno solo una chiamata al server.

Quindi qual è la migliore pratica? O quale (i) dovrei davvero evitare? Io (personalmente) sono più a mio agio con un mix di pagine generate lato server e JS lato client; fare una SPA usando completamente i servizi non era così facile, più di una volta desideravo generare qualcosa usando la logica lato server, ma potrei sbagliarmi (è per questo che sto chiedendo!)

programming-practices web-development javascript asp.net-mvc

posta Lorenzo Dematté 08.08.2013 - 09:44

fonte

2 risposte

Leggi altre domande sui tag programming-practices web-development javascript asp.net-mvc

Progettazione schema URI API Web Come determinare quale lingua / struttura è la migliore per il nostro progetto basato sul web?

score 2 · Answer 1

La tua domanda restituirà alcune risposte basate sull'opinione pubblica. Quindi sto cercando di rispondere il più neutro possibile riguardo a quale Framework o opzione usare.

Penso che ogni cosa che hai indicato sia abbastanza moderna come tutte le tue tecnologie elencate. jQuery e AngularJs non sono così vecchi, credo.

Inoltre, credo che tu abbia già risposto alla tua stessa domanda. Lascia che ti spieghi in dettaglio la mia affermazione:

Delle 3 pratiche menzionate che non ti piacciono 2, quindi rimane solo un mix.

I personally find the mix #1 and #2 ugly

Perché non andare semplicemente con quello per cui sei a tuo agio per ora invece di affidarti all'opinione di altre persone. Sembri sapere cosa stai facendo e avere una mente aperta ai nuovi sviluppi nel tuo campo, quindi perché preoccuparsi di ciò che pensano gli altri per ora. La tua domanda mi ha aiutato a scoprire qualcosa di nuovo. Grazie per quello. Spero che questo abbia aiutato.

In origine un commento era troppo lungo perché fosse uno.

score 1 · Answer 2

Questa è una domanda a cui ho pensato una volta e da allora ho avuto la possibilità di lavorare su molti, se non su tutti, i framework e le combinazioni disponibili. Oggi, quando ripenso a come dovrei pianificare la mia prossima applicazione, posso solo pensare a una cosa da tenere a mente e cioè a " mantenere l'algoritmo semplice ". Indipendentemente da ciò che sviluppi, e in qualunque codice tu decida, in pratica stai implementando una logica, un algoritmo. Nella mia esperienza, l'applicazione avrà meno bug se la tua logica è molto semplice .

Ora, nel tuo contesto di applicazioni web , comprendendo la natura di questo tipo di applicazione, le funzionalità che vuoi sviluppare e il tempo che hai a disposizione ti aiuteranno. Quindi, per le applicazioni Web, la natura è che deve essere un'applicazione client / server . Molto probabilmente, è memorizzare dati sul server e viene manipolato da un utente dall'altra parte del mondo. Ciò può essere fatto utilizzando qualsiasi framework sul server . Deve essere veloce e affidabile allo stesso tempo. Quindi dovresti aggiungere alcuni javascript e ajax per rendere più accessibili le funzioni più utilizzate. Poi viene la domanda, di quali funzionalità hai bisogno ? Ci saranno molti dati utente , come email / messaggi / elenco utenti e così via, quindi è meglio creare un servizio web che viene utilizzato da un'applicazione javascript (angolare?) per fornire una buona usabilità. O sarà solo un sito web con dati aziendali e un po 'di dati utente come la cronologia degli ordini, nel qual caso, il server dovrebbe gestire gran parte della logica e javascript dovrebbero fornisci solo funzionalità minime come animazione o ajax o ... (jquery?)

Alla fine, è anche importante tenere a mente quanto tempo hai per investire in questa applicazione. Per minor tempo , puoi utilizzare un sistema di gestione dei contenuti che sarà rapido da distribuire, ma per un controllo più preciso sulle funzionalità dell'applicazione puoi utilizza un quadro che impiegherà più tempo a sviluppare e testare .