Tuesday, August 28, 2012

Shopify logic and Hungarian folk dance

I've been working with a client on her Shopify store. She's trying to order the classes she sells by date. Makes sense, right? But that's not really how Shopify is set up, so my first attempt was to use a bubble sort with the Shopify logic. It worked like a champ in my test cases because I was using 6 classes. The video below pretty accurately demonstrates what the code looked like and about how long it took to render.

In the real world, she's starting off with 58 classes. All the nested loops required for the sorting algorithm generated (are you ready?) over 800,000 lines of html, which obviously took a hot minute for the browser to render. I tried simplifying the code, but I couldn't reduce that by more than 20% -- still waaaay too massive.

So, I shifted gears and used a javascript array and the sort() method, and the result is just over 6,000 lines of generated html. Even though most of those lines are blank, they still take time to load (think stacking thin sheets of paper). So a 99% reduction has a dramatic impact on page load time.

It's an upgrade from Hungarian folk dance to Step Up Revolution.