Here is a problem that I am working on:
There is a view and it has a collection. I want to update the UI when the user interaction results in a model being added to the collection. The UI update should be instantaneous. If the web app is open in multiple browser tabs or windows then the view should get updated in all the tabs.
Possible Solution: Use localStorage for caching the data in the browser. Sync with the local server immediately and perform remote sync in the background. Bind UI updates with updates to the localStorage. There are plugins like Backbone.LocalStorage and Backbone.DualStorage. I went through their source code and these plugins do not take care of conflict resolution with server updates i.e. before syncing the data with the localStorage they donot check if the data was synced with the remote server.
Can anyone help me with this? Links to github repos, stackoverflow discussions are welcome.
Related
I am working on a project that shows live currency prices. I have to refresh the pricing data on the page dynamically. In this project I am using Django and SQL server. I could not figure out how to make it work using triggers and AJAX because AJAX needs an event to run like a user event or timer (that very bad for performance). Further, triggers can not be processed by Django. Is there a way to do it? Thank you for your help.
I'm wondering how does whatsappweb deliver updates?
Do you ever notice a left green card appearing sometimes and asking you to click in a link to refresh page and run the new whatsappweb fresh code updated.
I'm almost sure they use webpack, service workers etc.
Chances are that you already had cache problems using webpack where even refreshing page it remains cached.
So how does whatsappweb solved this issue with a single refresh link?
They use a service worker, if the service worker gets updated, they trigger something in the react app, is easy to do it.
serviceWorker.register({ onUpdate: () => {console.log('new service worker')}});
just dispatch something instead of the console.log
Webpack is a building tool and isn't involved anywhere on a live site. While it offers Hot Module Reload for the development server you will not get it on the production version.
Unlike traditional desktop applications, delivering updates for websites is as straightforward as updating the files on your server (and invalidating any browser caches). You don't need to notify the user to download something, a simple refresh will get the new pages.
If you really want instantaneous updates (without waiting for the user to refresh the page) you can create some sort of WebSocket communication which when a message is received triggers a browser refresh. Nothing special and no deployment mechanisms involved.
I am new to Backbone and building an application as my first try at using the framework.
The application is a calendar that allows the calendar owner to publish a calendar and others to book appointments which are stored in a single collection on the server.
When users load the calendar, the backbone app instantiates and fetches the collection displaying all the available appointments in the view.
This means that multiple users can each view the same calendar on different machines, each from a different instance of the backbone app but each app running off the same remote collection.
My problem is that i need changes to the remote collection triggered by one user to be immediately available to any other active instance of the application in another browser.
Obviously, collection change events will be fired WITHIN each instance of the app when one user books an appointment but these wont be fired ACROSS all instances of the calendar running else where. So in other words i need remote changes to the collection triggered OUTSIDE of the app instance to be picked up by the app.
The only way i can think to do this is use a setInterval to continually poll the remote collection, either running a full fetch, or better still somehow checking if the remote collection differs to the local one, and updating the collection and re-rendering the view, but this seems a bit hackish and not how BB, as an event-driven framework, is meant to be used.
I wanted to ask if anyone else had ever solved this same problem of BB instances needing to listen to remote collection changes triggered outside the app, and if so how you dealt with it? I have already searched SO and not found answers to this in particular because I'm not even sure on the terminology to describe the problem.
I'm working on a mobile web app, where it is important to be able to continue working in offline mode if the connection is dropped, and have the data be sent whenever the connection is back up.
I'm experimenting with saving the object to LocalStorage on the error event, and deleting it from LocalStorage on the sync event. That seems to work fine, but where should I load it?
So far, I have overloaded Collection.fetch, to merge in the LocalStorage models and re-save them, but it feels kind of wonky.
Should I periodically try to re-sync the models until it succeeds?
The implementation:
https://gist.github.com/geon/7890291
We have a problem in updating the data lists on dashboard page after creating a new list in create page. It already saved on the database, but not updating in the views. It updates once i click the refresh button on the browser but this is a one page web app. How can I update the lists on my dashboard page after adding a data from the previous page without refreshing the page? I used couchbase for database.
The problem here is that you are loading the content from your persistent storage, and then it's in angular as-is, and to retrieve any updates you will have to re-fetch it from your persistent storage. Unfortunately, it is not as simple to $watch your back-end.
You have some options here: if you are making your change from within the angular component of the site, then you can just call a function when you are creating a new page which re-fires your db-access code, and refreshes the model.
If you are making changes from outside of angular, then you will need to either use polling to refresh your angular model periodically, or go for a fancier web-socket option, as explained here.
After reading this question and your other question, my guess would be, that you get the old view from couchbase.
Per default couchbase sets the stale parameter to update_after, which results in getting the updated view only after the second access, see the couchbase documentation for more information.
To fix this, it should be sufficient to set stale to false.
If you access couchbase via REST call, adding ?stale=false to the call should do the trick, otherwise add the parameter according to your used SDK specification.