Recently I just started to build my app by using phonegap/cordova. At the beginning, I downloaded the Phonegap Desktop and carry out the testing on Phonegap Desktop during development phrase. It is powerful and flexible for testing purpose.
When I am going to complete app, I build the app by using cordova CLI, then install the apk file on my actual device. I found that by using same coding and device, the app is significantly slower than Phonegap Desktop, especially on jquery animate and toggle modal active:
// Simple code for toggle dialog modal to active
$("#modal-launcher, #modal-background, #modal-close").click(function () {
$("#modal-content").css('top', Math.round( $(document).height() - ($("body").innerHeight() / 1.65 ))+'px');
$("#modal-content,#modal-background").toggleClass("active");
});
//Simple code for animate list item
$( '.Class' ).animate({ right:'0px' }, 250);
The speed is same when I just open the app. After I perform some actions to trigger events, I observed the performance is slowing down. For instance I need to wait for few seconds to let dialog prompt out, and the animate become slower as usual. If i restart the app, the performance is become normal again until I repeat same process.
The performance degradation is not just few milliseconds, it is a very significant difference that up to 4 - 6 seconds delay. This would not happen if I switch to Phonegap Desktop, by using same coding and device. This make me have no idea about what is going on, as I thought they share the same framework. I also tried build the app by using phonegap build android and ionic build android, but I get same result as well. Does anyone has similar experience and has any solution for this issue ?
The speed of the device and the version of webview is the important point. On the desktop you have a lot of power and it is okay to make the first steps there, but then switch to slow devices for testing and test the app also with older android versions. The reason is not the compatibility, the reason is, that older androids are slower.
If the app is running well on slower devices, it will work great on new devices.
Cordova itself and javascript are very fast. There are some mistakes which people make, when they start with cordova development and using jQuery/jQuerymobile:
Write clean HTML with a clean structure, try to make the dom simple.
Don't query the dom with jquery over and over again. Instead put your selector in a variable, if you use it several times:
var $selector = $("#myselector);
if ($selector.height() > 100){
// do something
}
Concatenate jQuery operations:
$("#myselector).css("active").text("my new text");
Use find(), next(), parent(), …. If you need to have multiple operations on multiple elements, and the elements are not fare away in the dom, then use find(), next(), parent(), … it is much faster then querying the whole dom.
Don't use jQuery for everything. jQuery is great, but a lot of operations can be done with simple javascript.
Don't use jQuery-plugins for things that can be done easily with javascript.
Make a single-page-html-app and avoid to use multiple html-pages. This is the best way to slow down the speed of your app and to make the development complicate.
Use a custom jQuery download and don't include things you don't need.
Use tap instead of click.
Related
Can anyone explain how is it that running the app with "Debug JS Remotely" behaves differently than without it? Currently, my app seems to behave differently between these two modes.
To be specific, when my app is in "Debug JS Remotely", it can fire API requests and get responses successfully. When the app is not in "Debug JS Remotely", it's unable to fire API requests?
The issue you're experiencing might be due to the different Javascript engines involved:
When running on the device, your code will run on the JavascriptCore engine which is bundled with the RN app itself.
When running the remote debugger, your code will run on Chrome's V8 engine, not on the device.
Different environments might behave differently. Take the following example from this article:
Without remote debugging:
new Date("2017-02-12 23:51:31")
.toLocaleDateString('en-US', { day: '2-digit', month: 'short' }) // 02/12/17
With remote debugging:
new Date("2017-02-12 23:51:31")
.toLocaleDateString('en-US', { day: '2-digit', month: 'short' }) // Feb 12
For this reason, I prefer to sometimes use third-party implementations of some native features (like whatwg-fetch instead of using native fetch).
Resources:
React Native Architecture - Javascript VM
Hi as Explained by #Matei above The issue you're experiencing might be due to the different Javascript engines involved
In my case code was running fine in debug mode but as soon i off debug mode screen get stuck
Solution:
So what worked for me was removing all the console.log from the file.
So just remove all the console.log from your code and it will work like a charm.
I'm using WebDriver.io to create tests.
In the Docs getSource doesn't support native apps.
Get source code of the page. This command won’t work in mobile
environments for native apps. If you are running hybrid tests make
sure that you are in the webview before calling this command.
For now, I use "client.source()" link which return the XML but can take up to 20 sec.
How can I get the layout XML from webDriver.io?
You are doing it the right way. Alternatively you can try the WD.js client and check if performance will be better with than the other one, or simply open an issue report on the WebdriverIO Github page.
The reason of why it may take so long:
UI of the app is constantly updating => Appium is hanging for a bit to retrieve it;
Lots of elements on your app page => leads to a big .xml file.
I am in the process of testing a hybrid app for Android 4.4+. The app consists of
one custom plugin (my own effort)
the HTML UI created using Phonon.
Phonegap CLI v 6.4.2
My test device is a Huwaei Holly running Android 4.4.2
One of the issues I have run into is the fact that the caret in textarea and input controls stops working "after a while" and the soft keyboard does not popup when I tap the control.
By dint of some trial and error I pinned down the problem - it happens AFTER the app has displayed at least one vanilla HTML/JS alert box which I am using for my own debugging needs. Replacing that with a Phonon.alert box - which is simply an overlayed layer of HTML, not a new window as, I imagine, the bog standard alert is - "fixed" the problem.
Very good but the fact that this happens at all still bothers me - I will not use vanilla alerts in my release build but if it happened with alerts it might well happen with something else.
A spot of Googling revealed that is a known issue that appears to have been around for a while. This SO thread, for instance, suggests the Webview has to be set as being focussable and I have run into the same suggestion elsewhere too.
However, it is not at all clear to me just where I should do this. About the only configuration locations I have at my disposal are
The config.xml file for my Phonegap/Cordova project
The plugin.xml file for my custom Phonegap/Cordova plugin
The Phonegap docs related to config.xml do not mention anything about FrameworkLayout, android:focussable etc.
I'd be most grateful to anyone who might be able to either
explain just where the android:focussable bit should go or
suggest the root cause of the problem.
If you create a sample Sencha Touch 2.3 app using sencha app generate... and package it with Cordova, you will see that it takes about 4 seconds to launch the app and show the main view. If this basic skeleton app takes this long, then actual apps that have many more views, controllers, stores etc will take much longer (6-8+ seconds).
Is there any way to speed up the launch? For reference, lets take the example of the sencha started app itself. It takes 4 seconds now. So how do we improve the performance so that it takes 1 or less than 1 second to launch?
Aside that you shoud only include the necessary controllers, views etc... there is a great difference in time from generate a development, testing build than a production build that compresses, minimizes all js (Sencha+your code) in a unique 'js' file and a unique 'css' file that improves greatly the startup time (in development phase each class is a separate file).
sencha app build production
My advice would be:
Avoid overnesting views
Do hierarchical loading (not all views controller models and stores in app.js but use requires)
Be sure you are not creating objects and let them around without proper destruction.
The speed depends a lot on phones so if your target are limited resource phones might wanna consider other options.
That been said this is not native and you wont get the same speed (at least not right now) but you get a lot of other benefits.
Most of the time launching of app takes long time because of the below reasons(which i faced)
1.Unnecessary loading of controllers,views in app.js directly.
2.Unnecessary loading of static images/pdf(any static content) every time whenever we refresh the app.
Below steps would be useful,if you follow these properly,in any sencha touch app.
Do not load all controllers inside app.js directly,you can do loading of controllers device specific
using profile,like below
profiles: ['Tablet', 'Phone'],
Above line would be in app.js,which is responsible for loading of corresponding profile,these profile files are further responsible for loading of all the controllers and views as per the device.
app.json file contains app.cache section,inside this there is cache section where you can mention all the static images or pdf,to avoid unnecessary loading every time.
As mentioned by malcubierre, we need to compress all the required js and css files using sencha app build command. If you are targetting for mobile phones especially then you can go for sencha app build package command.
You can also remove the extra imports from app.scss file which you are not using in the application. Removing extra imports in theming part reduces the loading time of app.css.
I have been trying to code and run the hello world application but am not able to get the emulator to boot all the way. Plan b is vb.
HELP!
Do you mean VB or VB.NET?
The Mono project recently announced VB.NET support, though C# is the preferred language (do yourself a favor and switch!). Since Mono runs on Android (and just about everything else), it should get you going in the right direction.
Update Okay, downvoters: a little lesson in basic math: the transitive property of inequalities states that if a < b, and b < c, then a < c.
So:
If VB.NET can be compiled by Mono,
and Android supports the Mono framework,
Then Vb.Net can be used to write an Android application.
We can get into a discussion about the available features, framework completeness, etc, but the OP asked about compiling "Hello world" in VB for Android.
Or, skip the above references and just consider this: The MS VB compiler produces MSIL/CIL.
Just take the CIL that the compiler produces and throw it into Mono. The Mono compiler will convert this to IR, optimize it and produce the appropriate binary for the target platform.
If you're going to downvote, cite your sources instead of arbitrarily throwing out acronym soup that is irrelevant to the topic at hand.
Unfortunately, you can not run a visual basic application on Android. Maybe if you provide some additional information about the problem you are having with the emulator we can help with that?
I'll guess at the emulator issue...
Sometimes the emulator can be quite slow. If you are impatient and start clicking on buttons in the emulator before it has finished, it doesn't seem to work properly. I did this when I first started and thought the emulator was broken - but it actually just took several minutes to launch. My clicking on buttons just made sure it never finished.
Try running your helloworld program, but be sure to wait until the emulator is fully ready to go before you interact with it.
The good news is, once you have launched the emulator once, you can keep the emulator running while you write and try out your code.