È una buona idea fare l'interfaccia utente al 100% in Javascript e fornire dati tramite un'API?

19

Il mio lavoro principale è realizzare applicazioni HTML. Con ciò intendo applicazioni di tipo CRUD utilizzate internamente con molte visualizzazioni griglia modificabili, caselle di testo, elenchi a discesa, ecc. Attualmente stiamo utilizzando i Webform ASP.NET, che svolgono il lavoro, ma le prestazioni sono per lo più tristi e molto spesso tu devi saltare attraverso i cerchi per ottenere ciò che ti serve. Cerchi appesi al soffitto e incendiati.

Quindi mi chiedo se sarebbe forse una buona idea spostare tutte le interfacce utente sul lato JavaScript. Sviluppa una serie di controlli riutilizzabili che sono adattati specificamente alle nostre esigenze e scambiano solo dati con il server. Sì, mi piace il paradigma "control" (aka "widget"), è abbastanza adatto a tali applicazioni. Quindi sul lato server avremmo ancora un layout di base simile al nostro attuale markup ASPX, ma che poi sarebbe stato inviato al client solo una volta, e la parte Javascript si sarebbe occupata di tutti gli aggiornamenti successivi dell'interfaccia utente.

Il problema è che non l'ho mai fatto prima, e non ho mai visto nessuno fare questo, quindi non so quali sarebbero i problemi. In particolare, sono preoccupato per:

  • Prestazioni ancora. Il benchmarking mostra che attualmente il ritardo principale è sul lato client, quando il browser tenta di ri-rendering della maggior parte della pagina dopo un aggiornamento AJAX. Il markup di Webforms generato da ASP.NET dà un nuovo significato alla parola "web", e i ricchi controlli di Devexpress aggiungono il proprio livello di complessità Javascript in aggiunta. Ma sarebbe più veloce ricalcolare tutte le modifiche necessarie sul lato Javascript e quindi aggiornare solo ciò che deve essere aggiornato? Tieni presente che sto parlando di moduli con diverse visualizzazioni di griglia modificabili, un sacco di caselle di testo, molti elenchi a discesa contenenti ciascuno elementi filtrabili di mezzo zilione, ecc.
  • Facilità di sviluppo . Ci sarebbe molto più Javascript ora, e probabilmente si mescolerebbe con il markup HTML della pagina. Questo o qualche tipo di nuovo motore di visualizzazione dovrebbe essere prodotto. Intellisense per Javascript è anche molto peggio che per il codice C # e, a causa della natura dinamica di Javascript, non ci si può aspettare che diventi molto migliore. Le pratiche di codifica possono migliorare un po ', ma non di molto. Inoltre, la maggior parte dei nostri sviluppatori sono principalmente sviluppatori C # quindi ci saranno alcune curve di apprendimento e errori iniziali.
  • Sicurezza . Molti controlli di sicurezza dovranno essere eseguiti due volte (lato server e lato interfaccia utente) e il lato server di elaborazione dati dovrà includere molti più di questi. Attualmente, se si imposta una casella di testo in sola lettura sul lato server, è possibile dipendere dal fatto che il suo valore non cambi durante il round trip del client. Il framework ha già abbastanza codice per garantire che (attraverso la crittografia viewstate). Con l'approccio solo dati, diventa più difficile, perché devi controllare manualmente tutto. D'altra parte, forse i buchi di sicurezza saranno più facili da individuare, perché avrai solo i dati di cui preoccuparti.

Tutto sommato, risolverà i nostri problemi o li aggraverà? Qualcuno ha mai provato questo, e quali sono stati i risultati? Ci sono delle strutture là fuori che aiutano in questo tipo di sforzo (jQuery e equivalenti morali a parte)?

    
posta Vilx- 16.03.2012 - 11:47
fonte

6 risposte

10

Linkedin lo fa per il suo sito mobile (vedi link parte 4), e apparentemente è stato molto utile per loro dal punto di vista delle prestazioni.

Tuttavia, ti suggerisco di evitare di fare lo stesso, per vari motivi.

Il primo è la manutenibilità: C # / ASP.net è, poiché è un framework lato server, indipendente dal client, mentre Javascript non lo è (anche con un framework come jQuery non si otterrà il cross al 100% compatibilità con i browser, non a prova di futuro). Direi che è anche più semplice verificare la funzionalità di un'applicazione tipizzata staticamente rispetto a quella dinamica, che è assolutamente da considerare se si stanno costruendo siti su larga scala.

Il secondo è che avrai difficoltà a trovare altre persone che sono capaci (e volenterose) di creare un'applicazione in puro javascript del tipo di complessità necessaria per eseguire l'intero sito web (rispetto alla relativa facilità di trovare programmatori .NET). Questo potrebbe non essere una tua preoccupazione direttamente, ma è certamente qualcosa a cui pensare da una prospettiva a lungo termine.

