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


19

Il mio lavoro principale è realizzare applicazioni HTML. Con ciò intendo le applicazioni di tipo CRUD utilizzate internamente con molte visualizzazioni di griglia modificabili, caselle di testo, menu a discesa, ecc. Attualmente stiamo utilizzando i moduli web ASP.NET, che fanno il loro lavoro, ma le prestazioni sono per lo più tristi e abbastanza spesso tu saltare attraverso i cerchi per ottenere ciò di cui hai bisogno. Cerchi che sono appesi al soffitto e incendiati.

Quindi mi chiedo se forse sarebbe una buona idea spostare tutta l'interfaccia utente sul lato JavaScript. Sviluppa un solido set di controlli riutilizzabili che sono specificamente adattati alle nostre esigenze e scambia dati solo con il server. Sì, mi piace il paradigma "control" (alias "widget"), abbastanza adatto a tali applicazioni. Quindi sul lato server avremmo ancora un layout di base simile al nostro attuale markup ASPX, ma che verrebbe quindi inviato al client una sola volta e la parte Javascript si occuperebbe di tutti i successivi aggiornamenti dell'interfaccia utente.

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

  • Performance ancora. Il benchmarking mostra che attualmente il ritardo principale è sul lato client, quando il browser tenta di eseguire nuovamente il rendering della maggior parte della pagina dopo un aggiornamento AJAX. Il markup generato dai webform ASP.NET dà un nuovo significato alla parola "web", e i ricchi controlli Devexpress aggiungono il proprio livello di complessità Javascript. Ma sarebbe più veloce ricalcolare tutte le modifiche necessarie sul lato Javascript e quindi aggiornare solo ciò che deve essere aggiornato? Si noti che sto parlando di moduli che hanno diverse visualizzazioni di griglia modificabili, molte caselle di testo, molti menu a discesa ciascuno con dentro mezzo mezzo di elementi filtrabili, ecc.
  • Facilità di sviluppo . Ora ci sarebbe molto più Javascript 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 migliori molto. Le pratiche di codifica possono migliorarlo un po ', ma non di molto. Inoltre, la maggior parte dei nostri sviluppatori sono principalmente sviluppatori C #, quindi ci saranno alcune curve di apprendimento ed errori iniziali.
  • Sicurezza . Molti controlli di sicurezza dovranno essere effettuati due volte (lato server e lato UI) e il lato server di elaborazione dati dovrà includerne molti di più. Attualmente, se si imposta una casella di testo in sola lettura sul lato server, è possibile dipendere dal suo valore che non cambia attraverso il roundtrip client. Il framework ha già abbastanza codice per garantirlo (attraverso la crittografia viewstate). Con l'approccio basato solo sui dati, diventa più difficile, perché devi controllare manualmente tutto. D'altra parte, forse le falle di sicurezza saranno più facili da individuare, perché avrai solo dati di cui preoccuparti.

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


So on the server side we would still have a basic layout simliar to our current ASPX markup, but that then would get sent to the client only once, and the Javascript part would take care of all the subsequent UI updates.Stai descrivendo esattamente cos'è ASP.NET, il che mi dice che probabilmente non lo stai usando correttamente. :) Nelle applicazioni ASP.NET se si inseriscono componenti all'interno dei pannelli di aggiornamento, la libreria javascript ASP.NET eseguirà postback asincroni sul lato server e eseguirà nuovamente il rendering dei componenti specificati.
maple_shaft

@maple_shaft - Lo so, ma in qualche modo funziona lentamente. Inoltre, le griglie eseguono già callback. Per tutto il resto, se c'è un postback, nella stragrande maggioranza dei casi è necessario aggiornare comunque la maggior parte della pagina, perché i controlli cambiano visibilità / scrivibilità / ecc. E questo è lento.
Vilx

3
Ogni volta che vedo un'app ASP.NET in cui qualcuno mette tutto sulla pagina all'interno di un pannello di aggiornamento, ho voglia di gettare il mio monitor contro il muro>. <! Questo sconfigge praticamente l'intero scopo di ASP.NET. Per mantenere il ciclo di vita lato server e gli eventi dell'applicazione è necessario che comunichi avanti e indietro con l'intero ViewState della pagina. Se hai 200 controlli e una griglia di dati, Joel Spolsky non dovrebbe prevedere che ci saranno enormi problemi di prestazioni. Ed Woodcock e AmmoQ hanno riassunto tutto perfettamente, quindi non ho bisogno di darti una risposta aggiuntiva.
maple_shaft

