once the user logins I navigate to the home page and i fetch + draw the results on a scrollview (and that may take like 1 or 2 seconds (even the query is quite fast it takes a bit of time to draw 40 results)
I would like to store the results so if the same person logins again I would show the “stored results” and then query + fetch the new ones. I have tried to store it in a file and it works but it still takes 1 or 2 seconds to draw it.
so:
1.- is there a way of store the results so i don’t have to “paint” them? (facebook style)
2.- should i show just some results and “paint” the other as the scroll goes down ?
Hi Zaulin, I can probably help out most on point 3 here,
Any top-level JS code is going to get run on startup so for example:
<JavaScript>
var Observable = require("FuseJS/Observable");
console.log("hi"); // << this line will run at JS startup
</JavaScript>
Please note that each time your UX live-updates (like when you are editting the UX in preview mode) this is treated kind of like an app restart so that code will run again.
If you want the app to be in some other state when you act then I recommend looking at the docs for Lifecycle.
on starting i load the last results of the homePage of the user (homePage have an uxHomePageResults = Observable() that cotanins the list of items) so the user can check even having no net (as long as he has loaded it at some point)
but when i navigate to the homePage there is nothing there i guess as homePage is a class and it’s not the same “homePage” where i loaded the info
main.js
var home = require("home");
home.loadStoredInfo();
home.js
var uxHomePageResults = Observable()
loadStoredInfo(){
//loads the info that was stored in a text file
uxHomePageResults.add(...);
}
You can use storage to write and read text files. When you fetch your feed, store the JSON to the text file. Next time the app starts, read the text file, and pre-populate your object with data from the JSON.
actually i am already storing the last results on a .json file and doing what suggested… the first question was about: is is possible to keep the last UX so i don’t have to re-paint (reading from a file) all the items of a list?
You can use storage to write and read text files. When you fetch your feed, store the JSON to the text file. Next time the app starts, read the text file, and pre-populate your object with data from the JSON.
OS X (dotnet, fuse preview): /Users/[username]/.local/share/
OS X (cmake): /Users/[username]/Documents/
We’re aware that this is a bit of a mess, and we’re working on a replacement for the Storage module.
Regarding your other question; it would be really helpful if you could provide a complete working example that demonstrates the issue. With a description of expected behavior, just to avoid any confusion.
I want to load and fill the homePage when the app launches ( I will load the last logged user results and clear it if the user changes)
I know i can do everything on the “onParameterChanged” of the homePage but the problem is that it takes a bit (maybe 1 second) to “paint” all the results (limited to 20) and that’s why i want to do it “on Launch”
The main question is: What should i write on the thingsToDoAtLaunch function to set the value of the home.myHomeValue to “hello world”?
var Observable = require("FuseJS/Observable");
thingsToDoAtLaunch();
function thingsToDoAtLaunch() {
console.log("doing some things");
//Here i would like to set the value of home.myHomeValue to "hello world"
}
module.exports = {
}
As far as I know there’s no straightforward way to paint a element contained in a <Navigator> tag before router.push() is called. When the code in main.js runs the <HomePage> element has not yet been instantiated.
You could export the myHomeValue observable from main.js and refer to that one, but I don’t think that will fix your problem.
Note that I don’t have a lot of experience with the Navigator myself, so there’s probably others here who can give you a better answer. I’m sure there’s some other way to solve this problem.
1 second sounds like a long time to paint 20 items of something on a page. Can you tell me what each item contain? If you’re able to provide an example demonstrating the actual performance problem we could maybe see if there’s other ways to improve this.
as you can see in the example it takes “0 seconds” since the query fetches the results and those results are added to the Observable list but it takes “a bit” (like one second) till those items are shown on screen (the same happens on the mobile device (maybe a bit faster))
I’ve taken a look at your example, and from what I can observe it is the request to the API that takes most time. The timestamp printed just got 1 second resolution, which is easy to get fooled by.
To verify this I removed the HTTP request from the equation, and just hardcoded the JSON returned. This removed the 1 second wait time.
For me the HTTP request takes a little over a second when testing from a browser, but this can oh course vary depending on routing distance to the server.
here you can see 2 examples where the timer starts when the last result is added to the Observable array. Both examples fetch the same amount of results but the “short” one just draw 2 of them
From what I’ve observed it looks like the performance is better on iOS for the final build (~150ms), but a bit worse when using preview.
The local fuse preview uses the mono .NET runtime on OS X, which might explain why the performance is so much better on Windows. It could for example be we are very frequently calling some API that’s much slower on mono.
I will create a ticket for this as I agree that the performance is below what should be expected for this use case.
