Making hybrid android apps with native like performance

Heyy all,

Today I finally thought that it's time to post the long awaited guidelines in making hybrid apps post. Last month most of my time was dedicated to experiment on different aspects regarding hybrid app development and finding ways to get native like experience from the those apps.

What are hybrid apps?

IMHO most of the time spend making an android app is to make its layout. Yeah ! because the XML layout making is such a pain in the a$$. To add upto these inconveniences, with each Android SDK, there are new UI components released to the developers. Problem being that these components wont support the older devices. So the result is an app that does look the same on all devices.

Hybrids apps are NOT web apps.

They are native android apps but the interface is build with HTML+CSS+Javascript than using the XML components given. Such interfaces are shown on top of a WebView component and a javascript interface is used to facilitate the communication between the interface and the native part.
Anyhow, the purpose of this post is to note some key points I found worth following in making hybrid apps. These would assure a great performance increase in your apps. [I promise ;)]

1) Say no to heavy frameworks == no jQuery

UI designed with jQuery Mobile

Say whaa? The first commercial hybrid app I made, I built it using the jQuery mobile framework. It was easy as hell for me to prototype the app and even easier to integrate it since almost everything was handler by the framework itself.

So the problem? Problem is the performance itself. jQuery mobile is a framework designed to make webapps, not hybrid apps. Hence the goal of it is to speed up the development process and the result being the interfaces made with jquery was soo damn slow. So say no to frameworks.

2) No helper libraries

Most people often confuse jQuery syntax with pure Javascript syntax. It has spread almost like a disease (a good one :D). Helper libraries are good for fast and rapid development but is it good for developing mobile interfaces where every CPU cycle worths? I dont think so !
It's a fact that boilerplate pure javascript performs many times faster than any given library. So if u wanna have sleek & smooth UI performance in your hybrid app, learn to write javascript.

3) Minimize dynamic content

One of the most used features of any framework is to take out the work of the developer by adding stuff dynamically.
ex:
in jQuery mobile framework we define a list like this

1. <ul data-role="listview">
2.         <li>One</li>
3.         <li>Two</li>
4.         <li>Three</li>
5. </ul>

But the actual final output of the browser is this

1. <ul data-role="listview" class="ui-listview">
2.         <li class="ui-li-static ui-body-inherit ui-first-child">One</li>
3.         <li class="ui-li-static ui-body-inherit">Two</li>
4.         <li class="ui-li-static ui-body-inherit ui-last-child">Three</li>
5. </ul>

See the styling part? the framework takes care of adding those but at the cost of wasting some processing overhead of the device. Although this seems negligible for a small list, when all those dynamics comes together it becomes a lot messy. So the best practice for hybrid UI design would be to write all those class additions your own self.

4)  Stick to Android design patterns as much as possible

Most of us tend to break the normal ways of an android UI the moment we lay our hands on HTML which is very natural ;). But it doesnt do much good do us. Be free to structure your layout as you like, but dont make it so absurd that it no longer seems like an android app at all.

5) DONT be cross browser compatible

"That's it ! I'm done with this guy" would be what you are thinking now. In a time when everything is done to cross-compatible I'm saying to throw it away at once. But in a close look, if we are making an interface for an android app, do we need to run it on another 1000 web browser at all?
NO
The only thing in which our interfaced should work is the WebView control. FYI webview control comes with the same rendering engine as of Google Chrome, which is webkit. Although it's not the exact, I can assure that testing your interface in google chrome would be enough. Cut off all the other cross browser crap, it would just slow you down.

1. -webkit-border-radius: 5px;
2. -moz-border-radius: 5px;
3. -o-border-radius: 5px;
4. -ms-border-radius: 5px;
5. border-radius: 5px;
6. /* correct */
7. -webkit-border-radius: 5px;
8. border-radius: 5px;

6) DONT mix-up backend with frontend

Remember we are just making the UI of our app in HTML. If we try to do some work of the backend (which is Java) from our frontend (which is javascript), we would end up in a big damn mess. Leave the heavy processing to Java and handle the lame stuff with javascript (No offense);

7) One page per One Activity

A blunder that most of us do in hybrid apps is to use one Activity for the whole app and count on the AJAX navigation system to be our app's navigation as well. Well DONT. This would end up making the user confused about the function of the hardware back button.
Limit only one and only one page per activity.

8) No AJAX

Well said in the previous point but stressing again, donot use AJAX at all. If native apps donto have something, hybrid ones should not have them as well. So obviously you cant have AJAX in your pages.

This is all I can remember for now, but I'll update the post when I meet new stuff. Anyway those are just my opinions of a good hybrid apps (solely based on my experience). If you differ on any point feel feel to contact me, for all I know I can be damn wrong :) (I'm not :D)

PS: Check out this nice little framework I compiled for making hybrid apps. I tried to follow all my rules, I think
The Hybrid Framework

Cyah all