Partially using Jquery

[friendlygiraffe]

Hi,

 

I'm developing a HTML app that needs to work exceptionally fast, particularly on mobile. So I've decided to sidestep using Jquery.

 

I've been looking at http://youmightnotneedjquery.com/ as reference, and while I would  not use Jquery for animation, I wondered if using bits of it's functionality would slow it down at all?

 

eg: $(myElement).offset(); is very handy

 

Would that undo all the performance-enhancing work on avoiding jquery code, or is using a combination of GreenSock/Jquery a good approach?

 

From Google:

 

jQuery is not recommended for HTML5 ads for these reasons:

• Degraded performance on mobile devices because of reliance on time-based animations.

• Unnecessary file weight: the majority of the library's functionality isn't required.

 

Thanks

[OSUblake]

Getting the offset without jQuery is very easy...

var offset = getOffset(myElement);

function getOffset(element) {
  var rect = element.getBoundingClientRect();
  return {
    top:  rect.top  + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft
  };
}

You can use jQuery and still have a fast app. You just need to be smart about certain things. For example, create a variable for an element if you are going to use it more than once. Every time you use jQuery to select an element, it not only creates a new object, but the browser has to find the element, which can be a bit like playing "Where's Waldo" if you have a bunch of elements.

// SLOW
$("#foo").show();
$("#foo").hide();

// FASTER
var foo = $("#foo");
foo.show();
foo.hide();

Using jQuey to loop through stuff can also be very slow, so you might want to use a regular for loop. You could also convert a jQuery to an array and use native array methods like forEach.
 

var buttons = $(".button");

// SLOW: jQuery each
buttons.each(function(index, element) {
  console.log(element);
});

// FASTER: Native forEach
buttons.toArray().forEach(function(element, index) {
  console.log(element);
});

// FASTEST: For/while loop
for (var i = 0, len = buttons.length; i < len; i++) {
  var element = buttons[i];
  console.log(element);
}

 
 

[friendlygiraffe]

Gotcha, thanks.

 

Would it be even easier to use GSAP to get coordinates? Instead of a getOffset() function. Is that even possible?

 

Might be good to have a JQuery-to-GSAP equivalent cheat sheet.

[OSUblake]

GSAP really doesn't provide a way to get coordinates. The best way to get coordinates is to use getBoundingClientRect, which is what I used in that function. It returns 6 properties which you can use to figure out pretty much anything: left, top, right, bottom, width, height. 

 

So by using getBoundingClientRect, we could also make a function that works like jQuery's position(), but more accurate.

function getPosition(element) {
  
  var parent = element.offsetParent || document.documentElement;
  
  var rect1 = element.getBoundingClientRect();
  var rect2 = parent.getBoundingClientRect();
  
  return {
    top:  rect1.top  - rect2.top  + document.body.scrollTop,
    left: rect1.left - rect2.left + document.body.scrollLeft
  };
}

GSAP does provide a way to get transform values like x, y, scale, etc, which can also very helpful for figuring out position. I like to create a variable of the transform object if I'm going to use it several times because it's kind of verbose.

// This will initialize a transform if there are none
var transform = element._gsTransform || TweenLite.set(element, { x: "+=0" }).target._gsTransform;

// Now we have a quick and easy way to get its transform values
var x = transform.x;
var scale = transform.scale;

And if you ever need to get the value for a certain style, you can use the CSSPlugin like this...

var fontSize = CSSPlugin.getStyle(myElement, "fontSize");