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.
Related
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.
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 :)
Facebook has the most smooth UI in my Android Phone, and I am wondering how can they do that.
While I am writing my demo, ListView with images always seems to be laggy, while facebook's new feed activity behaviors so amazing.
Anyone can tell me whether the Facebook App uses native ListView but with some improvement, or just rewrite the whole view for better performance?
EDIT: I have already used the caching strategy such as using async threads, caching ViewHolder as tag and storing images in memory for acceleration, while I still feel laggy. I do really want to know how did facebook engineers do that, they are really brilliant
Try hooking the device up to adb, open DDMS and press the method profiling button, then start scrolling a bunch for a few seconds. Traceview will open and you see what is using up all the CPU time.
I've never used a ListView before, but if I had to guess maybe they are retrieving the results and then caching them, whereas you're querying for the results everytime and not caching them.
I'm creating a news reader app that, at times, loads web pages into a WebView.
I noticed that with default behavior, the cache can get very unreasonable very quickly. Whether or not Android will clear out that cache when memory gets low, I'm not okay with my users seeing a 15MB news app when everything except the web cache is about 1MB.
However, I would love to use the cache to some extent. I saw WebSettings#setAppCacheMaxSize() and it seemed like it was just the ticket.
It doesn't seem like it does anything. I hardcoded the following into a method that is called by my activity's onCreate(), before anything is loaded:
originalSourceWebView.getSettings().setAppCacheMaxSize(300*1024); (I was using a larger, configurable value but dropped it lower to confirm my problem).
I blow right by 300KB without any fanfare, as shown by settings->applications->manage applications->click on my app. I'm listening in WebChromeClient#onReachedAppMaxCacheSize for events, but that never seems to trigger.
Has anyone successfully used this? Is there some different cache I should be trying to manage? The docs seem pretty sparse. I went into the android source but it just sends values off to native code, and I don't know how to delve into that.
My test environment is a nexus one on 2.2.2. I know that I'll need to make the cache calls by reflection in order to support 1.5 and 1.6, but if I can't make this work, there will be no need.
I don't think there's an API to do what you want.
setAppCacheMaxSize limits the cache size for the HTML5 application cache API -- the offline storage that HTML 5 apps can use while running in your WebView -- but it sounds like you want to limit the cache used for loading pages. images, etc.
As a workaround you could call WebView.clearCache periodically, although that really limits the effectiveness of the cache. If you want to try and keep some recent pages around, you could look into getting them from CacheManager before clearing the cache and then restoring them afterwards.