Every week, there is a new “HTML5” framework being released.  At AppMobi, we spent almost a year testing them in the web views.  Every one we ran had issues.  They would flicker, wouldn’t run on android, or offered poor performance.

At the start of 2011, ZeptoJS was the first framework targeted at mobile devices.  It was small and aimed to replace jQuery.  We started telling people to use that, but quickly backed away.  Our tests were showing that ZeptoJS was slower then jQuery…by a lot.  It came down to how the implementation was done.  The default query selector always uses querySelectorAll, at no point do they use getElementById.  A lot of the apps developers were testing against used single selectors and noticed a performance hit. 

jQuery is the standard, as it should be.  It paved the groundwork for everything we’ve seen today.  But jQuery is still supporting old browsers and focused on the desktop.  People started noticing that functions like .live caused memory issues. While the sizzle css3 engine is great, it allows for non-WC3 standard queries which people got used to.

So where does this put jqMobi?  We wanted to create a query selector engine that was targeted at mobile devices.  We didn’t want to give the developer tools to create memory issues, or degrade performance.  We examined existing frameworks and found the problems they had.  We’ll do a quick summary below.

jQuery - still focuses on the desktop.  At 30k minified and gzipped, it leaves a lot of room for improvement.  Additionally, there are API functions that do not perform well on mobile, so we did not include these.  

ZeptoJS - as I said above, the query selector engine performs poorly.  Additionally, the way they create the object ads a larger footprint and decreases performance.  In the jqMobi world (and jQuery), when you do $() - you create a “bucket” that has the functions and it has all the elements inside.  With ZeptoJS, each element has all the functions on it, creating a larger footprint and bigger objects.  When doing something like $(“.class”).hide() - we loop through the raw elements and act upon them.  With ZeptoJS, they do a loop and then call the $() selector on each element.

jqMobi does not implement the majority of jQuery API’s.  Instead we polled a large group of developers and picked which one’s they would need and performed well on mobile devices.  Often, they’d ask for something to make their life easier, but we said no because performance would degrade.  To say “we’re faster” than any of the engines out there is going out on a limb, but tests we ran on jsperf.com showed we were correct, and showed the deficiencies in the other frameworks.