Build a hybrid Android application

Many people believe that hybrid applications can not have good performance, especially in terms of building a page (that is, they have low FPS). This is a misconception. If you skillfully assemble the application, you can achieve good performance. The article describes an example of building such a hybrid application for Android in Windows 7 (although for iOs there will be almost the same thing).

Suppose we have a ready-made application on HTML5, in which the output of the image is completely made through the Canvas element (I used the Phaser framework, 50 moving sprites). On the PC, this application runs without problems (60 FPS). On top branded smartphones, too, everything is fine (50-60 FPS). But if we take a mediocre tablet, the result will be just awful (3-15 FPS), even despite the good characteristics of the device.
Therefore, our goal is to create a fully ready for publication apk with good performance indicators.

At the moment there are many tools to achieve this goal. The most popular of them are:
• Cordova
• Ludei
• Intel XDK

The Ludei project (Cocoon.js) builds an application in the cloud, is quite simple in understanding the concept. I advise you to pay attention to the client application CocoonJS Launcher App, which allows you to easily debug the application directly on the device. This can be a great help when developing an application. But I don’t recommend using this service to build an application, since There are quite a few bugs and a branded splash screen is added to the application.
')
The Intel XDK is a great tool to start with. Building an application is also done in the cloud. In fact, Intel XDK is a convenient GUI for Cordova with a full set of settings, plug-ins and an emulator.

With Cordova, the build is done on your computer. This approach has only two advantages:
• Build faster
• Uses the latest component versions.
However, there is a drawback:
• Required to organize the environment.
In the article we will consider exactly the last option, since it basically causes problems, and since in the end you will still or later switch to it.

So, let's begin. Install:

1. Node.js
2. git client
3. Java Development Kit (JDK) 7
4. Android Studio

Next, open the Android SDK Manager and install:
• Android 5.1.1 (API 22) platform SDK
• Android SDK Build-tools version 19.1.0 or higher
• Android Support Repository (Extras)

Then in Android Studio we will generate a set of keys for signing apk. To do this, select Build> Generate Signed APK from the menu. In the window that opens, click Create new . A new window will open in which we will enter all the data (of course, we will remember the data ourselves).

After all, you can close Android Studio and never open it again.

Then you need to change the PATH environment variable:
1. Click on the "Start" menu in the lower left corner of your desktop, right-click on My Computer , and then click Properties .
2. Click the Advanced System Settings button in the left column.
3. In the dialog that opens, click Environment Variables .
4. Select the PATH variable and click edit.
5. Add the following to the PATH, depending on where the SDK was installed (I have f: \ AndroidSDK ), for example:

C:\Users\Root\AppData\Local\Android\sdk\tools;c:\Program Files\Ant\bin;C:\Users\Root\AppData\Roaming\npm;f:\AndroidSDK\platform-tools;f:\AndroidSDK\tools

6. Save the value and close both dialog boxes.

And only now, in fact, install Cordova. Open a command prompt and run:

npm install -g cordova

Then create your project. To do this, execute the following command:

cordova create projectDirectory com.companyName.appName AppName

This command has the following parameters:
projectDirectory - directory of your project.
com.companyName.appName - indicates the identifier of your project in the reverse format of domain names.
AppName - specifies the display name of the application.
All these parameters can be easily changed later in the config.xml file.
After executing the command, your project directory will be created. This directory will contain the www directory, which will contain the default application page files. Delete the contents of this directory and copy the files of your web application into it. Start file name index.html.

Then we work already in the project directory.

cd hello

Before you can build a project, you need to specify a set of target platforms. In the article, I will only consider Android. We will execute a command that will add the ability to build a project for this platform.

cordova platform add android

After executing the command, the projectDirectory \ platforms \ android directory will appear and you will be able to build debug.apk (debug package). The debugging package is built using the command:

cordova build android


Now add an automatic package signature. Cordova signs the package with Gradle. Therefore, we can immediately set the key settings. To do this, in the projectDirectory \ platforms \ android directory, create a text file release-signing.properties in which write the following settings:

storeFile=../../ keystore.jks
storeType=jks
keyAlias=myalias
keyPassword=passwordhere
storePassword=passwordhere

As you understand, you need to use the data that was specified when creating keys.

Next, we will conduct the first test - collect the signed apk for publication.

cordova build android --release

The command will take several minutes to complete. At the end of the build, we can find the finished apk in the projectDirectory \ platforms \ android \ build \ outputs \ apk directory

We will test the received apk on an average tablet and ... we will get terrible results again (5 FPS). At this stage, many developers are losing hope. After such a breakup, they either run to www.ludei.com (because at least something sane comes out at the exit), or join the “asshole army”, who are convinced that the hybrid application sucks.

In fact, losing hope is still early. There is such a wonderful project - Crosswalk . With this project, you can embed Google Chrome browser in your native Android application and play your project in it. The advantages are obvious: the performance of a good browser and independence from the OS of the device.
In Cordova, the Crosswalk project is added as a plugin. So it's time to expand our application with plugins. This is done very easily. In the command line of the project launched from the directory, we run the commands:

cordova plugin add cordova-plugin-splashscreen

The project will be added the ability to set the start screen saver. Be sure to install this plugin.
Then you can add plugins for your requests. Here are just some of them:

cordova plugin add cordova-plugin-vibration

(plugin adds ability to control vibration)

cordova plugin add cordova-plugin-globalization

(the plugin adds the ability to determine the localization of the device)

cordova plugin add cordova-plugin-inappbrowser

(the plugin adds the ability to make requests to the server)

Well, finally, add the Crosswalk:

cordova plugin add cordova-plugin-crosswalk-webview


After installation we will collect the next apk and test it on the device. We are also likely to get lousy results (15 FPS) ...
Here those who have not lost it at the first test lose hope. And these developers replenish the "asshole army" who are convinced that the hybrid application sucks.
But it's too early to give up ... Here begins the "magic".

For the Google Chrome browser, there is a special GPU blacklist that restricts the use of WebGL. This is another buggy feature from Google. Why zabagovannaya?
Firstly, the function limits not only the WebGL engine, but very significantly reduces the performance of the Canvas engine.
Secondly, even though the function is called “GPU black list”, it works as a “white list”. That is, if you have a top-end branded smartphone, then it is on this list and your application works great. And if you have some kind of “Chinese” (or even a branded non-top phone), then it is no longer on the list, and, accordingly, the application performance is low.
Google explains this by caring for users. Like, on non-top branded smartphones, the browser may be unstable. Yes, of course ... According to my observations, all this “instability” comes down to closing the application under ultrahigh loads (for example, the simultaneous creation of 200-300 objects).

To achieve maximum performance. Disable this feature. To do this, create a text file xwalk-command-line in the projectDirectory \ platforms \ android \ assets directory with only one line:

xwalk --ignore-gpu-blacklist

Everything. We are collecting the next project again and experiencing ... As a result, excellent performance (50-60 FPS). The result is achieved.

What's next? And then it remains to configure the configuration file , icons and screensavers . With this, I think you can do it yourself. By the way, the start screen saver supports 9-patch Image technology. To do this, just add the number 9 to the file name.

As you can see, hybrid applications in capable hands can have high performance. I hope this article will help you in their creation. Have a good day.