Où va-t-on avec JavaScript ? [Débat]

[gwinyam]

Envoyé par ernestrenan

j'ai entraperçu jquery mais ça me semble pas apporter grand chose.

Juste une importante harmonisation des différents navigateurs et une gestion poussée des évènements. Pas grand chose en somme.
(et c'est aussi vrai avec les concurrents comme Mootools, qooxdoo ou encore prototype et extjs)

[RomainVALERI]

Envoyé par ernestrenan

Alors qu'en pensant bien le truc ça se fait avec trois objets d'une cinquantaine de lignes, un peu d'ajax et un peu de javascript directement dans le html.

Heu... pourquoi ? un fichier JS externe pour toi c'est une usine à gaz ? ^^ Le propos commençait de manière sensée mais la nécessité de coller le JS directement dans le HTML j'avoue que je ne comprends pas

[Bovino]

Envoyé par ernestrenan

j'ai entraperçu jquery mais ça me semble pas apporter grand chose.

Un petit exemple alors...
Code jQuery

Code :

1
2
3
4
5
6
7
8
$('.survol').hover(
    function(){
        $(this).fadeTo('fast', 1);
    },
    function(){
        $(this).fadeTo('fast', 0.5);
    }
);

En vanilla JavaScript, tu serais obligé :

• De créer la fonctionnalité cross-browser pour récupérer des éléments par un nom de classe.
• Créer une animation pour faire varier l'opacité.
• Faire une boucle sur tous les éléments possédant la classe voulue.
• Sur chacun de ces éléments, gérer le mouseover et le mouseout.
• Sur ces deux événements, vérifier qu'il s'applique bien à l'élément voulu puis appliquer l'animation.

Bien entendu, je ne te parle pas ici de toutes les complications à appréhender.
Alors, combien de lignes de code pour la même fonctionnalité ?

[Lcf.vs]

Alors, combien de lignes de code pour la même fonctionnalité ?

Bien que je me doute que Bovino n'ai dit cette phrase dans ce sens, c'est vraiment l'argument (très souvent le seul) des fans de JQuery qui me hérisse le poil.

En effet, au niveau du nombre de ligne à coder soi-même, on constate une différence flagrante, néanmoins, ce à quoi ces fans pensent moins, c'est au nombre de lignes contenues dans leur bibliothèque/framework, afin de leur permettre de faire ceci ou cela.

Faites la somme du code de la lib' + celles pour l'utilisation que l'on veut en faire et on arrive généralement à bien plus qu'en codant en pur.

Pareillement, en terme d'optimisation de ressources nécessaires pour l'exécution d'une fonctionnalité, la lib' va tester et instancier plein de choses dont on se passerait très bien.

L'autre chose qui me fait bondir, c'est le fameux "bah, 50Mo de cache, de nos jours, c'est rien du tout".

Pourquoi? Les connexions internet sont de plus en plus rapides et on a de plus en plus de volume (voire illimité), ok... Néanmoins, ce n'est pas la seule réalité!

Perso, j'accède à internet via une connexion mobile (down : ~80Ko/s et volume : 2Go/mois). De plus, la plupart des développeurs sont en hébergement mutualisé où la gestion du cache est, dans la plupart des cas, hors des possibilités de personnalisations et, du coup, on se retrouve avec une lib' qui est intégralement chargée à chaque page!!!

Heureusement que nous ne sommes pas encore aux connexions en To/s, sinon, on aurait des lib' en gigas et je ne verrais jamais une page complète, avec un seul forfait.

Autre point non-évoqué, bien que JQuery soit connu pour ses optimisations, je remarque presque chaque jour sa grande faiblesse au niveau de la gestion des connexions internet faibles/instables. "le script ne réponds plus..."

Enfin, une anecdote assez cocasse qui illustre ce que certains font de JQuery. J'ai visité les réalisations d'une boîte de dev, dans le cadre de mes recherches d'emploi et suis tombé sur une lightbox, en plein milieu de l'écran m'avertissant que l'auteur du site web n'a pas payé la licence du plugin JQuery utilisé et me demandant de le contacter afin qu'il paie pour que je n'aie plus à voir ce message.

La méconnaissance de ce que les gens utilisent, ajoutée au caractère ésotérique souvent retrouvé en JQuery fait que les gens ne savent même pas ce qu'ils importent et, donc, s'il est possible de se retrouver dans ce genre de situations, il l'est tout autant pour du code dangereux (servant à du vol d'informations, de comptes, etc.).

[gwinyam]

Envoyé par Lcf.vs

En effet, au niveau du nombre de ligne à coder soi-même, on constate une différence flagrante, néanmoins, ce à quoi ces fans pensent moins, c'est au nombre de lignes contenues dans leur bibliothèque/framework, afin de leur permettre de faire ceci ou cela.

C'est pour ça que les développeurs de jQuery eux-mêmes suggèrent fortement de ne se servir de jQuery que si nécessaire (voir slides Proven performance tips de Addy Osmani)

Envoyé par Lcf.vs

Perso, j'accède à internet via une connexion mobile (down : ~80Ko/s et volume : 2Go/mois). De plus, la plupart des développeurs sont en hébergement mutualisé où la gestion du cache est, dans la plupart des cas, hors des possibilités de personnalisations et, du coup, on se retrouve avec une lib' qui est intégralement chargée à chaque page!!!

Ton cas n'est pas rare en plus mais c'est pour ça que des frameworks comme jQuery Mobile ou Sencha Touch ou encore jQTouch existent, pour éviter ce rechargement systématique.

Envoyé par Lcf.vs

Autre point non-évoqué, bien que JQuery soit connu pour ses optimisations, je remarque presque chaque jour sa grande faiblesse au niveau de la gestion des connexions internet faibles/instables. "le script ne réponds plus..."

Jamais vu mais je veux bien un exemple.

