Web Apps: JQuery transitions should not be used… let’s see why

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- Filament.io 0 Flares ×

Your goal:

  • To write a cool and efficient Web App

Your weapons:

  • Jquery (any version from 1.3 to 1.10)
  • CSS3 (transitions and animations)
  • HTML5 (basic)

How JQuery can broke your web app
How JQuery can broke your web app

As we can see around the web (for example in this great post by Siddarth Rao or in this clarifying example or this one from Kirupa) it is ascertained that CSS3 animations and transitions win against JQUERY animations and effects. Let’s see why:

The very short answer is:

  1. because CSS3 is written in the browser specific native language (generally C++) instead javascript is an interpreted language.

More complex and explanatory answers are:

  1. A more efficient and memory saving process by CSS
  2. A predictable resources usage by the mobile browser when using CSS
  3. Small resources available in mobile scenery than in PC so to evidence large problems when using JQUERY effects

The question core is all in the third answer. Usually when we develop mobile web apps with JQUERY we use pc browser for the first debug. And usually we don’t see differences between CSS and JQUERY. But when we go to the real device we discover the naked truth: our app terribly lags!

In my experience I realized really fast-developing apps using Jquery for sadly discover that I had to rewrite most of the animation code because of the lags.
User experience and resource efficiency are deeply combined in this case.

So which are the best practices?

I prefere not to abandon JQuery, so I adopt an hybrid approach:
I continue using JQuery selectors and functions, but I do not ever use .show(), .hide(), .fadeIn(), .fadeOut() and expecially .animate()!

When I need an effect like the previous ones I simply use .addClass() and .removeClass() JQuery functions to add and remove CSS3 special classes that can do the animations or the transitions in a more efficient way. That’s the trick!

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- Filament.io 0 Flares ×