I am making an app for Android using phonegap and jquery mobile. When I use phonegap build and try it on my Galaxy S3 it is very slow and clicks take over a second for anything to happen. I already tried setting the Android SDK version to 14 but that didn't do anything. This is going to be an app that is going to take massive amounts of data from a large server with 50 items being loaded at one time. I heave read around that Phonegap isn't very good for large scale things like this so is there any way to optimize Phonegap for this? or do I just need to just use something else, and if so what is the best thing to use?
For the click issue, checkout fastclick.js (https://github.com/ftlabs/fastclick)
Most mobile webviews have a 300ms click delay to wait for a double click for zooming in on content. Fastclick.js allows you to bypass this.
Additionally for overall performance issues, you should be mindful of the amount of javascript libraries used. I have made a number of application with phonegap that rely heavily on large amounts of external data and found that trimming down on libraries and using my own JS optimized for my exact purposes has worked best.
I use handlebars.js for templating / view display and always use for loops instead of jquery each. There have been studies that show for being up to 1000x faster than each when loading large sets of data. This is because each recursively finds each instance where as for simply iterates through a set of data.
i know this is a bit late but this answer will be for people who are still facing this issue, i faced the same issue a week ago, and ended up finding that the issue wasn't because of:
hardware acceleration
SDK version
nor the phone hardware specs
which might be the reason sometimes for certain cases, but if u're using jquery,
then its peopably because when the android application use the Webview, it doesnt handle the JQuery animation very well, which will result a big performance issue, so what you should do is to replace the JQuery animation with CSS3 animation,
to help more, if you're using the jquery animate() function to do animation, then you can just add the JQuery.transit library after normal JQuery library, and use the [transit] function instead of the [animate] function. no need to modify parameters, just replace the function name and thats all.
you can find the library in this link:
jquery.transit
after using the library you'll notice a huge performance jump, and everything will work smoothly after that.
Related
Is there more to the React Native Prefetch feature than simply calling that URL like this:
var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
Attempting to load an image into cache so when I choose to display it into my app it is quick, and I am using the code above, however I can't really notice any sort of load speed difference, where it feels like it should definetly have been quicker...
I am using Android.. It seemed like this was available for both platforms..
Any other solutions for caching images?
Not sure about it, but it might be that the delay you are noticing is the time it takes the app to render the image, and not to download it (which might be quite faster, specially if you are running your app in debug mode). You can try to time it using the onLoadStart/onLoadEnd methods of the <Image> (see the docs and the example). As for other caching solutions, you might want to check some third-party packages, such as react-native-cacheable-image or react-native-cache-image.
Recently I dug into mobile development. I started with Android native, as it will probably be the first mobile OS the application will be published to, but after some struggles learning a new language, and trying to get used to new a IDE and API, I switched to PhoneGap, as it was always the plan to have the application on more than one OS. Additionally, I have years of experience with web development.
So now I come the issue I was facing, as my application will be handling a LOT of images, is how to store all these images.
I have couple of ideas of what could be done:
Have some sort of cloud storage which hosts the images, and then when application is run it would download all the images to the device, but that would take a lot of storage on the device and it might take too long.
Cloud storage, but when application is run it downloads them into a cache to just use the ones that are currently needed and then discard them after user is done with them, maybe even try to download just one by one when needed.
The 2nd approach makes the most sense to me regarding performance and device storage, but it would force the application to always be online. In the 1st example that would not be necessary. I can't help but think there is a better way to tackle this.
Also what would be the best path here to go native, which means tighter control of the native API, but losing the functionality of being generic and have to do the same thing for different OS in each language separately or in a ways stay somehow in hybrid environment?
My app does something similar to this, but we do it all in Java, so if you do decide to go back down that route, this could help. We have a large amount of images (more than 30,000) hosted in the cloud. The user can browse through these images (and we have pre-generated thumbnails of each) and on the client we have the following:
Placeholder image that is a subclass of ImageView, which also handles performing an asynchronous task of downloading the image.
Memory cache of images using Android's LRUCache class. The cache is initialized at startup to be about 1/8th of the available memory.
A DiskLRU Cache to store images on the phone's SD card. I'm currently using Jake Wharton's DiskLRUCache
This does a decent job, but you'll also want to look at Google's Managing Bitmaps article, and figure out how you're going to recycle bitmaps if you're running on Gingerbread or earlier.
Oh and I almost forgot, you might also want to look into Picasso
Phonegap/cordova apps are just native apps with most functionality in a webview, so you could leverage both the picasso code (via a native plugin) and use phonegap.
That said, I'd probably do what Carl does, but write a plugin for PhoneGap that calls into different native code for each platform.
Since you know the app is going to be cross platform, it makes sense to trial PhoneGap to see if it can perform well enough.
You could also look at doing the caching in js, leveraging some of the ideas here: https://github.com/bperin/imageCache
I've looked at this doc: http://developer.android.com/guide/webapps/webview.html
It seems it might be attractive strategy to use HTML/Javascript to get:
result faster (I can use my browser to create a prototype very quickly, just updating my page in the browser, and not waiting for emulator to be update my changes)
avoid to to learn Android API too deep (but use what I know HTML/CSS/JS instead)
reuse my code, putting it to iOS, BlackBerry (not only Android)
The only question I have.. Is whether someone already did it for real? Because tutorials that I've found - just show how to print 'Hello world!' message in simple HTML.
But what would be more interesting to get is 'how it works with embedded database' in android,
OR better say, as an example what I mean:
How to handle JS' "onClick" to get some data stored to db?
UPDATE:
Yeah.. there are a lot of PRODUCTS. But what if I need just a storage support (need to put and read data from db). no need anything sophisticated like camera support. What I really want to avoid is:
waiting for Emulator updated
write simple and easy components and layout in HTML to get instant result (it seems more natural for me, even though I'm Java Dev.. but it's lame to wait for result building and waiting when working with UI)
I'm looking for someone's existing experience to avoid addition complexity and time gaps between builds/tries while working with UI.
Look into Phonegap to convert HTML, CSS, and JS code into a native phone app for android or iOS. Very useful as it puts a web wrapper around the web code to run it natively on your phone. This should solve storage issues as well, lots of documentation around for phonegap, be sure to check it out!
I just released http://www.protocoder.org under MIT license, give it a try! Its meant to basically do what you mention in the first point (prototype fast), and on the second avoid to learn the Android API to deeply.
Its still a young project but I hope it will grow really fast :)
I would like to create an application that support in both Android and iPhone.
It will be a interactive system for people to chat,share photos, etc.
So, it will consist lo-gin system, and all information for users will stored in mysql.
The question is here, should I write two sets of code for Android and iPhone or use some cross platform tools such as Phonegap + jQueryMobile for development.
1)I am wondering if html + css + javascript can complete all the functions that I want to include in this application if I use Phonegap.For example, how to handle the data transfer when loading data from db, should I create many .html for different pages. And the performance of using Phonegap...
2)Also, how about the time of development. Suppose there is one developer for Android, and one for iPhone. If we develop separately, we cannot help each other. On the other hand, web may be easier and we can research on this together.
3)Then, for the UI, it is easier for native language. But it is much difficult for web to make the things like mobile application.
I have asked a lot of questions. But I really think about this kind of issue for a long time and this is the time for me to have the decision.
Can anyone help me and give me some idea? Really thx....
Consider these Factors & Make your own wise decision,
which coding technique are you familiar with (HTML, CSS, JS) or (Java, C#).
For your First Question about data transfer from db,(your question is not clear internal db or server side db) if internal db Here is My QuestionI couldn't find the solution with the given answers, Help me if you can solve the same.(if you are talking about server side db) both for native & Cross platform it has to be achieved by API's
Time of Development is less in PhoneGap, when consider for both platforms since you are coding for both platforms simultaneously.
UI is Easier in Native ONLY when you go with Default styles,
For example consider yourself adding a Customized Button in *.png format.
you are gonna add single button multiple times in multiple sizes. If you wanna achieve clicked or Hover Effect you are Gonna add 2 more Customized Buttons. Which makes totally 3 images for single click for single Screen & Single Orientation, to achieve Correct Quality, u have to add same image in different sizes in ldpi, mdpi, hdpi, x-hdpi, no-dpi which finally brings you 5x3=15 images for single Button.(imagine the size of your app). Finally you have to add few lines of Codes to achieve Clicked effect
The same can be achieved in CSS with few lines of Codes(hardly 5 KB). Many animations also can be achieved easily with js.
UI can be changed when ever you want with change in few lines of codes.UI - PhoneGap Wins your app runs in Browser, both Android & iOS use the same browser engine Webkit, but still significant differences even in Webkit
Here are few more issues in PhoneGap,
Performance Native wins. In PhoneGap your browser has to load js, CSS which gives you notable delay, which cannot be ignored. If you want awesome UI go with CrossPlatform. To achieve performance choose Native.
Finally time to take decision.
It depends on what your requirements are. Evaluate if all your requirements are possible with Phonegap. For a list of supported features see: http://phonegap.com/about/features
Note that you can only use the native phone functionality that phonegap provides.
The development time depends on various factors, such as complexity, size of project and developer skill. I think the main difference here is developer skill, as the complexity and size of project are the same.
This is a tradeoff you have to make. An example phonegap application can be found here:
http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/
1.If you build application using cordova with more page, you app will get slow and some time it will get more bugs of design. So it
is better if you use single html page with different dives for each
pages and use "display: none;" from your java script or JQuery to
show and hide you current pages.then your application will more
fast.
there a lot of plugins in cordova those are supporting for both iOS and android so you don't need a iOS developer or android
developer if you have proper html and css design like responsive web
site.
UI won't be problem if you build a responsive html pages using bootstrap
I'm planning to create a TV Guide app. The app has to interact with a server to get the data and display it in a timetable. The speed and UX are really important. Nothing flashy, I just want the page and state transitions to be very smooth and the assets/icons to look very good. Is it viable to use Phonegap for this app? I'm more proficient in HTML+CSS+javascript than Java/Obj-C but won't mind going native if it's the best way provide awesome UX.
You can totally do it with phonegap. I'd recommend using a javascript framework as well such as backbone.js for transitions and such.
PhoneGap just wrapps a native-app hull around a browser-application. This means: the phonegap-app must simulate a webbrowser and its javascript-engine. It does not convert your application into a real native app. This makes phonegap-apps slower than native apps.
I made bad experiences with an app that is scrolling through a long table of more than 1000 items, each of them holding five text-strings and two icons. Scrolling through the first 10 or 20 items was reasonable, but at item #50 it became really slow, and beyond item #100 scrolling was almost imposible.
So I wrote a native iPhone-App, and it scrolls at the end of the list as fast as at the beginning.
conclusio:
PhoneGap is fine for simple apps that need little resources. But when dealing with long lists or pages that are made of many different items, phonegap is considerable slower than a native app.
Really the decision to use phonegap comes down to abilities, resources and performance needs. Phonegap will be slower than native just by it's very nature that it's another layer on top of native whereas native is optimized to be as fast as possible. Then the second question is your resources. If you only plan on releasing to one platform and have the ability to build native, that could make the most sense. On the other hand if you don't have the resources and want to build to multiple platforms quicker, phonegap will definitely fill that need.
For frameworks, there is sencha, jquery mobile, Dojo Mobile (I find that framework to be the most difficult to use) and Kendo UI (newest of the bunch but not really free either).
And another great template start is to use Mobile Boilerplate to understand the best practices for an hmtl5 starting page.
http://html5boilerplate.com/mobile
if you use phonegap, it will be more easy to create the app for the other platformes(android WP7 ...)
but improving it will take you much more time.
because to have nice transitions and effects with phonegap , you wil need some libs and frameworks like (jquery mobile ,sencha touch ,dojo framwork)