Envoyé par Lcf.vs

Enfin, une anecdote assez cocasse qui illustre ce que certains font de JQuery. J'ai visité les réalisations d'une boîte de dev, dans le cadre de mes recherches d'emploi et suis tombé sur une lightbox, en plein milieu de l'écran m'avertissant que l'auteur du site web n'a pas payé la licence du plugin JQuery utilisé et me demandant de le contacter afin qu'il paie pour que je n'aie plus à voir ce message.

La méconnaissance de ce que les gens utilisent, ajoutée au caractère ésotérique souvent retrouvé en JQuery fait que les gens ne savent même pas ce qu'ils importent et, donc, s'il est possible de se retrouver dans ce genre de situations, il l'est tout autant pour du code dangereux (servant à du vol d'informations, de comptes, etc.).

Là le problème relève, et je suis tenté de dire "encore une fois", du bon sens. Et de la formation des mecs. On se retrouve avec des charrettes de développeurs incomplètement voire pas du tout formé concernant JS (mon parcours en ait la preuve, je n'ai jamais appris JS en cours) et d'une belle brochette d'utilisateurs encore plus boulets. Si les gens avaient un peu de bon sens, on en serait pas là. Mais bon, on refait pas le monde.

[mekal]

jquery c'est un truc d' usine en gros c'est fait pour de la productivité et je trouve que l'on en fait trop on a l'impression que sans jquery le web serait moche y qu'a voir sur le forum a chaque fois que quelqu'un cherche un truc il est automatiquement redirigé vers du jquery comme si les scripts en jquery etaient toujours parfaits je prend par exemplece sujet ou on voit dans le html des height et width en dure pour definir la taille de l'image et sans la balise style

et quandi je regade la source qui apparement utilise jquery je me dit tout ca pour si peut

Code :

(function(g){var q={vertical:!1,rtl:!1,start:1,offset:1,size:null,scroll:3,visible:null,animation:"normal",easing:"swing",auto:0,wrap:null,initCallback:null,setupCallback:null,reloadCallback:null,itemLoadCallback:null,itemFirstInCallback:null,itemFirstOutCallback:null,itemLastInCallback:null,itemLastOutCallback:null,itemVisibleInCallback:null,itemVisibleOutCallback:null,animationStepCallback:null,buttonNextHTML:"<div></div>",buttonPrevHTML:"<div></div>",buttonNextEvent:"click",buttonPrevEvent:"click", buttonNextCallback:null,buttonPrevCallback:null,itemFallbackDimension:null},m=!1;g(window).bind("load.jcarousel",function(){m=!0});g.jcarousel=function(a,c){this.options=g.extend({},q,c||{});this.autoStopped=this.locked=!1;this.buttonPrevState=this.buttonNextState=this.buttonPrev=this.buttonNext=this.list=this.clip=this.container=null;if(!c||c.rtl===void 0)this.options.rtl=(g(a).attr("dir")||g("html").attr("dir")||"").toLowerCase()=="rtl";this.wh=!this.options.vertical?"width":"height";this.lt=!this.options.vertical? this.options.rtl?"right":"left":"top";for(var b="",d=a.className.split(" "),f=0;f<d.length;f++)if(d[f].indexOf("jcarousel-skin")!=-1){g(a).removeClass(d[f]);b=d[f];break}a.nodeName.toUpperCase()=="UL"||a.nodeName.toUpperCase()=="OL"?(this.list=g(a),this.clip=this.list.parents(".jcarousel-clip"),this.container=this.list.parents(".jcarousel-container")):(this.container=g(a),this.list=this.container.find("ul,ol").eq(0),this.clip=this.container.find(".jcarousel-clip"));if(this.clip.size()===0)this.clip= this.list.wrap("<div></div>").parent();if(this.container.size()===0)this.container=this.clip.wrap("<div></div>").parent();b!==""&&this.container.parent()[0].className.indexOf("jcarousel-skin")==-1&&this.container.wrap('<div class=" '+b+'"></div>');this.buttonPrev=g(".jcarousel-prev",this.container);if(this.buttonPrev.size()===0&&this.options.buttonPrevHTML!==null)this.buttonPrev=g(this.options.buttonPrevHTML).appendTo(this.container);this.buttonPrev.addClass(this.className("jcarousel-prev"));this.buttonNext= g(".jcarousel-next",this.container);if(this.buttonNext.size()===0&&this.options.buttonNextHTML!==null)this.buttonNext=g(this.options.buttonNextHTML).appendTo(this.container);this.buttonNext.addClass(this.className("jcarousel-next"));this.clip.addClass(this.className("jcarousel-clip")).css({position:"relative"});this.list.addClass(this.className("jcarousel-list")).css({overflow:"hidden",position:"relative",top:0,margin:0,padding:0}).css(this.options.rtl?"right":"left",0);this.container.addClass(this.className("jcarousel-container")).css({position:"relative"}); !this.options.vertical&&this.options.rtl&&this.container.addClass("jcarousel-direction-rtl").attr("dir","rtl");var j=this.options.visible!==null?Math.ceil(this.clipping()/this.options.visible):null,b=this.list.children("li"),e=this;if(b.size()>0){var h=0,i=this.options.offset;b.each(function(){e.format(this,i++);h+=e.dimension(this,j)});this.list.css(this.wh,h+100+"px");if(!c||c.size===void 0)this.options.size=b.size()}this.container.css("display","block");this.buttonNext.css("display","block");this.buttonPrev.css("display", "block");this.funcNext=function(){e.next()};this.funcPrev=function(){e.prev()};this.funcResize=function(){e.resizeTimer&&clearTimeout(e.resizeTimer);e.resizeTimer=setTimeout(function(){e.reload()},100)};this.options.initCallback!==null&&this.options.initCallback(this,"init");!m&&g.browser.safari?(this.buttons(!1,!1),g(window).bind("load.jcarousel",function(){e.setup()})):this.setup()};var f=g.jcarousel;f.fn=f.prototype={jcarousel:"0.2.8"};f.fn.extend=f.extend=g.extend;f.fn.extend({setup:function(){this.prevLast= this.prevFirst=this.last=this.first=null;this.animating=!1;this.tail=this.resizeTimer=this.timer=null;this.inTail=!1;if(!this.locked){this.list.css(this.lt,this.pos(this.options.offset)+"px");var a=this.pos(this.options.start,!0);this.prevFirst=this.prevLast=null;this.animate(a,!1);g(window).unbind("resize.jcarousel",this.funcResize).bind("resize.jcarousel",this.funcResize);this.options.setupCallback!==null&&this.options.setupCallback(this)}},reset:function(){this.list.empty();this.list.css(this.lt, "0px");this.list.css(this.wh,"10px");this.options.initCallback!==null&&this.options.initCallback(this,"reset");this.setup()},reload:function(){this.tail!==null&&this.inTail&&this.list.css(this.lt,f.intval(this.list.css(this.lt))+this.tail);this.tail=null;this.inTail=!1;this.options.reloadCallback!==null&&this.options.reloadCallback(this);if(this.options.visible!==null){var a=this,c=Math.ceil(this.clipping()/this.options.visible),b=0,d=0;this.list.children("li").each(function(f){b+=a.dimension(this, c);f+1<a.first&&(d=b)});this.list.css(this.wh,b+"px");this.list.css(this.lt,-d+"px")}this.scroll(this.first,!1)},lock:function(){this.locked=!0;this.buttons()},unlock:function(){this.locked=!1;this.buttons()},size:function(a){if(a!==void 0)this.options.size=a,this.locked||this.buttons();return this.options.size},has:function(a,c){if(c===void 0||!c)c=a;if(this.options.size!==null&&c>this.options.size)c=this.options.size;for(var b=a;b<=c;b++){var d=this.get(b);if(!d.length||d.hasClass("jcarousel-item-placeholder"))return!1}return!0}, get:function(a){return g(">.jcarousel-item-"+a,this.list)},add:function(a,c){var b=this.get(a),d=0,p=g(c);if(b.length===0)for(var j,e=f.intval(a),b=this.create(a);;){if(j=this.get(--e),e<=0||j.length){e<=0?this.list.prepend(b):j.after(b);break}}else d=this.dimension(b);p.get(0).nodeName.toUpperCase()=="LI"?(b.replaceWith(p),b=p):b.empty().append(c);this.format(b.removeClass(this.className("jcarousel-item-placeholder")),a);p=this.options.visible!==null?Math.ceil(this.clipping()/this.options.visible): null;d=this.dimension(b,p)-d;a>0&&a<this.first&&this.list.css(this.lt,f.intval(this.list.css(this.lt))-d+"px");this.list.css(this.wh,f.intval(this.list.css(this.wh))+d+"px");return b},remove:function(a){var c=this.get(a);if(c.length&&!(a>=this.first&&a<=this.last)){var b=this.dimension(c);a<this.first&&this.list.css(this.lt,f.intval(this.list.css(this.lt))+b+"px");c.remove();this.list.css(this.wh,f.intval(this.list.css(this.wh))-b+"px")}},next:function(){this.tail!==null&&!this.inTail?this.scrollTail(!1): this.scroll((this.options.wrap=="both"||this.options.wrap=="last")&&this.options.size!==null&&this.last==this.options.size?1:this.first+this.options.scroll)},prev:function(){this.tail!==null&&this.inTail?this.scrollTail(!0):this.scroll((this.options.wrap=="both"||this.options.wrap=="first")&&this.options.size!==null&&this.first==1?this.options.size:this.first-this.options.scroll)},scrollTail:function(a){if(!this.locked&&!this.animating&&this.tail){this.pauseAuto();var c=f.intval(this.list.css(this.lt)), c=!a?c-this.tail:c+this.tail;this.inTail=!a;this.prevFirst=this.first;this.prevLast=this.last;this.animate(c)}},scroll:function(a,c){!this.locked&&!this.animating&&(this.pauseAuto(),this.animate(this.pos(a),c))},pos:function(a,c){var b=f.intval(this.list.css(this.lt));if(this.locked||this.animating)return b;this.options.wrap!="circular"&&(a=a<1?1:this.options.size&&a>this.options.size?this.options.size:a);for(var d=this.first>a,g=this.options.wrap!="circular"&&this.first<=1?1:this.first,j=d?this.get(g): this.get(this.last),e=d?g:g-1,h=null,i=0,k=!1,l=0;d?--e>=a:++e<a;){h=this.get(e);k=!h.length;if(h.length===0&&(h=this.create(e).addClass(this.className("jcarousel-item-placeholder")),j[d?"before":"after"](h),this.first!==null&&this.options.wrap=="circular"&&this.options.size!==null&&(e<=0||e>this.options.size)))j=this.get(this.index(e)),j.length&&(h=this.add(e,j.clone(!0)));j=h;l=this.dimension(h);k&&(i+=l);if(this.first!==null&&(this.options.wrap=="circular"||e>=1&&(this.options.size===null||e<= this.options.size)))b=d?b+l:b-l}for(var g=this.clipping(),m=[],o=0,n=0,j=this.get(a-1),e=a;++o;){h=this.get(e);k=!h.length;if(h.length===0){h=this.create(e).addClass(this.className("jcarousel-item-placeholder"));if(j.length===0)this.list.prepend(h);else j[d?"before":"after"](h);if(this.first!==null&&this.options.wrap=="circular"&&this.options.size!==null&&(e<=0||e>this.options.size))j=this.get(this.index(e)),j.length&&(h=this.add(e,j.clone(!0)))}j=h;l=this.dimension(h);if(l===0)throw Error("jCarousel: No width/height set for items. This will cause an infinite loop. Aborting..."); this.options.wrap!="circular"&&this.options.size!==null&&e>this.options.size?m.push(h):k&&(i+=l);n+=l;if(n>=g)break;e++}for(h=0;h<m.length;h++)m[h].remove();i>0&&(this.list.css(this.wh,this.dimension(this.list)+i+"px"),d&&(b-=i,this.list.css(this.lt,f.intval(this.list.css(this.lt))-i+"px")));i=a+o-1;if(this.options.wrap!="circular"&&this.options.size&&i>this.options.size)i=this.options.size;if(e>i){o=0;e=i;for(n=0;++o;){h=this.get(e--);if(!h.length)break;n+=this.dimension(h);if(n>=g)break}}e=i-o+ 1;this.options.wrap!="circular"&&e<1&&(e=1);if(this.inTail&&d)b+=this.tail,this.inTail=!1;this.tail=null;if(this.options.wrap!="circular"&&i==this.options.size&&i-o+1>=1&&(d=f.intval(this.get(i).css(!this.options.vertical?"marginRight":"marginBottom")),n-d>g))this.tail=n-g-d;if(c&&a===this.options.size&&this.tail)b-=this.tail,this.inTail=!0;for(;a-- >e;)b+=this.dimension(this.get(a));this.prevFirst=this.first;this.prevLast=this.last;this.first=e;this.last=i;return b},animate:function(a,c){if(!this.locked&& !this.animating){this.animating=!0;var b=this,d=function(){b.animating=!1;a===0&&b.list.css(b.lt,0);!b.autoStopped&&(b.options.wrap=="circular"||b.options.wrap=="both"||b.options.wrap=="last"||b.options.size===null||b.last<b.options.size||b.last==b.options.size&&b.tail!==null&&!b.inTail)&&b.startAuto();b.buttons();b.notify("onAfterAnimation");if(b.options.wrap=="circular"&&b.options.size!==null)for(var c=b.prevFirst;c<=b.prevLast;c++)c!==null&&!(c>=b.first&&c<=b.last)&&(c<1||c>b.options.size)&&b.remove(c)}; this.notify("onBeforeAnimation");if(!this.options.animation||c===!1)this.list.css(this.lt,a+"px"),d();else{var f=!this.options.vertical?this.options.rtl?{right:a}:{left:a}:{top:a},d={duration:this.options.animation,easing:this.options.easing,complete:d};if(g.isFunction(this.options.animationStepCallback))d.step=this.options.animationStepCallback;this.list.animate(f,d)}}},startAuto:function(a){if(a!==void 0)this.options.auto=a;if(this.options.auto===0)return this.stopAuto();if(this.timer===null){this.autoStopped= !1;var c=this;this.timer=window.setTimeout(function(){c.next()},this.options.auto*1E3)}},stopAuto:function(){this.pauseAuto();this.autoStopped=!0},pauseAuto:function(){if(this.timer!==null)window.clearTimeout(this.timer),this.timer=null},buttons:function(a,c){if(a==null&&(a=!this.locked&&this.options.size!==0&&(this.options.wrap&&this.options.wrap!="first"||this.options.size===null||this.last<this.options.size),!this.locked&&(!this.options.wrap||this.options.wrap=="first")&&this.options.size!==null&& this.last>=this.options.size))a=this.tail!==null&&!this.inTail;if(c==null&&(c=!this.locked&&this.options.size!==0&&(this.options.wrap&&this.options.wrap!="last"||this.first>1),!this.locked&&(!this.options.wrap||this.options.wrap=="last")&&this.options.size!==null&&this.first==1))c=this.tail!==null&&this.inTail;var b=this;this.buttonNext.size()>0?(this.buttonNext.unbind(this.options.buttonNextEvent+".jcarousel",this.funcNext),a&&this.buttonNext.bind(this.options.buttonNextEvent+".jcarousel",this.funcNext), this.buttonNext[a?"removeClass":"addClass"](this.className("jcarousel-next-disabled")).attr("disabled",a?!1:!0),this.options.buttonNextCallback!==null&&this.buttonNext.data("jcarouselstate")!=a&&this.buttonNext.each(function(){b.options.buttonNextCallback(b,this,a)}).data("jcarouselstate",a)):this.options.buttonNextCallback!==null&&this.buttonNextState!=a&&this.options.buttonNextCallback(b,null,a);this.buttonPrev.size()>0?(this.buttonPrev.unbind(this.options.buttonPrevEvent+".jcarousel",this.funcPrev), c&&this.buttonPrev.bind(this.options.buttonPrevEvent+".jcarousel",this.funcPrev),this.buttonPrev[c?"removeClass":"addClass"](this.className("jcarousel-prev-disabled")).attr("disabled",c?!1:!0),this.options.buttonPrevCallback!==null&&this.buttonPrev.data("jcarouselstate")!=c&&this.buttonPrev.each(function(){b.options.buttonPrevCallback(b,this,c)}).data("jcarouselstate",c)):this.options.buttonPrevCallback!==null&&this.buttonPrevState!=c&&this.options.buttonPrevCallback(b,null,c);this.buttonNextState= a;this.buttonPrevState=c},notify:function(a){var c=this.prevFirst===null?"init":this.prevFirst<this.first?"next":"prev";this.callback("itemLoadCallback",a,c);this.prevFirst!==this.first&&(this.callback("itemFirstInCallback",a,c,this.first),this.callback("itemFirstOutCallback",a,c,this.prevFirst));this.prevLast!==this.last&&(this.callback("itemLastInCallback",a,c,this.last),this.callback("itemLastOutCallback",a,c,this.prevLast));this.callback("itemVisibleInCallback",a,c,this.first,this.last,this.prevFirst, this.prevLast);this.callback("itemVisibleOutCallback",a,c,this.prevFirst,this.prevLast,this.first,this.last)},callback:function(a,c,b,d,f,j,e){if(!(this.options[a]==null||typeof this.options[a]!="object"&&c!="onAfterAnimation")){var h=typeof this.options[a]=="object"?this.options[a][c]:this.options[a];if(g.isFunction(h)){var i=this;if(d===void 0)h(i,b,c);else if(f===void 0)this.get(d).each(function(){h(i,this,d,b,c)});else for(var a=function(a){i.get(a).each(function(){h(i,this,a,b,c)})},k=d;k<=f;k++)k!== null&&!(k>=j&&k<=e)&&a(k)}}},create:function(a){return this.format("<li></li>",a)},format:function(a,c){for(var a=g(a),b=a.get(0).className.split(" "),d=0;d<b.length;d++)b[d].indexOf("jcarousel-")!=-1&&a.removeClass(b[d]);a.addClass(this.className("jcarousel-item")).addClass(this.className("jcarousel-item-"+c)).css({"float":this.options.rtl?"right":"left","list-style":"none"}).attr("jcarouselindex",c);return a},className:function(a){return a+" "+a+(!this.options.vertical?"-horizontal":"-vertical")}, dimension:function(a,c){var b=g(a);if(c==null)return!this.options.vertical?b.outerWidth(!0)||f.intval(this.options.itemFallbackDimension):b.outerHeight(!0)||f.intval(this.options.itemFallbackDimension);else{var d=!this.options.vertical?c-f.intval(b.css("marginLeft"))-f.intval(b.css("marginRight")):c-f.intval(b.css("marginTop"))-f.intval(b.css("marginBottom"));g(b).css(this.wh,d+"px");return this.dimension(b)}},clipping:function(){return!this.options.vertical?this.clip[0].offsetWidth-f.intval(this.clip.css("borderLeftWidth"))- f.intval(this.clip.css("borderRightWidth")):this.clip[0].offsetHeight-f.intval(this.clip.css("borderTopWidth"))-f.intval(this.clip.css("borderBottomWidth"))},index:function(a,c){if(c==null)c=this.options.size;return Math.round(((a-1)/c-Math.floor((a-1)/c))*c)+1}});f.extend({defaults:function(a){return g.extend(q,a||{})},intval:function(a){a=parseInt(a,10);return isNaN(a)?0:a},windowLoaded:function(){m=!0}});g.fn.jcarousel=function(a){if(typeof a=="string"){var c=g(this).data("jcarousel"),b=Array.prototype.slice.call(arguments, 1);return c[a].apply(c,b)}else return this.each(function(){var b=g(this).data("jcarousel");b?(a&&g.extend(b.options,a),b.reload()):g(this).data("jcarousel",new f(this,a))})}})(jQuery);

et en plus c'est compressé et sans le css

le voici en live

il y a quand meme plus cour pour ce qui est demandé

et c'est inspiré d'une autre qui me fait me demandé si elle etait en jquery

[Lcf.vs]

Envoyé par gwinyam

Ton cas n'est pas rare en plus mais c'est pour ça que des frameworks comme jQuery Mobile ou Sencha Touch ou encore jQTouch existent, pour éviter ce rechargement systématique.

Hum, je parlais de se connecter depuis son note/netbook via une connexion mobile, le navigateur n'étant pas détecté comme un navigateur mobile, les solutions que tu cites ne sont donc pas prises en compte, sauf erreur de ma part...

Envoyé par gwinyam

Jamais vu mais je veux bien un exemple.

Des exemples? le chat de DVP, GMail et plein d'autres...

Et quand tu regardes d'où provient l'erreur -> le core AJAX de JQuery

Pourtant, c'est pas bien compliqué de faire un gestionnaire de requêtes AJAX stable, se mettant en pause en cas de perte de connexion et reprenant lorsque la connexion est rétablie...

[gwinyam]

Oui enfin c'est pas un problème de JS mais surtout de bon sens. Encore une fois

[danielhagnoul]

Envoyé par mekal

[...] je prend par exemplece sujet ou on voit dans le html des height et width en dure pour definir la taille de l'image [...]

Bonsoir

Il y a longtemps que les feuilles de style (CSS) existent et que l'on prône la séparation des codes HTML, CSS, et JS. Comme souvent, ce n'est pas un problème jQuery, mais une méconnaissance des fondamentaux.

Pour le reste, je me suis déjà exprimé sur les désavantages et les avantages de jQuery : ici, dans la FAQ JQuery et ailleurs.

http://www.developpez.net/forums/d10...t/#post5635026

http://javascript.developpez.com/faq/jquery/

[pomeh]

Envoyé par ernestrenan

Ca me fait penser au projet sur lequel je bosse : un stagiaire a copié-collé un code tout fait sur internet.

Que ce soit en Javascript ou dans un autre langage, avec ou sans framework, je penses que le problème est ailleurs... Et ce n'est pas un argument valable sur le "pour ou contre l'utilisation des framework Javascript"

Envoyé par ernestrenan

Sinon pour les frameworks j'utilise js depuis trop peu de temps pour pouvoir me prononcer, j'ai entraperçu jquery mais ça me semble pas apporter grand chose.

Le problème est toujours le même, il n'y a pas de réponse "oui il faut" ou "non il ne faut pas", l'essentiel est de savoir que ça existe et de savoir dans quelles situations s'en servir ou s'en passer. Si c'est pour faire le site du boulanger du quartier, tu peux réussir à te débrouiller sans problème, par contre si c'est pour faire une application Web avec des effets bling bling de tous les côtés, de l'AJAX dans tous les sens, une compatibilité de malade sur tous les navigateurs, ça vaut peut-être le coup d'y réfléchir. Après avoir peser le pour et le contre tu pourras prendre ta décision de "oui ça va m'apporter des choses" ou "non ce n'est pas la peine j'ai déjà ce qu'il me faut".

Envoyé par Lcf.vs

Pareillement, en terme d'optimisation de ressources nécessaires pour l'exécution d'une fonctionnalité, la lib' va tester et instancier plein de choses dont on se passerait très bien.

Je serais curieux de voir une ligne de code de jQuery ou autre qui ne sert à rien.

Envoyé par Lcf.vs

L'autre chose qui me fait bondir, c'est le fameux "bah, 50Mo de cache, de nos jours, c'est rien du tout".

Pourquoi? Les connexions internet sont de plus en plus rapides et on a de plus en plus de volume (voire illimité), ok... Néanmoins, ce n'est pas la seule réalité!

Perso, j'accède à internet via une connexion mobile (down : ~80Ko/s et volume : 2Go/mois). De plus, la plupart des développeurs sont en hébergement mutualisé où la gestion du cache est, dans la plupart des cas, hors des possibilités de personnalisations et, du coup, on se retrouve avec une lib' qui est intégralement chargée à chaque page!!!

Heureusement que nous ne sommes pas encore aux connexions en To/s, sinon, on aurait des lib' en gigas et je ne verrais jamais une page complète, avec un seul forfait.

C'est pour cela que les CDN existent et que la plupart des versions des frameworks sont hébergés par quelques petites sociétés telles que Google, Microsoft... Il me semble avoir lu quelque part il y a quelques temps que d'après une étude sur un nombre significatif de sites utilisant jQuery à partir du CDN Google, 80% des visiteurs avait déjà le fichier en cache. Si tous les développeurs faisait ce petit effort là on pourrait atteindre un nombre encore plus important et le poids du framework ne serait plus vraiment un problème (sauf la première fois ou lors d'une mise à jour, certes). Je ne parles pas des différents plugins qui peuvent être utilisés sur les sites car là effectivement cela peut poser des problèmes au niveau poids et temps de téléchargement. Après il y a toujours des bonnes pratiques d'obfuscation du code, de compression des contenus etc etc qui permettent de limiter quand même pas mal ce genre de problématiques (c'est pas résolu définitivement, mais c'est un bon début).

Envoyé par Lcf.vs

Autre point non-évoqué, bien que JQuery soit connu pour ses optimisations, je remarque presque chaque jour sa grande faiblesse au niveau de la gestion des connexions internet faibles/instables. "le script ne réponds plus..."

Jamais vu non plus... Tu peux rapporter ce bug sur le bugtracker de jQuery si tu veux, je penses qu'il serait accepter et ce serait bénéfique pour tout le monde
Hey au fait, je ne suis pas certain que GMail utilise un quelconque framework "publique", enfin affaire à suivre... :p

Envoyé par Lcf.vs

Enfin, une anecdote assez cocasse qui illustre ce que certains font de JQuery. J'ai visité les réalisations d'une boîte de dev, dans le cadre de mes recherches d'emploi et suis tombé sur une lightbox, en plein milieu de l'écran m'avertissant que l'auteur du site web n'a pas payé la licence du plugin JQuery utilisé et me demandant de le contacter afin qu'il paie pour que je n'aie plus à voir ce message.

La méconnaissance de ce que les gens utilisent, ajoutée au caractère ésotérique souvent retrouvé en JQuery fait que les gens ne savent même pas ce qu'ils importent et, donc, s'il est possible de se retrouver dans ce genre de situations, il l'est tout autant pour du code dangereux (servant à du vol d'informations, de comptes, etc.).

Comme je l'ai dis plus haut, ici le problème ne se situe pas au niveau de jQuery ou d'un quelconque framework, mais bien entre la chaise et le clavier...

[Lcf.vs]

Envoyé par pomeh

Je serais curieux de voir une ligne de code de jQuery ou autre qui ne sert à rien.

Je ne dis pas que des choses ne servent à rien mais bien que JQuery initialise certaines choses, pour son propre environnement, alors que pour l'usage qu'on peut en faire, tout n'est pas nécessaire.

Envoyé par pomeh

Jamais vu non plus... Tu peux rapporter ce bug sur le bugtracker de jQuery si tu veux, je penses qu'il serait accepter et ce serait bénéfique pour tout le monde

A moins d'avoir une connexion aussi pourrie que la mienne, pas étonnant que vous ne l'ayez jamais vue... ^^

Envoyé par pomeh

Hey au fait, je ne suis pas certain que GMail utilise un quelconque framework "publique", enfin affaire à suivre... :p

Je ne l'invente pas, tout de même... je ne fais que relater le message que me renvoie Firefox

Envoyé par pomeh

Comme je l'ai dis plus haut, ici le problème ne se situe pas au niveau de jQuery ou d'un quelconque framework, mais bien entre la chaise et le clavier...

Je suis bien d'accord sur ce fait mais lorsqu'on regarde la source non-compressée, non-minifiée et non-obfusquée de certains plugins, même pour quelqu'un ayant une connaissance assez pointue du JS, le code n'en est pas forcément plus compréhensible, alors pour la majorité des utilisateurs de JQuery...

D'autant plus que ce côté "ésotérique" est bien souvent volontaire.

[zevince]

juste pour ajouter mon grain de sel dans l'histoire..

Pour moi les deux principaux avantages de jquery sont :
- ne pas ré-écrire des fonctions existantes et probablement mieux écrites que ce que je pourrais faire moi même
- avoir un comportement très proche sur toutes les plateformes, y compris mobiles et tablettes tactiles (mis a part les soucis d'event click / touch, mais si j'ai bien compris ça devrait être pris en compte bientôt aussi)

Pour le coup du plugin payant, c'est une énorme arnaque déjà, car la majorité des plugins payants sont des plugins gratuits avec une couche de design en plus.. ou quelques fonctionnalités qu'on peut ajouter soi même quand on comprend ce qu'on utilise.. Payer pour un plugin jquery me semble absurde.. !

Pour la qualité du framework en lui même, je l'utilise depuis 6 ans environ et a chaque fois que j'ai cru a des bugs venant de jquery, c’était en fait moi qui l'avait commise, l'erreur.. Alors oui, on a plus de contrôle quand on fait du js "pur", mais qui peut se permettre de prendre 2 mois pour une application complexe en javascript qui serait faite en 1 semaine avec jQuery ? D'autant que ca n'a jamais empêché les bugs, voire même au contraire, vu qu'il faut vraiment tester chaque navigateur / système / plateforme

Enfin bon, il y a des avis assez tranchés ici.. En php par exemple, je ne suis pas fan de frameworks, même si je travaille en MVC et qu'en théorie, ils devraient me convenir.. Mais prenez le recul et constatez le magnifique travail de l’équipe de jquery.. En toute objectivité, c'est dur de prétendre que c'est nul !

Quant à l'optimisation.. Oui, on la maitrise plus en javascript classique.. Encore faut il suffisamment expert pour en tirer profit ! Et ca ne garantit rien du tout au niveau des performances et de la rapidité de l'application, que ce soit jquery ou javascript

En tout cas pour avoir pratiqué js depuis 1998, je peux vous affirmer que jquery c'est quand même une belle évolution pour les développeurs webs et un souffle d'air pour les graphistes ! c'est une dynamique intéressante, qu'on utilise ou pas l'outil !


Ah et comme je répondais aux messages ci dessus plutôt qu'au sujet lui même..
Avec html5 et les avancées du langage depuis quelques années, ca ne m’étonnerait pas tant que ca que js devienne un langage de plus en plus populaire.. le remplacement de flash est en cours, et ca ne s’arrêtera pas la.. !

[gwinyam]

Globalement je suis assez d'accord avec toi. Je te suggère de jeter un oeil à cette présentation d'Addy Osmani qui permet de travailler franchement sur l'aspect performances avec jQuery : http://addyosmani.com/jqprovenperformance/
Je pense que ça devrait t'intéresser

[zevince]

De toute façon, je n'ai jamais rencontré de vrai soucis de performances sur une application js.. Ou alors liés au navigateur..

Exemple sur le site sur lequel je travaille en ce moment, j'ai une page avec des chronomètres (suivi d'un match de foot, chrono global, chrono de possession des joueurs, chronos de temps de jeu, durée des mi-temps, etc..)
Le chrono est géré bien entendu avec la fonction setInterval, donc js pur, sans jquery

