Librerie javascript importate dinamicamente

[SuperStep]

salve,

sto realizzando diverse funzioni Javascript che funzionano in modo analogo alla programmazione ad oggetti "classica".

alcune di queste "classi" hanno delle dipendenze da altre classi, e sono importate in una pagina seguendo questa logica:

il template importa tutte le librerie, a prescindere che siano state utilizzate oppure no, e se un oggetto viene istanziato allora la utilizza.

esempio pratico:

una pagina template importa tutte le librerie js utilizzate.

pagina1: utilizza funzione1 e funzione2, che sfruttano solo alcune delle librerie.

pagina2: utilizza funzione1 e funzione3 che sfrutta solo alcune delle librerie.

adesso, quello che vorrei fare è, direttamente in javascript, mettere le dipendenze che mi servono per ogni funzione, e se è già stato richiamato quel determinato file, allora non deve essere scaricato.

sorge un altro problema però;

le librerie javascript sono costruite a "run-time" alcune volte, mi spiego:

ho tre file che contengono 3 "classi" diverse, ben commentate, con un piccolo manuale interno per spiegare il codice;

adesso, quando viene importato, una funzione crea un file "pulito" contenente tutte e 3 le classi, in modo da risparmiare sugli header. (Questa operazione viene fatta da un modulo del server specificando i file)

quello che ne esce è un file compatto di minime dimensioni;

quindi il workflow di queste cose dovrebbe essere il seguente:

ogni modulo che viene utilizzata in una pagina ha il suo header che importa le classi essenziali senza dipendenze.

alla fine del caricamento dei moduli, una classe dovrebbe prendere tutte le dipendenze e caricarle dinamicamente.

potrei farlo con AJAX ed un controller sul server che data la richiesta comprime i file e li restituisce.
Ma una chiamata AJAX è più lenta di una semplice dipendenza carcata staticamente.

Come dovrei approcciarmi a questo problema?

qualcuno ha già risolto cose simili?

[Zoff]

http://requirejs.org/

[SuperStep]

con requirejs, cosa succede se due moduli chiedono la stessa libreria?

[Zoff]

Esattamente quello che chiedi.
Vedi la documentazione.

[SuperStep]

analizzando un po la situazione, ho deciso di optare per un altra soluzione, ovvero la seguente:

Un modulo server possiede un array statico in cui vengono conservati man mano i file che servono ai moduli Javascript,

man mano che i moduli vengono richiamati nella pagina, un header di questi moduli si preoccupa di specificare quali altre classi esterne servono.

alla fine dell'import dei moduli, il server scarta i nomi dei file duplicati, e provvede a creare un unico file (separatamente per js e per css)
che contengono i programmi, (ovviamente compressi).

che te ne pare come soluzione?

[Zoff]

A me sembra uno spreco di risorse del server, tu fai calcolare al server per TUTTE le richieste quelle che potrebbero essere risorse statiche.
Ergo fai lavorare inutilmente il server.

Per cui: soluzione ingegnosa ma inefficiente, riondante e poco standard.

[SuperStep]

avevo pensato anche a questo,

mi creo una mappa dei file assembrati con tanto di data di ultima modifica,
se esiste una build già fatta, e nessun file della build ha subito modifica, non effettua la compressione,
altrimenti sfrutta la compressione esistente.

[Zoff]

È meno ma è sempre lavoro superfluo del server.
Tra l'altro stai comunque facendo chiamate al filesystem, sono i colli di bottiglia delle performance.

[SuperStep]

potrei anche aggiungere un ulteriore controllo, se è in fase di sviluppo, "l'assemblatore" fa il controllo dell'update dei file, altrimenti no.

Volevo aggiungere anche un compilatore CSS come SCSS o SASS, in modo da avere una cosa del genere:

da una parte tutti i sorgenti (CSS / JS) commentati bene con funzioni extra create da me;

dall'altra i file minimizzati ai minimi termini, in un solo file, più veloci per il trasferimento.

[Zoff]

È la prassi per il deploy sui sistemi di produzione, obbligatoria per sistemi ad elevato utilizzo.
Si esegue la compressione di tutti i file.

Non mi è chiara questa frase:

Volevo aggiungere anche un compilatore CSS come SCSS o SASS

SCSS e SASS non sono compilatori CSS, sono generatori.
Non è che gli dai in pasto del CSS e loro te lo compilano/riducono.
Devi scrivere le regole nel loro linguaggio (generalmente piu' sintetico e versatile) poi questo viene tradotto in CSS.

[SuperStep]

hai ragione, forse compilatore non e il nome adeguato; quello che intendevo, e di creare un pacchetto, in grado di aggiungere "funzioni" al css, in modo da creare variabili, ecc, ma che non alteri il codice.

insomma lo scenario e questo:

da una parte ho del codice pulito, commentato, diviso in diversi file sparsi per varie directory in base alla "categoria". dall'altra, per ogni pagina, i vari file che la compongono, (css, javascript) vengono compressi e messi in un unico file.

ovviamente questa operazione di leggere e costruire, diventerebbe troppo pesante se eseguita anche quando l'applicazione non e in fase di sviluppo, quindi, questo processo viene eseguito solo se ci sono modifiche nei file,
ed a ogni collezione di file che viene generato, viene accorpato un identificativo, cosi invece di utilizzare 30 file, e preoccuparmi di come importare le dipendenze, passo il controllo a questo modulo, che colleziona il tutto, appena finito,
genera per ogni pagina dei file che contengono le dipendenze in un unico file. (che magari si trova in /build/css/abcdefghijkseed.css")

p.s. scusa per le lettere non accentate ma sono su una tastiera usa.