Rendez-vous sur Arrakis

C'est lorsque nous croyons savoir quelque chose qu'il faut justement réfléchir un peu plus profondément. F. Herbert

jquery, vanilla javascript, css et dontpanic

Ces derniers jours, j'ai été obligé de coder en javascript. C'est une première pour moi. Jusque là, j'utilisais sans vergogne des bibliothèques qui requéraient jquery. Tout marchait bien, j'étais content.
Cependant, je dois héberger un site qui avait besoin de jquery. Soit je le mettais sur le serveur, ou bien j'utilisais les CDN aux dépens de la vie privée des visiteurs. Vous vous doutez que je n'ai pas choisi la seconde solution. La première était possible, mais c'est quand même une charge supplémentaire sur le serveur. Qui plus est, c'est une charge inutile, puisque tout, oui tout pouvait être réalisé en javascript simple.

J'ai pu remarquer au passage que les bibliothèques utilisant jquery ne faisaient pas tellement attention à l'optimisation du code, et appelaient une même fonction un nombre incalculable de fois alors qu'il vaut mieux attendre que le visiteur ait finit de faire défiler la page avant de mettre à jour l'affichage.

J'avais donc ce code jquery, qui affichait dans un

le titre du paragraphe actuellement affiché (h1, h2, h3…) :
 var timeout;
    if (timeout) {
        clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
        $(window).on('scroll', function() {
            $('body').find(':header').each(function(){
                if($(window).scrollTop() >= $(this).offset().top) {
                    var id = $(this).text();
                }
                $(".isread").text(id);
            });
        });
    }, 50);
 



Que j'ai pu modifier ainsi en javascript pur :
 
    var timeout_title;
 
    var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
 
    window.addEventListener('scroll', function(){
        clearTimeout(timeout_title);
        timeout_title = setTimeout(function(){
            for (var i =0; i < headers.length; i++) {
                if ( document.body.scrollTop + 50 >= headers[i].offsetTop ) {
                    document.getElementsByClassName("isread")[0].innerHTML =
                        headers[i].innerHTML;
                }
            }
        }, 100);
    });
 


Le nombre de lignes est quasiment le même, et c'est plus rapide!

J'ai donc creusé un peu plus cette histoire, pour en conclure qu'il vaut mieux faire du javascript simple que du jquery (du moins pour mes besoins). Il existe forcément des équivalents, puisque jquery est lui-même du javascript.

C'est pourquoi, suite à un gentil rapport de bug d'arpinux concernant dontpanic et un défaut dans les css, j'en ai profité pour retirer les appels à jquery dans le code de dontpanic.

J'avais besoin de récupérer des données au format JSON :
 $.getJSON("/_getinfos/{{movie_name}}/{{index}}",
                  function(data) {
                      $("#status").html(data.status);
                      $("#playlink").html(data.playlink);
                      $("#subtitles").html(data.subtitles);
                      $("#stop").html(data.stop);
                 });
 



Qui donne sans jquery :
  var request = new XMLHttpRequest();
              request.open('GET', '/_getinfos/{{movie_name}}/{{index}}', true);
  
              request.onload = function() {
                  if (request.status >= 200 && request.status < 400) {
                      data = JSON.parse(request.responseText);
                    document.getElementById("status").innerHTML = data.status;
                    document.getElementById("playlink").innerHTML = data.playlink;
                    document.getElementById("subtitles").innerHTML = data.subtitles;
                    document.getElementById("stop").innerHTML = data.stop;
                  }
              }
             request.send();
 


C'est un chouilla plus long, et peut certainement être optimisé (vu que ce n'est pas mon truc le js). Cependant, ça ne méritait pas de charger jquery, au risque de ne pas utiliser les derniers correctifs de sécurité.

C'est plus propre, on se sent mieux :)