Au bout de 45 mn, chrome et firefox sont presque a 45 mn.. 44mn et quelques secondes.. Par contre IE n'est qu'a 41 ou 42 mn.. Le moteur d’exécution javascript me semble presque plus important que le script lui même, pour le coté perf !

[gwinyam]

C'est d'ailleurs pour ça que lorsque V8 sur le marché ils ont fait un massacre chez Google. Le gain en performances était si énorme...

Côté problème de performances, j'ai déjà travaillé sur l'élaboration d'applications web reposant sur un très gros socle JS et où tout passait par JS. Les ralentissements étaient fréquents, et le moindre gain possible était une bataille qui devait forcément être engagé.

De façon générale, la recherche de la performance ne doit pas être que pour une question de confort ou de fiabilité (genre l'appli trop lente à répondre qui fait rater des "rendez-vous") mais aussi pour une question d'écologie. Enfin c'est comme ça que je pense à titre perso. Une appli performante, même quand la performance atteinte n'était pas nécessaire, consommera moins en calculs et donc fera sûrement gagner aussi en consommation énergétique de la machine. Et la planète en a bien besoin.

[danielhagnoul]

Envoyé par gwinyam

[...] présentation d'Addy Osmani qui permet de travailler franchement sur l'aspect performances avec jQuery : http://addyosmani.com/jqprovenperformance/

Excellent ! que du bonheur.

[gwinyam]

Je savais que tu apprécierais

[Willpower]

Envoyé par Lcf.vs

Bien que je me doute que Bovino n'ai dit cette phrase dans ce sens, c'est vraiment l'argument (très souvent le seul) des fans de JQuery qui me hérisse le poil.

En effet, au niveau du nombre de ligne à coder soi-même, on constate une différence flagrante, néanmoins, ce à quoi ces fans pensent moins, c'est au nombre de lignes contenues dans leur bibliothèque/framework, afin de leur permettre de faire ceci ou cela.

Faites la somme du code de la lib' + celles pour l'utilisation que l'on veut en faire et on arrive généralement à bien plus qu'en codant en pur.

Pareillement, en terme d'optimisation de ressources nécessaires pour l'exécution d'une fonctionnalité, la lib' va tester et instancier plein de choses dont on se passerait très bien.

L'autre chose qui me fait bondir, c'est le fameux "bah, 50Mo de cache, de nos jours, c'est rien du tout".

Pourquoi? Les connexions internet sont de plus en plus rapides et on a de plus en plus de volume (voire illimité), ok... Néanmoins, ce n'est pas la seule réalité!

Perso, j'accède à internet via une connexion mobile (down : ~80Ko/s et volume : 2Go/mois). De plus, la plupart des développeurs sont en hébergement mutualisé où la gestion du cache est, dans la plupart des cas, hors des possibilités de personnalisations et, du coup, on se retrouve avec une lib' qui est intégralement chargée à chaque page!!!

Heureusement que nous ne sommes pas encore aux connexions en To/s, sinon, on aurait des lib' en gigas et je ne verrais jamais une page complète, avec un seul forfait.

Autre point non-évoqué, bien que JQuery soit connu pour ses optimisations, je remarque presque chaque jour sa grande faiblesse au niveau de la gestion des connexions internet faibles/instables. "le script ne réponds plus..."

Enfin, une anecdote assez cocasse qui illustre ce que certains font de JQuery. J'ai visité les réalisations d'une boîte de dev, dans le cadre de mes recherches d'emploi et suis tombé sur une lightbox, en plein milieu de l'écran m'avertissant que l'auteur du site web n'a pas payé la licence du plugin JQuery utilisé et me demandant de le contacter afin qu'il paie pour que je n'aie plus à voir ce message.

La méconnaissance de ce que les gens utilisent, ajoutée au caractère ésotérique souvent retrouvé en JQuery fait que les gens ne savent même pas ce qu'ils importent et, donc, s'il est possible de se retrouver dans ce genre de situations, il l'est tout autant pour du code dangereux (servant à du vol d'informations, de comptes, etc.).

