Come dovrebbero essere strutturate le grandi applicazioni JavaScript?

Di recente mi sono stati mostrati alcuni plugin JavaScript scritti per OBIEE Mobile App Developer, nonché alcune librerie personalizzate per vari progetti.

Provenendo da un background OOP, sono un po 'confuso sulla struttura di questi progetti. Vedo file lunghi migliaia di righe. Sono abituato a dividere le cose in file e classi ma capisco che si tratta di un framework diverso - per esempio, la dimensione del file è un problema - ma ci deve essere un modo migliore per fare tutto?

La lunghezza degli script influenza non solo la leggibilità e la manutenibilità, ma anche la comprensione generale di una persona su come funziona il programma.

Come sono strutturate le grandi applicazioni? Qualche modello di progettazione OOP generale per questo?

Se non hai familiarità con i pattern JavaScript, posso dirti che molte applicazioni e librerie di grandi dimensioni utilizzano Revealing Module Pattern , ma ci sono molti altri pattern che puoi utilizzare in base alle tue esigenze.

Il modello di modulo rivelatore dovrebbe darti un buon modo per dividere file di grandi dimensioni e organizzarli logicamente; Tuttavia, quando lavori con qualsiasi modello di progettazione in JavaScript, tieni presente che questo può diventare molto confuso. Prova ad utilizzare questo , nuova , prototipi , .call()e .apply()con saggezza.

Lavorando su grandi progetti, questi possono essere utili anche:

• Se possibile, passare a TypeScript o ES6.
• Scrivi codice modulare . Esistono vari modi e librerie di terze parti, ma ognuna di esse è meglio di niente.
• Utilizzare un Task Runner / Build System per automatizzare le attività.
• Leggi i modelli di design . Questo potrebbe essere un buon inizio. Come ho detto sopra, il Revealing Module Pattern è molto utile, specialmente se pensi di aver bisogno di tempo per padroneggiare tutti i modelli popolari.
• Scrivi test unitari . Lavorare con un linguaggio dinamico può essere più impegnativo. Il test delle parti cruciali dell'applicazione può farti risparmiare molto tempo.
• Usa un IDE o un editor di testo che ti possa effettivamente aiutare sia a scrivere codice che a catturare bug. WebStorm è una buona scelta. Anche testo sublime.
• Se il tuo IDE non offre un debugger, prova a padroneggiare il debugger del tuo browser Web preferito.
• Usa le librerie. A seconda della natura del progetto, prova a utilizzare il miglior codice di terze parti che riesci a trovare. Se stai scrivendo un'applicazione web, dai un'occhiata a Angular , React e al vecchio backbone.js . Se stai scrivendo un'applicazione Node.js, prenditi il ​​tuo tempo per cercare nel repository NPM . Sarai sorpreso di quanti packeg stiano già facendo quello che stavi per fare.
• Anche se sei l'unica persona che sta lavorando al progetto, usi ancora un sistema di controllo della versione come Git e segui uno standard di codifica che non è troppo severo e supponente ma fornisce comunque una buona linea guida che i tuoi compagni di squadra sarebbero anche felici di Seguire.
• Anche se si opta per TypeScript o ES6, pur comprendendo OOP senza classi di JavaScript, Prototypal OOP può essere utile, specialmente durante il debug.

Sono uno sviluppatore C ++ e ho iniziato a fare sviluppo web di recente. Sto trasferendo una grande app desktop nell'ambiente Web. Strutturo il mio codice JavaScript esattamente come ho strutturato il codice C ++, usando gli stessi schemi. Ho circa 25-30 file in tutto, ma alla fine li ridurrò a 3-5 clubbing come appropriato e li minimizzerò tutti.

Per me, è solo la lingua che è cambiata, nel bene e nel male, ma non il paradigma. JavaScript, nonostante tutti i suoi difetti e frustrazioni, è una bella combinazione di stile funzionale e OOP. Le cose hanno funzionato bene finora.

