De jQuery à Vanilla JS
vendredi 6 décembre 2013 à 06:43Bronco, le 06/12/2013 à 06:43
Plus clair et simple, je vois pas...
Hop... je prends ! :-P
(Permalink)
Sebsauvage, le 06/12/2013 à 07:09
Se passer de jQuery et revenir à du javascript de base ("vanilla") (via http://links.yosko.net/?sSSSBQ)
(Permalink)
Yosko, le 06/12/2013 à 09:40
Deux ou trois petits snippets pour se passer de jQuery pour des actions simples.
Je note tout particulièrement element.classList, qui fourni des fonctionnalités bien plus pratiques que le classique element.className (dont les .add, .remove, .toggle et .contains) !
J'étais justement plongé dans ce sujet pour jotter (si je veux rendre le wysiwyg désactivable, les autres fonctionnalités doivent pouvoir se passer de librairie).
Edit : c'est une traduction. Rendons à César ce qui est à César : https://gist.github.com/liamcurry/2597326
(Permalink)
Famille Michon, le 06/12/2013 à 10:30
Des astuces en Javascript :
- Evènements (fin de chargement de page, clic sur un élément) ;
- Sélections d'éléments ;
- Ajout d'attributs ;
- Ajout de classes ;
- Manipulation de DOM (ajout, clonage, vidage d'élément) ;
- Interrogation du DOM (obtention de l'élément parent, un élément est-il vide, obtention de l'élément suivant au même niveau) ;
- AJAX.
Je n'ai jamais utilisé jQuery car le dernier code JS que j'avais fait l'avait été avant l'invention de jQuery (et se contentait d'un fonctionnement simple : le plus compliqué que j'ai fait était un calculateur de craft pour un MMORPG).
Depuis quelques mois, à un rythme assez léger (faute de temps), je travaille sur un système de retransmission de parties d'échecs en ligne, en JS pur (sans bibliothèque). Pas grand chose non plus : décompte de temps, déplacement de pièces, parsing de fichier pgn, polling en AJAX. C'est probablement plus long à développer qu'en utilisant jQuery, mais ça fonctionne, et ça a l'avantage d'être bien plus léger. Et, mis à part le langage en lui-même qui a un comportement souvent bizarre, ça reste largement gérable (du moins quand on a un background minimum en développement).
Quoiqu'il en soit, ça va me servir pour les éléments qui me manquent. Et je suis content d'en avoir trouvés moi-même en partant quasiment de zéro. Ca veut dire que je suis pas trop rouillé pour apprendre un nouveau langage :)
(Permalink)
phyks, le 06/12/2013 à 14:38
Quelques comparaisons entre des fonctions de bases en jQuery et en Vanilla JS. Ce n'est pas forcément beaucoup plus verbeux, et on a (malheureusement) tendance à oublier le Vanilla JS. Cherchez comment faire n'importe quoi en JS, vous trouverez quelques réponses Vanilla JS, noyées sous des tonnes de solutions pour jQuery.
Et bien souvent, il n'y a pas besoin de charger *82ko* de lib *JUSTE* pour effacer un champ de formulaire quand on clique dessus. :/ Entre le vanilla JS et le CSS3, on peut déjà faire pas mal de choses, et même l'essentiel de ce que font 90% des sites...
Maintenant, il est clair que dès qu'on fait pas mal de choses sur une page (plusieurs requêtes ajax, ...) et qui ont chacune une méthode différente par navigateur, l'utilisation de jQuery est bien pratique :) Et encore... sur mon script pour trouver les vélibs à proximité (http://velib.phyks.me), je n'ai pas utilisé jQuery et mon fichier JS ne fait que 17ko, alors que tout le script repose sur de l'ajax.
(Permalink)
Httqm, le 06/12/2013 à 16:58
Est-il REELLEMENT nécessaire de charger 80KB de lib JS pour une utilisation basique ?
Ca se discute
NB : "Vanilla JS" n'est pas une libraire, c'est une expression pour dire "Javascript" sans bibliothèque".
(Permalink)
Vinc3r, le 29/08/2014 à 09:16
se passer de jquery
en bas de page est proposé zepto http://zeptojs.com/ "a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API"
(via sebsauvage)
(je cherche un slideshow javascript tout con qui n'utilise pas de framework, je crois avoir trouvé mon bonheur avec ça : http://www.media-division.com/fancy-javascript-slideshow-no-jquery/)
(Permalink)
HowTommy, le 30/08/2014 à 05:09
Intéressant, je ne connaissais pas tout :) [via Timo]
Après je recommanderait surtout de lire le premier commentaire qui résume ma pensée (voir ci-après)
Après oui, jQuery n'apporte rien de plus que le Vanilla JS sauf que...
jQuery apporte une simplicité de développement, de manipulation du DOM et d'interop qui est loin d'être négligeable... Ok c'est plus lourd que Vanilla. Ok c'est 91 ko à charger... Mais c'est compatible TOUS navigateurs, c'est plus rapide à utiliser et ça fait gagner un max de temps...
Quand on développe en temps limité, principalement en entreprise, on cherche l'efficacité au niveau du développement.
Ensuite... 91 ko ? Ok ça peut être beaucoup si on est en EDGE à la campagne... Mais merde... Aujourd'hui y'a du WIFI presque partout, de la 3G, 4G presque partout, etc. Sans compter que n'importe quel navigateur un minimum bien foutu mettra en cache ce fichier. Ensuite c'est roulez jeunesse, votre fichier jQuery est en cache et votre site n'aura eu à le charger qu'une fois.
Ah et oui, jQuery est moins performant que Vanilla JS. Mais encore une fois c'est NEGLIGEABLE. Sinon, si vous en êtes à ce niveau, vous pouvez aussi laisser tomber les foreach et for (car while est plus performant), les variables globales, les "==", etc. car vous devez être en train de coder un putain de jeu vidéo JS qui a besoin de toutes les perfs à dispo !
En travaillant dans le développement, on apprend à se concentrer sur ce qui est vraiment important : sortir des applications fonctionnelles, utilisables, plaisantes. Beaucoup de développeurs ont tendance à trop se concentrer sur l'inutile et le secondaire (faire un archi parfaite, avoir des perfs au top, etc.) et ce qu'ils font ne sortira jamais ou ne convaincra jamais. C'est d'ailleurs pour ça que souvent les applications qui buzzent ne sont jamais les plus performantes, mais celles qui se concentrent sur le métier. Pas sur la technique. C'est aussi le problème de la majorité des projets libres, trop centrés sur la technique et pas assez sur le besoin (Diaspora par exemple ? :)
Personnellement je vous dit OUI, utilisez jQuery si vous êtes déjà un bon développeur (si vous débutez, essayez d'apprendre quand même le JS Vanilla, c'est important). Pour moi, si vous n'utilisez pas jQuery c'est soit :
- que vous avez énormément de temps libre pour développer vos projets, et que vous n'avez aucun objectifs de rendement
- que vous préférez passer du temps sur des problèmes triviaux, déjà gérés par tous les frameworks du monde, plutôt que sur les enjeux métier (en gros vous développez surtout pour le plaisir de développer)
- que vous êtes un intégriste Vanilla JS, qui exècre jQuery car c'est trop commun et pas assez hipster développeur. On est un barbu JS ou on ne l'est pas.
Plutôt que de chercher à encourager les gens à utiliser Vanilla JS au lieu de jQuery, il vaudrait mieux partager des liens sur les bonnes pratiques jQuery et règles incontournables de JavaScript. Ca serait plus utile aux débutants je pense.
(Permalink)
Plus clair et simple, je vois pas...
Hop... je prends ! :-P
(Permalink)
Sebsauvage, le 06/12/2013 à 07:09
Se passer de jQuery et revenir à du javascript de base ("vanilla") (via http://links.yosko.net/?sSSSBQ)
(Permalink)
Yosko, le 06/12/2013 à 09:40
Deux ou trois petits snippets pour se passer de jQuery pour des actions simples.
Je note tout particulièrement element.classList, qui fourni des fonctionnalités bien plus pratiques que le classique element.className (dont les .add, .remove, .toggle et .contains) !
J'étais justement plongé dans ce sujet pour jotter (si je veux rendre le wysiwyg désactivable, les autres fonctionnalités doivent pouvoir se passer de librairie).
Edit : c'est une traduction. Rendons à César ce qui est à César : https://gist.github.com/liamcurry/2597326
(Permalink)
Famille Michon, le 06/12/2013 à 10:30
Des astuces en Javascript :
- Evènements (fin de chargement de page, clic sur un élément) ;
- Sélections d'éléments ;
- Ajout d'attributs ;
- Ajout de classes ;
- Manipulation de DOM (ajout, clonage, vidage d'élément) ;
- Interrogation du DOM (obtention de l'élément parent, un élément est-il vide, obtention de l'élément suivant au même niveau) ;
- AJAX.
Je n'ai jamais utilisé jQuery car le dernier code JS que j'avais fait l'avait été avant l'invention de jQuery (et se contentait d'un fonctionnement simple : le plus compliqué que j'ai fait était un calculateur de craft pour un MMORPG).
Depuis quelques mois, à un rythme assez léger (faute de temps), je travaille sur un système de retransmission de parties d'échecs en ligne, en JS pur (sans bibliothèque). Pas grand chose non plus : décompte de temps, déplacement de pièces, parsing de fichier pgn, polling en AJAX. C'est probablement plus long à développer qu'en utilisant jQuery, mais ça fonctionne, et ça a l'avantage d'être bien plus léger. Et, mis à part le langage en lui-même qui a un comportement souvent bizarre, ça reste largement gérable (du moins quand on a un background minimum en développement).
Quoiqu'il en soit, ça va me servir pour les éléments qui me manquent. Et je suis content d'en avoir trouvés moi-même en partant quasiment de zéro. Ca veut dire que je suis pas trop rouillé pour apprendre un nouveau langage :)
(Permalink)
phyks, le 06/12/2013 à 14:38
Quelques comparaisons entre des fonctions de bases en jQuery et en Vanilla JS. Ce n'est pas forcément beaucoup plus verbeux, et on a (malheureusement) tendance à oublier le Vanilla JS. Cherchez comment faire n'importe quoi en JS, vous trouverez quelques réponses Vanilla JS, noyées sous des tonnes de solutions pour jQuery.
Et bien souvent, il n'y a pas besoin de charger *82ko* de lib *JUSTE* pour effacer un champ de formulaire quand on clique dessus. :/ Entre le vanilla JS et le CSS3, on peut déjà faire pas mal de choses, et même l'essentiel de ce que font 90% des sites...
Maintenant, il est clair que dès qu'on fait pas mal de choses sur une page (plusieurs requêtes ajax, ...) et qui ont chacune une méthode différente par navigateur, l'utilisation de jQuery est bien pratique :) Et encore... sur mon script pour trouver les vélibs à proximité (http://velib.phyks.me), je n'ai pas utilisé jQuery et mon fichier JS ne fait que 17ko, alors que tout le script repose sur de l'ajax.
(Permalink)
Httqm, le 06/12/2013 à 16:58
Est-il REELLEMENT nécessaire de charger 80KB de lib JS pour une utilisation basique ?
Ca se discute
NB : "Vanilla JS" n'est pas une libraire, c'est une expression pour dire "Javascript" sans bibliothèque".
(Permalink)
Vinc3r, le 29/08/2014 à 09:16
se passer de jquery
en bas de page est proposé zepto http://zeptojs.com/ "a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API"
(via sebsauvage)
(je cherche un slideshow javascript tout con qui n'utilise pas de framework, je crois avoir trouvé mon bonheur avec ça : http://www.media-division.com/fancy-javascript-slideshow-no-jquery/)
(Permalink)
HowTommy, le 30/08/2014 à 05:09
Intéressant, je ne connaissais pas tout :) [via Timo]
Après je recommanderait surtout de lire le premier commentaire qui résume ma pensée (voir ci-après)
Après oui, jQuery n'apporte rien de plus que le Vanilla JS sauf que...
jQuery apporte une simplicité de développement, de manipulation du DOM et d'interop qui est loin d'être négligeable... Ok c'est plus lourd que Vanilla. Ok c'est 91 ko à charger... Mais c'est compatible TOUS navigateurs, c'est plus rapide à utiliser et ça fait gagner un max de temps...
Quand on développe en temps limité, principalement en entreprise, on cherche l'efficacité au niveau du développement.
Ensuite... 91 ko ? Ok ça peut être beaucoup si on est en EDGE à la campagne... Mais merde... Aujourd'hui y'a du WIFI presque partout, de la 3G, 4G presque partout, etc. Sans compter que n'importe quel navigateur un minimum bien foutu mettra en cache ce fichier. Ensuite c'est roulez jeunesse, votre fichier jQuery est en cache et votre site n'aura eu à le charger qu'une fois.
Ah et oui, jQuery est moins performant que Vanilla JS. Mais encore une fois c'est NEGLIGEABLE. Sinon, si vous en êtes à ce niveau, vous pouvez aussi laisser tomber les foreach et for (car while est plus performant), les variables globales, les "==", etc. car vous devez être en train de coder un putain de jeu vidéo JS qui a besoin de toutes les perfs à dispo !
En travaillant dans le développement, on apprend à se concentrer sur ce qui est vraiment important : sortir des applications fonctionnelles, utilisables, plaisantes. Beaucoup de développeurs ont tendance à trop se concentrer sur l'inutile et le secondaire (faire un archi parfaite, avoir des perfs au top, etc.) et ce qu'ils font ne sortira jamais ou ne convaincra jamais. C'est d'ailleurs pour ça que souvent les applications qui buzzent ne sont jamais les plus performantes, mais celles qui se concentrent sur le métier. Pas sur la technique. C'est aussi le problème de la majorité des projets libres, trop centrés sur la technique et pas assez sur le besoin (Diaspora par exemple ? :)
Personnellement je vous dit OUI, utilisez jQuery si vous êtes déjà un bon développeur (si vous débutez, essayez d'apprendre quand même le JS Vanilla, c'est important). Pour moi, si vous n'utilisez pas jQuery c'est soit :
- que vous avez énormément de temps libre pour développer vos projets, et que vous n'avez aucun objectifs de rendement
- que vous préférez passer du temps sur des problèmes triviaux, déjà gérés par tous les frameworks du monde, plutôt que sur les enjeux métier (en gros vous développez surtout pour le plaisir de développer)
- que vous êtes un intégriste Vanilla JS, qui exècre jQuery car c'est trop commun et pas assez hipster développeur. On est un barbu JS ou on ne l'est pas.
Plutôt que de chercher à encourager les gens à utiliser Vanilla JS au lieu de jQuery, il vaudrait mieux partager des liens sur les bonnes pratiques jQuery et règles incontournables de JavaScript. Ca serait plus utile aux débutants je pense.
(Permalink)