Je crois que tu n'as jamais du coder de fichier de plus de 20 lignes de ta vie pour dire autant de *****.



Effectivement, pour les mini bout de code, tu peux t'amuser à faire du js pur et si tu utilises jquery tu auras autant voir plus de lignes en nombres.... sauf que tu n'auras du en écrire que quelques-unes toi-même et donc tu y auras passé 10 fois moins de temps pour un résultat aussi perfomant.

Tu parles de 50 mo puis de lib en giga .... jQuery fait 31 ko. Et non la lib n'est pas intégralement chargée sur chaque page, même sûr les smarphones, elle reste dans le cache, à mon que tu n'aies réglé le header expressement pour interdire le cache. Et si bien même tu avais un hebergeur mutualisé qui empeche le cache, tu peux lier la lib sur un lien externe comme le font beaucoup sur le site de google code par exemple.

Je n'ai non plus jamais vu jQuery faire planter une site, tout au mieux une mauvaise utilisation de jQuery faire planter le site, mais le gars incapable d'utiliser jQuery, fera encore plus d'erreurs en JS pur.

Enfin, ton anecdote n'a rien à voir avec jQuery, si tu vas sur des sites aux plugins douteux, merci de ne pas tout mélanger.

Bref, même si je reconnais que jQuery n'est pas l'outil indispensable, et d'ailleurs je ne l'utilise pas systèmatiquement, je n'ai vu aucun contre-argument valable dans ton paté. Dommage.

