Manipolare il DOM con javascript

di il
4 risposte

Manipolare il DOM con javascript

Salve a tutti,
vorrei chiedervi un consiglio.
Vorrei realizzare una web app che modifica il DOM del sito.
In pratica, come fanno molti SaaS, vorrei creare un file js che gli utenti possono integrare nel loro sito (tipo quello di Google Analytics per capirci).
<script async src="miosito.com//v1/default/service.js?id=10081538515"></script>
Una volta che l'utente inserisce questo link il javascript inizia a comunicare con una piattaforma backend che gli passa dei parametri e tramite questi parametri fa comparire banner, popup o cose simili.
Tipo come fa sleeknote o servizi simili.
Premetto che non voglio creare un servizio come Sleeknote ma vorrei capire come fanno questi servizi a comunicare con il backend e costruire elementi html all'interno di un sito.
Vorrei imparare la logica di funzionamento e cosa studiare per essere in grado di implementare una cosa di questo tipo.
Oltretutto questi js devono essere indipendenti da librerie come jquery o altro.

Grazie.

4 Risposte

  • Re: Manipolare il DOM con javascript

    ecsolution ha scritto:


    Vorrei imparare la logica di funzionamento e cosa studiare per essere in grado di implementare una cosa di questo tipo.
    Quali sono le tue conoscenze di JavaScript e del DOM?
  • Re: Manipolare il DOM con javascript

    Diciamo intermedia.
    Stavo vedendo la libreria pure.js

    In pratica la mia idea è questa:
    1) dal sito faccio una chiamata XHR ad un api (che dovrò costruire) la quale mi restituisce un json con tutte le informazioni che mi servono.
    2) da questo json costruisco l'html

    A me verrebbe più facile costruire direrramente l'html lato server e poi inserirlo nel DOM ma non mi piace tanto l'idea di passare come risposta l'html.
    Pensavo che un json fosse una scelta più corretta.

    volevo capire se era corretto come procedimento.
    voi come lo gestireste?
  • Re: Manipolare il DOM con javascript

    ecsolution ha scritto:


    A me verrebbe più facile costruire direrramente l'html lato server e poi inserirlo nel DOM ma non mi piace tanto l'idea di passare come risposta l'html.
    Pensavo che un json fosse una scelta più corretta.
    volevo capire se era corretto come procedimento.
    voi come lo gestireste?
    Direi che è indifferente: tutto dipende da come decidi di imbastire la cosa.

    Sotto l'aspetto che poni non penso vi sia grande differenza, salvo il fatto che scaricando JSON devi lavorare maggiormente di DOM e JavaScript, ma sfrutti la potenza del cliente e risparmi CPU/banda sul server a discapito di una maggiore complessità del codice, mentre al contrario semplifichi di molto lo sviluppo poiché il rendering server side è tendenzialmente più facile, ma scarichi più contenuti e impieghi più CPU.

    Forse devi valutare anche l'entità dei contenuti veicolati e la difficoltà di riprodurli nel browser, e anche il numero di chiamate che ti aspetti di avere o il grado di customizzazione di ciò che mostri nella pagina.

    Quelli sopra sono in generale i "pro e contro" di entrambe le soluzioni.

    Forse ti conviene iniziare a sperimentare creando un PoC (Proof of Concept) e vedere se ci sono altre problematiche che si presentano, magari più rilevanti di questa.

    Ciao!
  • Re: Manipolare il DOM con javascript

    Ti ringrazio delle tue considerazioni.
    Ho fatto un pò di reverse engineering di una web app che fa qualcosa di simile.
    Loro costruiscono l'html da javascript e trasmettono solo il json
    il json ha un peso di solo 3kB
    il blocco html che viene creato avrebbe un peso di circa 30kB
    il file js che però ha tutta la logica pesa 1,5Mb
    ora sicuramente farà molte altre cose oltre a ricostruire l'html ma sarebbe interessante anche valutare questo aspetto.
    se per esempio il codice js per creare l'html (considerando di avere 5/10 layout differenti) potesse essere alleggerito di 800kB e quindi avere un file di 600kB anzichè 1,5Mb ci sarebbe un impatto migliore sul sito del cliente.
    Penso che in una prima fase trasmetterò l'html finale anzichè costruirlo da javascript.
    Grazie.
Devi accedere o registrarti per scrivere nel forum
4 risposte