I am adding a "loading task" in my html so I can update some {{loading_task}} when I am going to some slow route or loading some data from remote so I can keep the user interface more informative about what the current task is about in the system.
In my controller, I am simply updating the $rootScope.loading_task with a string in order to achieve this.
In my html, I have just
<h3 ng-model="loading_task">{{loading_task}}</h3>
Say I have couple messages:
1. loading
2. configuring
3. calculating
When I ctrl + f5 the page, I can the see the message updated only once from loading to configuring. Configuring is loading a big JS file from remote in a callback. So it works. While calculating is doing a lot of DOM event triggering. This basically seems not working at all. I am thinking it might just have blocked the whole web page rendering sequence.
When I not fresh page, just normal explore routes, the loading message is not updated at all. Always, the first message "loading".
What is the right way to do such thing?
Related
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'm working on project with Vue and laravel. In each and ever components have more than one http requests when page is mounting, it's slowing things down and sometimes returns 500 error. So i thought if the data is loaded and store in Vuex store and return when page load it'll be effective, but if the data inside the database changing while navigate through pages, data will not change re actively in pages. So is there a way to detect that change using javascript listners. Any help ?
You should look into https://laravel.com/docs/5.6/broadcasting Basically once your backend code does the change to the DB you will need to broadcast that change to the front end.
Is there any way with AngularJS to force a page to refresh after it has been changed. What I mean by this is that I have multiple users actively working in the app but a change is required to the controller.js file. At this point the only way I'm aware of is for them to manually push refresh on the browser. Is there any code that I can use to make it "actively" watch that file for changes and reload when necessary without the users having to manually push refresh?
This isn't really an angular problem. You can do polling on the client side with setInterval, hitting the file on the server to trigger a refresh on the client.
If you're looking for something to speed up development, then you're probably looking for hot module loading. The solution depends on what version of angular and build tool you're using (e.g. grunt/webpack/npm).
Check out this article for angular 2, but you can find similar solutions for angular 1:
http://blog.mgechev.com/2015/10/26/angular2-hot-loader-hot-loading-tooling/
But if you just want to force a page refresh from the client side, you would just call: $window.location.reload()
I had the idea to make a SPA application using angularJS and then just sending AJAX updates to the server when I need.
My initial idea would be make the client application fly, but if I have to do an AJAX round trip to the server, I think the time would be approximately the same as to request a single web page.
Requesting a page just has more bytes of data, is not like I'm requesting 20 resources like in this article: https://community.compuwareapm.com/community/display/PUB/Best+Practices+on+Network+Requests+and+Roundtrips
I would be requesting a page or resource per request.
So in the end even if I create my client side application as a SPA using angularJS, these requests (would have to be synchronous and show a please wait message while they don't return, as I don't want to user to take more actions before I make sure his request passes validation and is processed correctly) would take some time and make user wait, just about the same time as requesting a full page.
I think SPA pages would be very useful if I have like a wizard on my app with multiple pages/steps and at the end, submit the results of wizard, to the server, which I don't.
Also found this article:
https://help.optimizely.com/hc/en-us/articles/203326524-AngularJS-Backbone-js-and-other-Single-Page-Applications
One of the biggest advantages of Single Page Apps is that they reduce
data transfer. As a result, pages after the initial loading usually
can be displayed faster and seem more interactive.
But I don't believe this last quote is really true.
Am I right, or is there a way that I'm not seeing to build an application that would look like it's executing locally?
I know how guys will start saying "depends on what you want", but lets focus on this scenario where there's no wizards.
What ever you said is right. But most of the frameworks(Angular,BackBone) you take they are going to cache the templates of html on the browser so the rendering would be pretty fast compared to the normal applications. Traditional apps will have to fetch the html from the server for each request which is a time consuming one.
Hope this helps you!!!
If you are wanting to go through that syncronous server side validation step for each page request, then there is probably no big advantage to using AngularJS.
If you are requesting a page and then manipulating that page's contents once it's loaded you might want to consider AngularJS. A good example would be requesting a page that displays a list of items. Now let's say we want to search that list or order it in different ways. Rather than using AJAX to call the server to filter the list and then re-render it, it could be much faster to user AngularJS to filter and re-render the list without making any further requests to the server.
I have a simple app built with AngularJS routes which is loading the controller and template for each path. I have a register form and login form on separates paths/templates. Say I go to the login form (/#/login) and enter my username/password, if I then hit "Register" (redirects me to /#/register), and then I hit back in my browser, it will return me to /#/login but the form will now be empty; the information I typed in has been removed.
Expected behaviour would be that the form data is still there.
Anyway to make that happen (without manually caching the data in a service)?
I'm guessing when the page changes, Angular is tossing the old template data and reloading the template again. Is there a way to instead cache that page template/DOM and reload it when the user returns to that path (instead of downloading and showing new template file)?
Well, this is a bit tricky. The browser should implement this kind of feature out of the box. Firefox started doing some work around this "issue" but I don't really know the current status of it.
Alternatively you can use a bit of javascript with LocalStorage to make this works. You're using AngularJS you can create a Directive that encapsulates this feature to be used on multiple places.
Basically you need to create a mechanism that translate an field to and unique-identifier and a value. Every time the user type on the field, you update the store. If the user "finish" the interaction on the form, you clean the value from the store.
You can also grab a jQuery plugin and just create a directive that uses the plugin.
https://github.com/kugaevsky/jquery-phoenix (never tested it).
TL:DR
There's nothing you can't do using a DOM property/attribute or something similar.
You'll need to get your hands dirty on some javascript to make this happen.