[Lcf.vs]

Envoyé par zevince

... Alors oui, on a plus de contrôle quand on fait du js "pur", mais qui peut se permettre de prendre 2 mois pour une application complexe en javascript qui serait faite en 1 semaine avec jQuery ? D'autant que ca n'a jamais empêché les bugs, voire même au contraire, vu qu'il faut vraiment tester chaque navigateur / système / plateforme

Envoyé par Willpower

Effectivement, pour les mini bout de code, tu peux t'amuser à faire du js pur et si tu utilises jquery tu auras autant voir plus de lignes en nombres.... sauf que tu n'auras du en écrire que quelques-unes toi-même et donc tu y auras passé 10 fois moins de temps pour un résultat aussi perfomant.

Bien entendu, on ne recode pas tout, à chaque fois... Quand on a un minimum de méthodologie et de généricité, on fait sa propre bibliothèque d'outils...

Envoyé par zevince

Enfin bon, il y a des avis assez tranchés ici.. En php par exemple, je ne suis pas fan de frameworks, même si je travaille en MVC et qu'en théorie, ils devraient me convenir...

Perso, en PHP, je développe mon propre modèle, le MVC ne me suffit plus.

Envoyé par zevince

Quant à l'optimisation.. Oui, on la maitrise plus en javascript classique.. Encore faut il suffisamment expert pour en tirer profit ! Et ca ne garantit rien du tout au niveau des performances et de la rapidité de l'application, que ce soit jquery ou javascript

