coverflowjs / coverflow

A jQueryUI powered CoverFlow component
http://coverflowjs.github.io/coverflow/
MIT License
326 stars 87 forks source link

Testing and cut a release? #8

Closed addyosmani closed 11 years ago

addyosmani commented 11 years ago

@basti1253 I think we should do a little rendering performance testing on the component (DevTools Timeline style) just to make sure we can't optimize further and cut a release if it all looks good.

How does that sound?

basti1253 commented 11 years ago

Hey Addy! Didn't forget that lovely piece of free software. I'm just a bit busy and was too lazy in February when I got some leisure time. Now I'm overrun by customers - nothing to complain, but hard to find time for that project.

I'll push a gh-pages branch to this project "soon" ;) I'll try my best to finish it in early May. It'd be very nice if you'd take a look about my "articulation". I'll keep you more updated. I'll take a look at rendering timeline too ;)

basti1253 commented 11 years ago

@addyosmani I added a documentation page (gh-pages branch), that may require an expert lector ;) Would be great if you'd provide some feedback.

On the plugins part I optimized the transition, the demo should be much smoother by now. Internally I clear the transitions queue and cancel the requested animation frame when people are scrolling over.

Finally I added the dist directory to the repositiory so people don't have to install grunt and it's dependencies. I added a minimal jquery mobile/ custom jquery transit package, too. Shouldn't be to hard for others to get this running.

best regards

addyosmani commented 11 years ago

@basti1253 Fantastic work putting together the documentation page!. It looks great. Looking through some feedback:

I also appreciate you spending time optimizing the transitions. You rock. I'm currently noticing a little bit of animation 'jank' left over when moving from one cover to another and might spend time trying to get this up to 60fps. It could be the case that there are some operations we can batch to save on some of the excess paints.

screenshot 2013-06-01 at 22 18 56

basti1253 commented 11 years ago
On the methods page we mention $('#coverflow' ).coverflow( 'select', $('#coverflow > *:eq(2)' ) );. Would it be worth caching the ID selection rather than requerying the DOM in the second argument?
Easing in plugin options: easing used for animation. Defaults to ‘easeOutQuint’ - maybe we should link to why we default to easeOutQuint or to other equations that one could use?

Done.

On the homepage, is it worth us mentioning the total filesizes for the script + deps? Once we have a good idea of this we might be able to trim down our jQuery build. Sure folks would appreciate that!

As a start I added a table showing file sizes both original/minified.

I also appreciate you spending time optimizing the transitions. You rock. I'm currently noticing a little bit of animation 'jank' left over when moving from one cover to another and might spend time trying to get this up to 60fps. It could be the case that there are some operations we can batch to save on some of the excess paints.

I'm not sure about keeping https://github.com/rstacruz/jquery.transit. Currently I integrated a spin off ([https://github.com/rstacruz/jquery.transit/pull/110]()) not yet merged into the original plugin. This fork allows us to stop the current transition and clear the queue. It forces a repaint any time a transition is canceled (line #670 in our package).

Maybe we should take care about the transition on x axis ourselves? As a result we'd get rid of one external dependency and we'd ship transitions support ootb with an extra focus on performance.

basti1253 commented 11 years ago

@addyosmani I dropped jquery transit and included transitions support into the widget to tune performance. Looks good for me now. I updated tests/docu accordingly. Didn't tag it yet, though. Can you recheck please? thanks.

best regards

Sebastian

addyosmani commented 11 years ago

I just re-profiled and the performance is so much better now. Thanks for dropping transit and getting transition support into there! It looks great. Please feel free to tag! :)