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.
Related
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 new to AngularJS.I have two questions.
Is it possible to use JSP pages instead of HTML in AngularJS.
Is it possible to create a web application using AngularJS without webservices (for fetching data from DB) and use HTTP servlet for that purpose
Is it possible to use JSP pages instead of HTML in AngularJS.
Even if you use JSP the final output will be HTML so you can use JSP in AngularJS but JSP files are mainly used to render the frontend with data that you can do using HTML only in AngularJS.
Is it possible to create a web application using AngularJS without web services (for fetching data from DB) and use HTTP servlet for that purpose
Whether you use plain Servlet or any framework that creates REST APIs, it will be HTTP calls only.
(This is a newbie question which applies equally to all front-end MVVM frameworks. I'll answer it for the general good.)
AngularJS is a front-end framework which runs in the browser. It relies on a server delivering the content (HTML templates, CSS and JS sources) to the browser.
What you use as a server, is entirely up to you. It depends on whether you need server-side dynamic content.
If none is required in that area, you can use a static HTTP server like LightHTTP, or plain old apache, or nginx, or anything else to deliver the AngularJS site to the browser.
But in most you will have some server interaction (i.e. storing / querying stuff in a database, or communication / synchronization with other users, etc). The common approach for that is to deliver HTML/CSS/JS statically and add a bunch of REST interfaces. Flask and Tornado are popular server choices for that, or stuff like spray.IO / akka.http for higher traffic volumes.
In specific cases, you may want to work with pre-rendered HTML templates (usually because you want to dynamically exclude parts of pages for security/user role reasons). Then you need a server-side framework with template rendering. Django, JSP, ASP, pick your favourite.
It seems like you are asking how to use AngularJs in a JavaEE application. And yes it is possible. Only your index.jsp will be in jsp, and all you other views will be in html.
You can then use http requests to fetch data through your servlets.
it can be useful. here are scenarios:
you want to save ram, cpu for mobile phones or machines that doesn't have lots of power. you can partially render page in jsp and keep only minimal in angular.
your team is traditionally jsp heavy and you want to use them and gradually transfer to angular. eg... for i18n rendering jsp seems far better. note that i18n may not add lots of values in angular and you may not want to throw up existing code in jsp.
I have been noticing strong views in stackoverflow and they seem to dismiss everything that doesn't fit in their utopian all new cutting edge. all the angular projects I worked had heavy dose of legacy pages using jsp and it doesn't make sense to rewrite everything from scratch or lay off whole team and start hiring from scratch. and thus, yes, jsp makes sense with angular.
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.
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 am developing a simple website with few JSP pages. Each jsp does have a dynamic data that needs be read from XML before they redered on to the browser. Though MVC pattern such as Struts2 is more appropriate here, I don't want to implement it for a simple web application.
For this purpose I just want to implement FrontController Pattern which is sufficient for managing the jsp pages with few Helper Classes.
What I want is to have a Centralized Controller for all JSP pages. if user try to acccess any jsp page, then it should first go to the Controller. So I tried to implement a servlet with URL pattern "/pages/*.jsp" where /pages contains all jsp pages in webcontent.
The problem is, the controller is being invoked each time when there is a call for .jsp file, but when I try to disatch it to the jsp page(ex /pages/homepage.jsp) it goes into indefinite loop. It is obvious that each jsp page call will always comes to controler again.
So is there any other way that we can implement the centralized controller for this situation.
Thanks in advance.
I guess your only problem is that you need to read a XML file before each and request is processed.
If this is only the case than Filters are best suited.
But in case there are more that needs to be done and you really need a centralized control on all request than you can do anyone of the following: -
Struts (it doesn't matter that your
project is small or big, but using a
predefined and proven pattern is
always useful).
In your Controller put a mapping of
logical URL's with Physical URL's
and now put your mapping to Logical
URL's and not the physical URL's.