The problem:
AngularJS forces to split view from model and it's good. But we're experiencing the following downsides because of it: When a user loads our page a browser makes not 1, but 2 requests:
First it loads view template (the first request)
Then Angular services load data from a server (the second request)
And we have a bit slower load page speed.
The question:
Is it possible after first page loading load view with populated data and only then get data from a server when something must be changed on the page?
I tried to find something regarding it, but didn't find anything.
You will have a lot more request as you have to load the Javascript and CSS libraries as well.
You can store your initial data in a service or the rootscope and just update the data when you need it. What's exactly your problem here?
The modular approach would be to break all the different components of the page that consume data into separate data requests, so that the interface can load in progressively as different data requests complete.
Additionally, you can load initial data, but then make some predictions on what the user will do next and lazy load additional data in the background.
Finally, you could store the previously loaded data in local storage (lots of modules out there you can utilize) so that it's pulled instantly upon the user's next visit. You would want to want to also add some sort of timestamp comparison on data in storage and on server to see if it has been updated.
Related
I have a table having millions of records. I am using Sails js as my server side code , React js to render data in view and Mysql as my DBMS. So what is the best method to retrieve the data in faster manner.
Like the end user does not feel like getting a huge amount of data which affects UI as well.
Shall I bring only 50 records first and show the pagination in bottom using pagination logic and then using socket.io fetch the rest in background ?
Or any good way of handling it ?
This really depends on how you expect your user to go through the data.
You will probably want an API call for getting only the first page of data (likely in such a way that you can fetch any page: api/my-data/<pagesize>/<pagenumber>).
Then it depends on what you expect your user to do. Is he going to click through every page to see all the data? In that case, it seems ok to load all the others as well as you mentioned. This seems unlikely to me, however.
If you expect your user to only view a few pages, you could load the data for the next page in the background (api/my-data/<pagesize>/<currentpage+1>), and then load the next page every time the user navigates.
Then you probably still need to support jumping to a certain page number, where you will need to check if you have the data or not, and then show a loading state (or nothing) while the data is being fetched.
All this said I don't see why you would need socket.io instead of normal requests (you really only need socket.io if the server needs to be abled to make 'requests' to the client so to speak)
I have 3 JSP views which all use the same JS file(say app.js).
My UI is on AngularJS which has a different controller for each of the JSP views and also has a custom service which shares information between the controllers. When I load the first JSP, its controller specified in the app.js file saves a value in the custom service. When I load the next JSP file, app.js gets reloaded and so the value that was saved in the custom service is lost.
Is there a way to not re-load JS files? Or is there a better way to go about this?
If you have no control on the server , you can save the data in browser's session storage object to keep data across requests and clean it, when you are done. https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');
// Remove saved data from sessionStorage
sessionStorage.removeItem('key')
Javascript variable are not automatically preserved. When you open a new URL in your browser, you do not download again the JS files (they are cached), but they are loaded from scratch in that new page. That means that all previous values are lost, not by accident but by design.
You have different ways to deal with this persistence between page question. One way is server side by using the session:
the js part sends the value to save as parameters of a request
a spring-mvc controller puts that in the session
other views (jsp) or controllers (spring) access the saved value and pass it in the responses
An alternate way is the single page application pattern:
you only load one single full page from the server
the javascript then only sends requests that it processes directly to modify the DOM
Additionally, you could use Windows.sessionStorage to store data client side for the duration of a client session - credits should go to #AmitParashar for this one, more details in his answer.
You can of course mix the 2 patterns (this is commonly done in real world applications), but you must know that every page load will erase all client javascript state
A less common pattern (AFAIK) is to put the state in a cookie. That way it can be shared by the server and the client but:
it is limited to 4k size
you cannot use it for server side security, because it can too easily be forged
I am developing a Single page application using angular & spring. Currently i am using .jsp files for view; but till now i haven't done any jsp related stuff on views. As every JSP is converted to servlet it will decrease the performance compared to HTML.
So my questions are
1 Why not to use plain HTML instead of JSP?
2 Does it have major performance difference?
3 If JSP is recommended then what are advantages?
HTML doesn't allow for dynamic data (i.e pulled from a database)
HTML is static data, unless paired with Javascript (in which you'd have to get the data from post requests, which results in multiple requests to your server which lowers performance).
Yes, there is a performance impact on using JSP but its unavoidable if you want dynamic data, dynamic data requires processing so the other option would just be to do it in angular and getting the data via get requests to your server, but as i said earlier thats multiple requests to your server for no real reason most of the time.
If you're fine with making multiple requests to your server for one page load then more preferable - I guess - HTML and getting the data through angular hitting the backend API and get the data
1 Why not to use plain HTML instead of JSP?
Yes you can use html instead of jsp files if you do not have any dynamic > data to be appended to the page.e.g you will not be able to use out, > session, page, expressions and jsp taglibs in html.
2 Does it have major performance difference?
Jsp always gets compiled and then it is rendered as a HTML page but if you have a html page to be rendered , it does not need that processing at server side and can be rendered way faster than jsp.
3 If JSP is recommended then what are advantages?
Jsp is recommended if you want to add dynamic data to your page, like get data from session object, display model objects. But if do not want all these and want to render a page that hardly changes then it is recommended to use html.
Also if you have angular and web services, you should use angular and ajax calls to render your page.
This will reduce the server processing time to display view.
You can make multiple ajax calls to load your data async in parallel this does not force your server to load all data first and then render page.
Page loading time would reduce since we can perform data calls in asyn manner in parallel.
i'm looking suggestion based answer as I'm doing work with data tales in cakephp to display my data. corrently i'm using datatables to display data. but the issue is all data load on first load of page, i'm supposing if data is too much in database like 100,000 records then it will create issue because it will take long time to load in view(I suppose it is not a good approach). I wanna load 100 record first time then on click next more data should be.
Problem 2
I looked cakephp plugin it is nice but only to load data for same model and controller. If I load model "A" in controller "B" , then it does not work to display model "A" data, it keep search for model "B".
I know one is pagination option to load limited data, but i'm looking for data tables, if it exist.
I know one is pagination option to load limited data, but i'm looking
for data tables, if it exist.
Are you sure your know what you're doing? Datatables is just a script that uses client side pagination through a script that gets data from a datasource. That script can get it's data through many sources, one is AJAX. What you want is in fact pagination:
Basic concept: The Datatables script makes an AJAX call, the server side returns the paginated data as JSON and the Datatables script will process it.
Read the manuals.
AJAX Datasource for Datatables
JSON in CakePHP
Pagination in CakePHP
I'm building a wizard-config app with 3 pages. Each page has the same MasterController but different html templates. Each html templates has a different controller, say ControllerOne, ControllerTwo, and ControllerThree.
I load the data via MasterController and I'd like the data and any changes the user makes to be stored temporarily until the save & finish step on the final page. Trouble is as the user goes through the pages, MasterController is called each time and each time it fetches the data and overwrites the user's changes.
I've thought about attaching this data to a service or rootScope but the data initialization still happens in MasterController so the data would still be overwritten when each view is loaded.
Any advice on how I should go creating this functionality or restructuring my app to support this?
EDIT:
To be clear on the service issue. I don't know where to initialize it. If I do it in Controllers 1,2 or 3 my data is reinitialized each time the view changes so that doesn't work. I can't do it in app.run() either because I need to get to MasterController in order to get the necessary ID to make my HTTP request. I can't do it in MasterController because that too is called on each page switch.
Ideally I'd have a view within a view so that only the inner view changes. However angular does not support nested views and I'm trying to find a way around this without having to use angularUI.
To get around the data being loaded from the server on each page change and overwriting the user data, I used an "extend" function (like jQuery's) to extend the server data with the user data on each load. Page changes would call my service(that stores the temporary data) to save the data there and the final "save and finish" button would push the data in the service to the server.