Hum, je ne prétend pas être un expert en quoi que ce soit mais le JS est ma spécialité (surtout le DOM) et, oui, pour moi, la performance, c'est un point très important, je suis d'ailleurs totalement d'accord avec gwinyam.

Envoyé par Willpower

Je crois que tu n'as jamais du coder de fichier de plus de 20 lignes de ta vie pour dire autant de *****.

Rien ne te permet de juger de mes réalisations alors que tu n'en as vu aucune, merci donc de t'abstenir de ce genre de réflexions.

Au pire, passe de temps en temps sur le chat...

[le_chomeur]

Hé ben , ce sujet a vraiment enflammé la communauté ...

posté il y a presque un an , j'ai pu voir l'évolution des débats et des avis , je reviens donc un an après pour vous donner ( re ) mon opinion.

Je pense avoir pas mal d'expérience dans le monde du développement web et particulièrement en js ( plusieurs année en milieu pro et de modération sur DVP ) après avoir commencé a développer sans aucunes librairie qui d'une part n'existaient pas à l'époque j'ai donc du apprendre et surtout COMPRENDRE les bases de ce langage qui je vous l'avoue m'est quelques fois sortit par les trous de nez ( surtout à la grande époque ie/firefox ( chrome n'était pas encore la ^^ )

puis les librairies sont arrivée ( jquery, scriptaculous ... ) et la ce fut le drame : "CHAMAIS HOOO GRAND CHAMAIS" je n'utiliserais ces choses qui ne me donne pas la main complètement sur ce que je développe !!!

Voila , ça c'était juqu'à il y a un an retour d'expérience :
J'ai commencé à m’intéresser vraiment à jquery et à son potentiel , non pas par effet de mode mais bien pour ses avantages plus nombreux que ses inconvénients
je n'épiloguerais pas ici car ce n'est pas le débat, mais je voudrais juste exprimer mon opinion sur le fait qu'il reste nécessaire pour un BON développeur de connaitre les bases du JS pour faire du développement performant et rapide ( ne serait-ce que pour débugger ) et qu'un framework une fois maîtrisé sera un gain de temps plus que conséquent au final !

Bon courage à tous