Il terzo problema è la compatibilità con il cliente; se stai costruendo siti web pubblici, ricorda che una parte ragionevole della rete non ha ancora abilitato JS (per vari motivi), quindi devi essere assolutamente sicuro che non hai intenzione di escludere una grande porzione della tua base utente passando a un sito Web basato su JS.

Per quanto riguarda i tuoi dubbi puntati:

  • Non mi preoccuperei troppo dell'aspetto della sicurezza, non c'è motivo per cui non si possano mescolare i paradigmi e fare qualche elaborazione sul lato server quando si richiede sicurezza (si sta per avere qualche codice di rendering della vista lì da qualche parte che restituisce l'HTML, non c'è motivo per cui non si possa avere questo semplicemente sparare una chiamata AJAX, quando richiesto).

  • Anche la facilità di sviluppo non è una preoccupazione, secondo me ci sono ottimi strumenti disponibili per lo sviluppo di JS, non limitarti a entrare in VisualStudio perché sei abituato! (prova JetBrains WebStorm, ad esempio).

  • Le prestazioni dei motori di visualizzazione JS sono assolutamente soddisfacenti nella maggior parte dei casi (anche in questo caso, nella mia esperienza), le uso pesantemente giorno per giorno. Quello che suggerirei è evitare i framework più pesanti come knockout.js, ecc. E dirigere invece qualcosa come il motore di micro template di Jon Resig. In questo modo puoi collegare il codice di supporto in modo da essere sicuro e veloce.

Quello che farei, se fossi in te, è davvero esaminare le ragioni dietro questo interruttore; Potrebbe benissimo essere che non stai sfruttando efficacemente .NET e che hai bisogno del tuo gioco, WebForms non è un framework particolarmente lento, quindi forse alcune delle librerie di terze parti che stai usando stanno rallentando il tuo rendering.

Provare a fare un profilo delle prestazioni dell'applicazione utilizzando uno strumento di test di carico e di profilazione e vedere dove sono i colli di bottiglia prima di sprecare una grande quantità di tempo e fatica in una soluzione più radicale, probabilmente sarete sorpresi di ciò che trova il colpevole della tua lentezza!

    
risposta data 16.03.2012 - 12:03
fonte
8

Utilizza ExtJS se vuoi andare in quel modo, non reinventare la ruota. Ma preparati, questo significa un cambio di paradigma completo. Le tue competenze HTML sono quasi obsolete. AJAX ovunque, il server fornisce principalmente un'API AJAX. Scriverai molto più javascript che mai, quindi assicurati di essere davvero in forma con javascript.

    
risposta data 16.03.2012 - 12:06
fonte
8

Il team in cui mi trovo ha deciso di migrare a ExtJS alla fine del 2008. Avevamo a quel punto un'app di PHP di 200.000 linee che aveva problemi di front-end. La nostra situazione era molto peggiore della tua, perché avevamo un framework di controlli dei moduli handrolled che era davvero pessimo, e abbiamo avuto un uso pesante degli iframe per caricare sezioni della pagina (l'architettura visiva risaliva al 2005, e il team non era a conoscenza di Ajax che presto). Abbiamo dovuto refactoring il codice comunque, quindi questo ha reso più facile decidere di rearchitect pesantemente che il codebase fosse principalmente client-side.