1
@maple_shaft - Mi dispiace, ma in realtà ho profilato questa roba. Era / è lento anche sui computer degli sviluppatori locali e Fiddler ha mostrato chiaramente che la connessione HTTP è stata aperta per meno di un secondo, mentre la pagina è apparsa solo alcuni secondi dopo, e per tutto il tempo il browser utilizzava tutta la CPU che poteva ottenere ed è stato sostanzialmente congelato. Questo non è gonfio Viewstate, è gonfio HTML / Javascript.
Vilx

1
@ Vilx- non c'è niente di sbagliato in C # /. NET (a parte solo Windows / costo). Ci sono grossi problemi con il gonfiore che i framework ASP.NET WebForms ci mettono sopra. Come accennato, prova Nancy se ti piace .NET. Ma questo è completamente fuori tema, era solo un commento che avresti fatto meglio se smettessi di usare i moduli web
Raynos

Risposte:


10

Linkedin lo fa per il suo sito mobile (vedi http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-10-performance-tips-linkedin-mobile parte 4), e apparentemente è stato molto utile per loro da un punto di vista delle prestazioni.

Tuttavia, suggerirei di evitare di fare lo stesso, per vari motivi.

La prima è la manutenibilità: C # / ASP.net è, poiché è un framework lato server, indipendente dal client, mentre Javascript non lo è (anche con un framework come jQuery non otterrai la compatibilità cross-browser al 100% , non a prova di futuro). Direi che è anche più facile verificare la funzionalità di un'applicazione tipicamente statica rispetto a un'applicazione dinamica, cosa che devi assolutamente considerare se stai costruendo siti su larga scala.

