Monday, November 25, 2013

Android JQuery Mobile listview scroll performance

You might have read my recent flame on Google for not updating their Android stock browser. The flame was partially written because of the terrible scroll performance on JQuery Mobile listviews. Luckily for me, I recently managed to boost the listviews scroll performance for hybrid Android apps.

Ill give you some context. As a Software Developer, I have been creating a Phonegap/Cordova app. This app is a front-end for modeldriven applications. These applications are mainly build to view and edit business data, such as ERP, HRM, etc. Note that the app mainly consists out of grids and forms. Here's a screenshot.

Listview performance is very important for me. You can imagine that my app has to handle large amounts of data. Paging my data partially fixes that problem. However the combination of iScroll with a JQM listview and the Android stock browser ruins it completely. Scrolling through the listview becomes completely laggy and buggy.

I hear you thinking, cut the crap and show us the fix. All right, all right here is the fix:

#listview li {
    -webkit-transform : translateZ(0); 
    -o-transform : translateZ(0); 
    -moz-transform : translateZ(0); 
    transform : translateZ(0); 
}

Wait what? A CSS fix? Yeah CSS is your solution. This fix works because HTML5 and CSS3 is very poorly supported and implemented in the Android stock browser. But how does this fix a thing? Let me elaborate. iScroll sets the following CSS on the scroll div:

element.style {
    -webkit-transition-property: -webkit-transform;
    -webkit-transform-origin-x: 0px;
    -webkit-transform-origin-y: 0px;
    -webkit-transition-duration: 0ms;
    -webkit-transform: translate(0px, -2631px) scale(1) translateZ(0px);
}

Note that the web-transform is set to a very large area. Webkit will try to use hardware acceleration to enhance the scrolling performance. However this ruins more then it fixes.

Useful links:
Orginal lead for solving the problem:
http://stackoverflow.com/questions/9006278/jquery-mobile-listview-is-too-slow-with-iscroll
JSfiddle POC:
http://jsfiddle.net/SuY7f/1/
More background information:
http://stackoverflow.com/questions/12228053/what-does-usetransform-and-usetransition-options-from-iscroll-do
http://cubiq.org/you-shall-not-flicker

Keywords:
iScroll, jQuery Mobile, JQM, slow, performance, webkit, webkit-transform, hardware acceleration, Android

Wednesday, October 9, 2013

Google update your Android stock browser!

Wow, just wow... That Android stock browser really sucks. Why? Let me tell you why.

First of all, we are talking about Google. Google's main browser is Chrome, why on earth do we need another browser? Like we're having Internet Explorer, Safari, Chrome, Firefox and some other minor browsers and Google thinks its a good idea to introduce another crappy browser? Thanks that's another test situation for me!

Secondly, the stock browser doesn't update automatically. Neither does Google actively push updates for the stock browser. So we're talking about a significant amount of smartphones and tablets with a really old stock browser that doesn't update. This is a major problem for hybrid mobile developers.

Let me clarify this further, its very important that browsers keep up with the Html5 standard. Html5 is introduced with a lot of new and fancy features that are extremely useful for hybrid mobile apps, such as: Local Storage, Semantics and Forms and CSS3. All these features are not or very buggy supported by the Android stock browser, all because of no or slow updates.
http://www.w3schools.com/html/html5_intro.asp

Look at this graph, you can see that the Android stock browser got updates from June 2011(Android 2.3) till January 2012(Android 4.0), and then it just stopped. The Android stock browser is dead in the water from January 2012 till this day. Google says it has been replaced with Chrome but Chrome is not available in hybrid apps, we're stuck with the old stock browser.

Google would make the life of developers a lot easier when they stop using the stock browser and make Chrome available for hybrid apps. Unfortunately this won't fix everything, Google build up and enormous amount of smartphone/tablets users that use a legacy browser. It will take several years before we can drop the support for that kind of devices.

Thanks Google you've created the new IE 6 and almost eliminated hybrid apps.



Wednesday, August 7, 2013

jQuery deferred

Hello fokes, it has been a while but finally here's another blog post :)

It all started with a project change in my company. I was cut of my standard Windows Forms (C# .NET) project and was put on a JavaScript jQuery mobile project. This scared the hell out of me because i'm a total n00b in JavaScript much less jQuery mobile. After refreshing my memory and digging up my old, ancient, JavaScript skills I started to work with JavaScript. After a while I had to program asynchronous operations to improve the usability of our mobile application.

The syntax and working of asynchronous operations in jQuery seemed a little bit strange to me. And that's why i like to dedicate a blog post to it. Lets start with a little bit of context. We develop our mobile application with TypeScript, and therefore work object orientated. The JavaScript below may seem strange to you, probably because its generated by the TypeScript compiler.

Lets say we a class Test. And that class has a method that may cost a lot of time to execute. You probably want that method to execute asynchronous. In order to do that you have to create a jQuery deferred. A deferred object has the ability to register multiple callbacks. A callback is a function that gets invoked when something is for instance done executing or failed. The longRunningAsyncOperation method in my example executes a task that lasts for 1000ms. The setTimeout performs the given function asynchronous and therefore immediately returns a deferred.promise(). The promise is a jQuery object that contains multiple callback options, such as fail, done, progress. When calling the longRunningAsyncOperation function we get the opportunity to register to the multiple callbacks of the promise. In my example i register to the done event.


Monday, March 4, 2013

Infragistics UltraSplitter

For my work, as a Graphical User Interface(GUI) developer, I had to replace the Windows Forms SplitContainer for the Infragistics UltraSplitter. Since there is limited documentation about the UltraSplitter I decided to dedicate a blog post about how to implement a UltraSplitter in Windows Forms.

First of all, before replacing the SplitContainer you have to figure out how it works. Luckily for you Microsoft has extensive documentation about the SplitContainer. See for instance MSDN.

SplitContainer
The SplitContainer is one control which seems to be a collection of four different controls. The SplitContainer itself acts like a container Panel with three controls in it. A left panel, the splitter(blue arrow) and a right panel. However note that it is one control.

I started the replacement with an impact analyse. I figured out that the SplitContainer had a lot of coded dependencies. Lots of functionality was programmed to work with the SplitContainer. Therefore I was forced to build a replica of the SplitContainer, who acts just like how the Windows Forms SplitContainers acts.

UltraSplitter
I started with a sample project to make a proof of concept. In the sample project I made a container panel(the blue panel) and added another panel(Panel1) to it. A very important detail is the docking style of first panel(Panel1). Since I wanted the UltraSplitter to be orientated vertically I docked the first panel left. The second control is the UltraSplitter, also docked left and the third control that is added is another panel (Panel 2). Note that the last panel has to be fully docked.

Voila we have made a mock SplitContainer using the UltraSplitter of Infragistics. Note that there are a couple of functional changes between the SplitContainer and the UltraSplitter. When you resize the entire SplitContainer, the panels keep their relative width or height. They auto-size relatively to the SplitContainer. This is different in the UltraSplitter implementation, the panels don't autosize because they are different controls and are only connected through docking properties.

Here is the code:
*Note that this code is part of a greater project. Therefore it contains prefixes and additional functionality which may seem superfluous for you.


Keywords:
Infragistics, splitter, SplitContainer, UltraSplitter, example, docking, c#, .NET SplitContainer