Infine, una cosa che ho capito all'inizio era che JavaScript consente di scrivere un codice molto più conciso rispetto al C ++, quindi a volte avere un gran numero di LOC provenienti da un linguaggio non JS potrebbe essere dovuto al vecchio modo di fare le cose. Una volta affrontata questa cosa, non vedo nulla che dovrebbe essere davvero diverso. Il design e gli algoritmi sono in fin dei conti agnostici.

Naturalmente varia ampiamente da progetto a progetto, ma la pratica generalmente accettata è che, per cose che devono funzionare come librerie o moduli, metterli in un unico file di grandi dimensioni e utilizzare l'incapsulamento per impedirne il suo interno ("privato" ) dall'interfaccia verso l'esterno. È anche utile per gli sviluppatori che desiderano utilizzare la libreria / modulo: un file da aggiungere alla configurazione dell'applicazione o allo snippet di intestazione anziché un'intera gerarchia di cartelle e file da copiare e incollare. Riflette anche il fatto che, con la minimizzazione e il raggruppamento, in un sito di produzione molto probabilmente verrebbero combinati in un unico file per ridurre il numero di richieste HTTP.

Il codice dell'applicazione non deve seguire questa pratica e probabilmente non dovrebbe. Poiché la tua app è l'unica che la utilizza, devi solo aggiungere i file una volta e probabilmente puoi contare sulla piattaforma per gestire la minimizzazione e il raggruppamento per te.

Quando si lavora sul codice, i diversi componenti sono in genere suddivisi in moduli, ognuno in genere implementa una singola classe e ognuno vive in un file separato. Durante la produzione, questi file vengono quindi raggruppati in un singolo file (quindi le migliaia di righe di codice che stai vedendo) usando qualcosa come Browserify ( http://browserify.org/ ) o RequireJS per ridurre il numero di richieste HTTP, ma anche per garantire che le dipendenze siano caricate nell'ordine corretto

Per quanto riguarda l'implementazione delle classi per questi moduli, è un po 'diverso da OOP nella meccanica di base, ma non così diverso in superficie. ES6 ha persino introdotto la classparola chiave, quindi dovrebbe apparire piuttosto familiare. Questo articolo su MDN è utile per iniziare: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

Uso Net Elements and Annotations (Petri) per organizzare o "strutturare" il software per le mie applicazioni in formato PDF - programmi JavaScript che utilizzano l'API Acrobat / JavaScript. Forse può essere utile nella tua situazione.

Un diagramma viene utilizzato per stabilire le relazioni input-output degli elementi netti e due viste di forma delle annotazioni. In base al diagramma e alle viste dei moduli è possibile creare sistematicamente programmi JavaScript per le applicazioni dei moduli PDF. Quindi "leggere" il codice sorgente si riduce alla verifica che corrisponda alle specifiche: il diagramma e due viste del modulo.

L'implementazione del mio software utilizza costruttori e prototipi. Se le prestazioni diventano un problema, la sostituzione dei prototipi con membri di istanza può migliorare le prestazioni a spese di un maggiore utilizzo della memoria. Vengono anche utilizzate le matrici. Se le prestazioni diventano un problema, vengono utilizzati i riferimenti diretti.

Alcune proprietà sono create usando eval; per oggetti con moltissime proprietà ciò ridurrebbe la quantità di codice nel file sorgente e ridurrebbe la quantità di digitazione da parte del programmatore.

È ancora possibile e consigliato scrivere JavaScript nel modo OOP a cui sei abituato. Ecco un buon libro che ha attraversato i più importanti modelli di design in JavaScript.

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Esistono anche molti framework JavaScript in cui l'obiettivo principale è quello di essere in grado di suddividere il codice in diversi file e moduli. Se il particolare framework in cui stai lavorando richiede di avere tutto il tuo codice in un unico file, dovresti assolutamente cercare di cambiare.