Oggi l'app è di 300.000 linee, di cui 60.000 righe sono codice extjs e circa 3/4 delle funzionalità sono state migrate su ExtJS. Il codice extjs è tutto un app a pagina singola, ma incorpora ancora alcuni moduli legacy all'interno degli iframe. Abbiamo prima effettuato il porting sul container di navigazione, quindi abbiamo migrato le diverse aree di feature in modo frammentario. Con questo approccio siamo riusciti a integrare la migrazione di extjs nel normale processo di sviluppo delle funzioni, senza rallentare troppo.

  • Prestazioni

    Il codice ExtJS si è rivelato molto più veloce del codice legacy. Il vecchio codice era davvero negativo per quanto riguarda le prestazioni, ma anche così siamo soddisfatti dei risultati. Il codice dell'interfaccia utente è tutto javascript statico, quindi memorizza nella cache molto bene (siamo nella fase di pianificazione del lancio su un CDN). Il server non è coinvolto nel rendering front-end, il che riduce il carico di lavoro. Inoltre, aiuta ExtJS a fornire un notevole controllo sul ciclo di vita dell'interfaccia utente (rendering pigro, facile scarico degli elementi dell'interfaccia utente invisibili). In genere, una volta che il codice è stato riavviato (architettura di caricamento su richiesta), la maggior parte del tempo di caricamento di una schermata viene speso nella chiamata al servizio web per recuperare i dati. La griglia di ExtJS è molto veloce, specialmente quando si utilizzano le viste bufferizzate per il rendering delle righe visibili sullo scroll.

  • Facilità di sviluppo

    Per essere onesti, questo è un miscuglio. ExtJS è un DSL, non è proprio lo sviluppo web nel senso tradizionale. Ci sono voluti molto tempo dai nostri sviluppatori per apprendere veramente le API del framework e non vedo questa curva essere meno ripida su altri framework lato client. Tutti i membri del team devono essere sviluppatori "senior" di JavaScript (come regola generale, il libro di crockford non dovrebbe contenere segreti). Soffriamo problemi di bootstrap con i nuovi sviluppatori, perché le competenze sul lato client non sono così diffuse come si penserebbe, e le competenze di extjs sono quasi nulle (in Belgio, dove ci troviamo).

    D'altra parte, una volta che sei aggiornato, l'esperienza di sviluppo è molto bella. ExtJS è molto potente, quindi se sei nel groove puoi creare rapidamente fantastici schermi. Per quanto riguarda IDE, usiamo PHPStorm, che ho trovato abbastanza competente con il codice ExtJS.

  • Sicurezza

    La sicurezza è uno dei motivi principali per fare l'interfaccia utente lato client. La ragione è semplice: riduzione della superficie di attacco. Le API del servizio Web utilizzate dal nostro codice ExtJS sono una superficie di attacco molto più piccola di quella di un livello dell'interfaccia utente lato server. ASVS di OWASP specifica che è necessario convalidare tutti gli input sul server per la correttezza prima di utilizzarlo. In un'architettura di servizi Web, è ovvio e facile quando e come eseguire la convalida dell'input. Trovo anche più facile ragionare sulla sicurezza in un'architettura UI lato client. Siamo ancora in difficoltà con i problemi XSS, perché non sei assolto dalla codifica in HTML, ma nel complesso siamo molto più bravi sulla sicurezza di quanto non lo fossimo sulla vecchia base di codice. ExtJS semplifica la convalida sul lato server dei campi dei moduli, quindi non risentiamo molto della necessità di scrivere codice due volte.

risposta data 17.03.2012 - 18:42
fonte
4

Se puoi permetterti di non supportare utenti senza script, e i motori di ricerca non ti riguardano, allora sì, è un approccio perfettamente fattibile. Ecco una breve panoramica dei pro e contro:

Pro:

  • tutto in un'unica posizione (javascript)
  • puoi caricare i dati dal server, non i markup, che possono risparmiare molta larghezza di banda se fatti bene
  • più facile ottenere un'applicazione reattiva (la latenza della rete è ancora lì, ma la risposta iniziale all'input di un utente arriva più velocemente)
  • il server web non ha bisogno di eseguire il rendering di HTML o di espandere alcun modello (ad esempio, lo sforzo di elaborazione viene spostato dal server al client)

Contro:

  • tutto deve essere in javascript (potrebbe essere o non essere un problema)
  • la logica critica deve essere duplicata sul server
  • Lo stato
  • deve essere mantenuto su client e server e sincronizzato tra entrambi
  • la sicurezza può essere più difficile da ottenere (considerando come qualsiasi cosa nel codice lato client possa essere manipolata da utenti malintenzionati)
  • esponi una gran parte della tua base di codice (il codice che gira sul server non può essere visto dall'esterno)

Personalmente, penso che se segui questa strada, ASP.NET UpdatePanels non è la strada giusta. Sono ottimi per parzialmente aizzare le applicazioni Web esistenti, ma inviano ancora HTML su AJAX e lo stato di gestione in questo modo può essere piuttosto complicato. È meglio andare fino in fondo, servendo solo un documento HTML statico e quindi utilizzare una libreria di modelli javascript per eseguire il rendering HTML; il server non fornisce alcun codice HTML dinamico, invece, il client effettua chiamate a livello di business-logic nel server e riceve i dati non elaborati.

    
risposta data 16.03.2012 - 14:30
fonte
1

Sì, ma puoi ..

Devi assicurarti di avere una "degradazione" elegante in modo che le parti critiche della tua applicazione funzionino ancora senza Javascript.

Questo è il modo in cui costruisco la maggior parte delle app in stile "HIJAX".

    
risposta data 16.03.2012 - 11:54
fonte
1

Il mio sito è ancora agli inizi ma il 100% di js ui per me è andato bene finora. L'unica logica del server che esiste sul front-end è mappatura dei modelli e url ajax. Il server non ha alcuna conoscenza dell'interfaccia utente, che per me è molto facile da mantenere. Se sei interessato puoi controllare il mio sito che è scritto in ExtJS link . Il mio sito non ha davvero problemi di sicurezza, ma il client aiuta l'utente normale con una semplice convalida. So che un utente malintenzionato potrebbe davvero inviare qualsiasi ajax al server in modo che tutta la logica di "sicurezza" sia fatta sul server.

Penso che il problema più grande per te sia che stai facendo un'inversione completa di ciò a cui la tua squadra è abituata, ci sarà una curva di apprendimento ripida. Penso che l'approccio migliore sarebbe quello di sperimentare con alcuni framework js e provare a farne un'idea scrivendo alcuni semplici schermi.

    
risposta data 17.03.2012 - 02:23
fonte

Leggi altre domande sui tag