Il secondo è che troverai difficile trovare altre persone in grado (e disponibili) di creare un'applicazione javascript del tipo di complessità necessaria per eseguire l'intero sito Web (rispetto alla relativa facilità di ricerca. 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à client; se stai costruendo siti web rivolti al pubblico, ricorda che una parte ragionevole della rete non ha ancora abilitato JS (per vari motivi), quindi dovrai essere assolutamente sicuro di non escludere una grande porzione della tua base di utenti passando a un sito Web basato su JS.

Per quanto riguarda le tue preoccupazioni puntate:

  • Non mi preoccuperei troppo dell'aspetto della sicurezza, non c'è motivo per cui non si possano mescolare paradigmi e fare un po 'di elaborazione sul lato server quando si richiede sicurezza (si sta andando o si ha un codice di rendering della vista lì da qualche parte che restituisce HTML , non vi è alcun motivo per cui non si può fare questo semplicemente spegnere una chiamata AJAX, quando richiesto).

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

  • Le prestazioni dei motori di visualizzazione JS sono assolutamente soddisfacenti nella maggior parte dei casi (di nuovo, nella mia esperienza), le utilizzo pesantemente su base giornaliera. Quello che suggerirei è di evitare i framework più pesanti come knockout.js ecc. E puntare invece a qualcosa come il motore di micro template di Jon Resig. In questo modo puoi collegare il codice di supporto in modo che tu sia sicuro sia veloce e affidabile.

Quello che farei, se fossi in te, è davvero esaminare le ragioni di questo passaggio; Potrebbe darsi che tu non stia semplicemente sfruttando .NET in modo efficace e che tu abbia bisogno di migliorare il tuo gioco, WebForms non è un framework particolarmente lento pronto all'uso, quindi forse alcune delle librerie di terze parti che stai utilizzando stanno rallentando il rendering.

Prova a creare un profilo delle prestazioni dell'applicazione utilizzando un test di carico e uno strumento di profilazione e vedi dove sono i tuoi colli di bottiglia prima di sprecare molto tempo e sforzi in una soluzione più radicale, probabilmente rimarrai sorpreso da ciò che trovi come colpevole della tua lentezza!


No, come ho già commentato la risposta di Darknights, questa è un'app interna, senza una porzione (bene, piccola) rivolta al pubblico, quindi la dipendenza JavaScript è OK. E ho fatto la profilazione. Il lato server è buono. È il lato client che si impantana sotto l'HTML generato pesante (come ho detto, il markup generato da ASP.NET è lugubre) e il Devexpress Javascript.
Vilx

1
I siti Web ASP.NET di @EdWoodcock sono per loro stessa natura basati su Javascript. Gestisce la comunicazione asincrona di ViewState e il rendering degli elementi di pagina.
maple_shaft

@ Vilx- Questo può essere uno shock, ma controlli come le griglie dei dati sono enormemente complessi. Forse hai troppi elementi in una sola pagina?
maple_shaft

@ Vilx- Forse è il momento di esaminare il tuo utilizzo del controllo, quindi se stanno generando markup pazzo (i controlli asp.net predefiniti non lo fanno nella maggior parte dei casi se stai usando cose come Repeater invece di DataGrid ecc.), Allora forse dovresti spostare i tuoi controlli (o passare invece a HTML scritto a mano in UserControls).
Ed James,

1
@maple_shaft - O, più specificamente Flex, che (a quanto ho capito) è costruito su Flash proprio per questi scopi. È un'altra idea con cui sto giocando da qualche tempo. Ma ... per quanto ho provato a menzionarlo ad altri, ho ricevuto solo una risposta negativa, quindi non riesco a immaginare di farcela. Richiederebbe anche a tutti noi di imparare qualcosa di completamente nuovo.
Vilx

8

Usa ExtJS se vuoi andare in quel modo, non reinventare la ruota. Ma preparati, questo significa un completo cambio di paradigma. Le tue abilità 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.


1
Sono molto a mio agio con Javascript. So che alcune altre persone non lo sono.
Vilx

2
L'ho fatto per diversi anni in un precedente lavoro. ExtJS è molto bello e puoi farne un sacco.
Zachary K,

@ZacharyK - Come si comporta su forme davvero complesse? Quelli come ho scritto lì, con diverse visualizzazioni di griglia, tabulazioni, ecc.?
Vilx

2
Discretamente. devi ovviamente pensare ai tuoi modelli di dati. Ad essere sincero, cerco di evitare forme enormi e compongo diversi elementi più piccoli. Ma ciò ha meno a che fare con i limiti di ExtJS, quindi un buon design ecc.
Zachary K

@ZacharyK - Troppo pigro per ripetermi. Leggi il mio commento sulla risposta di Ed Woodcock. Non posso renderlo più semplice. :(
Vilx-

8

Il team in cui mi trovo ha deciso di migrare verso ExtJS alla fine del 2008. A quel punto avevamo un'app PHP da 200.000 linee che soffriva di problemi di front-end. La nostra situazione era molto peggiore della tua, perché avevamo un framework di controlli dei moduli gestito a mano che era davvero pessimo, e usavamo molto gli iframe per caricare sezioni della pagina (l'architettura visiva risale al 2005 e il team non era a conoscenza di Ajax che all'inizio). Dobbiamo comunque eseguire il refactoring del codice, quindi questo ha reso più semplice decidere di ricollegare pesantemente la base di codice per essere principalmente lato client.

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

  • Prestazione

    Il codice ExtJS si è dimostrato molto più veloce del codice legacy. Il vecchio codice era ovviamente pessimo per quanto riguarda le prestazioni, ma anche così siamo contenti dei risultati. Il codice dell'interfaccia utente è tutto javascript statico, quindi viene memorizzato nella cache molto bene (siamo nelle fasi di pianificazione del lancio su un CDN). Il server non è coinvolto nel rendering front-end, il che riduce il carico di lavoro lì. Inoltre aiuta ExtJS a fornire un sacco di controllo sul ciclo di vita dell'interfaccia utente (rendering pigro, facile scarico di elementi dell'interfaccia utente invisibili). In genere, una volta avviato il codice (architettura di caricamento su richiesta), la maggior parte del tempo di caricamento di uno schermo viene impiegato nella chiamata del servizio Web per recuperare i dati. La griglia ExtJS è molto veloce, specialmente quando si utilizzano viste bufferizzate per il rendering delle righe visibili sullo scorrimento.

  • Facilità di sviluppo

    Ad essere onesti, questo è un miscuglio. ExtJS è un DSL, non è proprio lo sviluppo web in senso tradizionale. I nostri sviluppatori hanno impiegato molto tempo per apprendere davvero l'API del framework e non vedo che questa curva sia meno ripida su altri framework lato client. Tutti i membri del team devono essere uno sviluppatore javascript "senior" (come regola generale, il libro di Crockford non dovrebbe contenere segreti). Soffriamo di problemi di bootstrap con i nuovi sviluppatori, perché l'esperienza sul lato client non è così diffusa come si potrebbe pensare, e l'esperienza extjs è quasi nulla (in Belgio, dove ci troviamo).

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

  • Sicurezza

    La sicurezza è uno dei motivi principali per eseguire l'interfaccia utente sul lato client. Il motivo è semplice: riduzione della superficie di attacco. Le API del servizio Web utilizzate dal nostro codice ExtJS sono una superficie di attacco molto più piccola rispetto a un livello di interfaccia utente sul lato server. L'ASVS di OWASP specifica che è necessario convalidare tutti gli input sul server per la correttezza prima di utilizzarli. 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 dell'interfaccia utente sul lato client. Stiamo ancora lottando con i problemi XSS, perché non sei assolto dalla codifica in HTML, ma nel complesso siamo molto più bravi in ​​termini di sicurezza di quanto non fossimo nella vecchia base di codice. ExtJS semplifica la convalida sul lato server dei campi modulo, quindi non abbiamo molto a dover scrivere due volte il codice.


Vorrei poter fare più di un semplice +1 grazie alla tua esperienza reale!
Vilx-

4

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

Professionisti:

  • tutto in un unico posto (javascript)
  • puoi caricare dati dal server, non markup, che possono risparmiare molta larghezza di banda se fatto bene
  • più facile ottenere un'applicazione reattiva (la latenza di rete è ancora presente, ma la risposta iniziale all'input di un utente arriva più velocemente)
  • il server Web non deve eseguire il rendering di alcun HTML o espandere alcun modello (ovvero, lo sforzo di elaborazione viene spostato dal server al client)

Contro:

  • tutto deve essere in javascript (può essere o non essere un problema)
  • la logica critica deve essere duplicata sul server
  • lo stato deve essere gestito su client e server e sincronizzato tra entrambi
  • la sicurezza può essere più difficile da ottenere correttamente (considerando come qualsiasi cosa nel codice lato client può essere manipolata da utenti malintenzionati)
  • esponi gran parte del tuo codebase (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 ajaxificare parzialmente le applicazioni Web esistenti, ma inviano comunque HTML su AJAX e gestire lo stato in questo modo può essere piuttosto peloso. È 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 HTML dinamico, invece, il client effettua chiamate a livello di logica aziendale nel server e riceve dati non elaborati.


1

Sì, puoi ma ..

Devi assicurarti di avere un grazioso "degrado" in modo che parti critiche della tua applicazione funzionino ancora senza Javascript.

È così che creo la maggior parte delle app in stile "HIJAX".


Le app sono già ricche di javascript e non funzionano senza di essa. I nostri clienti stanno bene e non si sono mai lamentati. E, a dire il vero, devo ancora trovare un utente che ha Javascript disabilitato al giorno d'oggi. Si noti inoltre che queste applicazioni NON necessitano di alcun tipo di SEO (sarebbe un disastro se un motore di ricerca potesse accedere a tutte quelle informazioni sensibili) e NON sono destinate all'uso da dispositivi mobili. Stiamo anche pensando di creare qualcosa di simile per i dispositivi mobili, ma per ora è solo in fase di definizione e non sappiamo nemmeno se ci sarebbe una richiesta.
Vilx

2
"E, a dire il vero, devo ancora trovare un utente che ha Javascript disabilitato al giorno d'oggi." Bene ciao allora. Ho installato noscript quindi l'impostazione predefinita per me è disabilitare javascript durante l'atterraggio su un nuovo sito Web. E se non funziona nulla di solito chiudo la scheda del sito Web.
Arkh,

3
@Arkh stai pensando come un programmatore, non un utente, rappresentiamo una piccola minoranza nel grande schema delle cose. Non trasformiamo questo in un "in js o non in js?" perché è stato ucciso a morte da queste parti :)
Darknight,

1
Le persone che disabilitano JS sono di solito ben consapevoli del fatto che in tal modo possono incontrare siti che si basano su di esso e quindi non funzioneranno. Se vogliono abilitarlo per un determinato sito è la loro scelta, ma se disabilitano intenzionalmente una tecnologia standard non mi dispiace se non sono in grado di navigare in un sito. D'altra parte, non conosco il supporto JS per i lettori di schermo. Potrebbe essere un problema più grande. E ovviamente c'è il problema dell'indicizzazione. Ma quando si desidera creare un'applicazione che non ha bisogno di indicizzazione e che non sarà comunque utilizzabile da persone non vedenti, ha senso fare affidamento su JS.
Andrea

1
maple_shaft Mi piaci, quindi lo dirò bene, non correre lungo quel sentiero :) grazie!
Darknight

1

Il mio sito è ancora agli inizi, ma finora il 100% è andato bene per me. L'unica logica del server che esiste sul front-end è la mappatura dei modelli e gli 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 http://coffeedig.com/coffee/ . 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, quindi tutta la logica di "sicurezza" viene eseguita sul server.

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

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.