This is my first Cordova/Backbone application.
I have grasped the whole deal with Models, Views, etc. somewhat, and now I have gotten to actually making proper view structure for my app.
It is a user centered app, which means that views are dynamic depending on who the user is and their status in the app.
Could you please help me to understand what is a better choice: making one (large-ish) api call to the server to get the data for all user-related app views (that would get all user info, various menus for the current user etc) and put them in one User model or make several smaller api calls that each get a fragment of the information (let's say, profile information, newsfeed information and options for two menus, so 4 ajax calls total) and keep the models separate? All the relevant views (UserProfile, SideMenu, UserProfileMenu and ActivityFeed) are rendered on user login. Some of them are available for user at all times (SideBar menu for example), some get switched out as user navigates elsewhere.
I design the server-side API myself, so I can freely choose what data is returned and when.
"it depends". If you need all the info (from 4 ajax calls) from start, it would be better to create one big api call, because callig server 4 times will last longer than one big call - 4x server ping time. you could use the big call on app start and still create the 4smaller ones to refresh data when needed.
Related
With the Ionic 4 framework and using the PWA.
I would like all the pages, the whole project is cached as soon as the first page is loaded.
In fact, I would like the user to log in once and then offline to access all pages.
Because currently, only the first page is displayed ..
You are talking about "multiple pages" in a sense that is implying that your implementation does not use the App Shell model.
Probably, you need to do the following things:
Implement the App Shell
Implement navigation between the different content pages of your app
Implement the static content pages (I assume they are static, since you want to primarily use them offline)
Have the service worker cache the whole bunch.
All the content is now cached on first launch. Dynamic content fetched from the server would of course still require an internet connection.
Ember routing works nicely when working with strict linear paths of resources. However, it's becoming more prevalent in mobile design for apps — such as the Facebook app — to use infinite stacks of multiple interconnected resources:
User starts in the feed.
Presses on a link to a user profile.
Navigates to user's list of friends.
Visits a new user profile.
Goes to any other types of resources such as posts, groups etc.
THEN can navigate all the way back with each page state persisted.
We start off in a known resource - let's say it's Facebook's news feed. In Ember, we'd define that route as:
this.route('feed');
But from there, we'd like to be able to visit any combination of our resources - whilst still maintaining the state of each route. The temptation is to solve the problem through some funky route solution, such as using catch-all route definitions:
{ path: '*' }
But that'd take some heavy path management as discussed here (or perhaps there's some method of utilising Tilde's router.js URL generation?!). But as per the illustrated example above, it would leave us with huge goddamn route paths:
/feed/users/:user_id/friends/users/:user_id/another_resource/:another_resource_id
Not that that's a problem in a mobile app, but I'm not sure if it's the optimal way of achieving this.
So that leads me to consider whether there's some method of dynamically creating outlets as stacks get deeper (akin to modals) - or whether the only way to achieve state persistence is using an app level object, Ember data or an Ember service to track/persist history & state.
Anyway, tl;dr, I'm not desperately needing this functionality - just interested if anyone has a smart insight into how achieve this ...umm ... infinite interconnected nested resource stack thingy.
The answer does not lie in nesting routes in an attempt to prevent them from being torn down.
Instead the answer lies in state management.
Browser history can be used to manage URLs and bound to the back buttons on each page in our stack. However, restoring the exact state of the page (including scroll position, especially when models may be lazy loaded) requires some additional design.
The easiest method of doing it is using the ember-state-services addon.
In particular, this video by Travis Hoover from Oct '15 was really helpful. It explains how ember-state-services creates 'buckets' for different model instances.
So, when navigating through our Facebook stack, the state of each page can easily be stored & restored even if we visit pages which reference the same route/controller. In our example, it helps with preserving the state of the two user profiles we navigate to (user/:user_id).
So, for storing each user profile pages' scroll positions, get the scroll offset from your scrolling div/component and use ember-state-services as so:
// app/controllers/feed
scrollPos: stateFor('scrollPos', 'model')
// app/routes/feed
saveScrollPos: Ember.on('deactivate', () =>
this.set('scrollPos', scrollValue);
));
It'll store your last scroll positions on users/1 AND users/2 separately because state is bound to the particular user models.
The only gotcha I can foresee is if the user was to visit the exact same route multiple times in one stack, but there's not many use cases where that would be a problem.
I am developing a SPA application in Angularjs to load data into my database.
I have a Django back end with tastypie providing a REST interface.
I am trying to populate a flowcell object, which is made up of 8 lane elements. Each lane may contains multiple libraries (say 5 or 6 on average).
Flowcell
Lane 1
library 1
library 2
library 3
Lane 2
library 5
Lane 3
library 6
library 7
etc.....
So at the moment when I add a new library to a lane object, I POST the details to the server then refresh the lane's library list with a GET request, and the display refreshes.
This ensures that the server data and the display data are synchronised. However, it does add a delay while each Lane contacts the server and refreshes itself.
So is it considered better to add a number of libraries to each lane in the client side, then update them together - this will give a smoother user experience, but the display may not reflect exactly what is in the database? (I can imagine this may cause errors if the two get too far out of synch).
Or is it considered better to do what I am currently doing - update multiple small changes, sending more requests to the server, but ensuring the data between the client and the server are consistent?
I think you're on the right track. Taking the approach of being more granular in your updates will be better.
Primarily, it will create the feeling of less delay for the client. If the changes are small and are fired off when an element is changed, unless the network is really slow, each change should be fast and almost undetectable by the client.
The only thing I would say is that you might not need to do another GET after your POST of changed data. Unless this is some type of shared data model across many users and sessions, if the client makes an update and the POST goes through, the client holds the correct set of data so the additional GET isn't necessary.
creating a listing component(a tabl view) for iPhone app, the list content must be dynamic (can be read from a web service or local file system) and the app should only fetch the content that is viewable in the list(table) view and each scroll will request for more data from the server(file system or web service). The viewable content should auto-refreshed every 30 seconds.
till now i am successfull in creatin table view with dumy data(from an array).
But what approach should i take foe requesting web service only viewable to the current cell ,
any guidence here will be very appreciated.
To solve your problem I will suggest following steps.
1. Keep one data array and keep refreshing you table sing that every 30 sec, as you have already done.
2. Make a separate thread for calling web service and update you array when response comes available.
Thus, even if internet is down some time or slow, your GUI will not be affected with that.
3. Make sure your array is being accessed synchronously between threads.
4. if web service content is too big, then keep version number for data and send request with current version no. so if web service has updated version of data it will send you only updates or difference. OR it will send you all the data on condition that your current version is older.
If answer is not relevant than please post further details so that I can have better understanding of problem.
Say I have a TODO list iphone app, that can be edited/viewed from both a web application and the iphone application.
When on the iphone, when a user views all his todo lists, or sub-items, I would think that each time the user views a particular list it shouldn't be hitting the web applications API every-time, but rather cache locally the values and only hit the web when things change.
What strategies are there for this type of scenerio?
I agree with you in your dirty-otherwise-do-not-contact-the-server point. And I think this point is pretty straightforward and easy to implement.
However, be careful in this scenario: it gets dirty but at the same time, the device cannot reach the internet. In this scenario, I suggest you check the internet accessibility on a frequent basis (even when your app is in the background), and try to reach your server and update whenever possible.
This is a tricky problem. I'm currently working on an app that needs to perform a similar synchronization, and I haven't decided how I want to handle it yet.
You're right in that you don't want to be hitting the web repeatedly. It would slow the app down considerably. Keeping a local cache is the way to go.
One drawback is that the user could change/add an item on the web and you wouldn't see it on the phone. You'd need to have a refresh button (like in the Mail application, for example) to allow the user to get the changes.
Then you have an issue with conflict resolution. Say the same item is edited on both the phone and on the web. How does the user pick which one to keep, or do they get duplicated?
I think the best way to do this is to replicated your server's schema in CoreData. Then load a given element from the local DB, and in the background go out and check that element for updates if the device has an internet connection. You're hitting the db each time, but the user is not slowed down by the process.
You should not query the internet everytime you view the list.
But when you make updates to it, or edit it, you should update the server as well. That will make your life a whole lot simpler. That way when the user updates an item that he deleted in the web server, the server will just throw that request out...