I am loading an extjs4(.2.1) application within a div in JSP page. In my JSP i display various links based on what the user is allowed to do. On click of each link the page refreshes and I set some javascript variables (based on server-side logic) which are used by the extjs app as input.
In order to get rid of the page refreshes and therefore improve performance I have refactored this page using AngularJS(I just learnt Angular so I thought I would try using it). I have used routing. So now I get all the inputs for each of the menu clicks at once on page load. When the user clicks on a link the Angular route sets up the appropriate inputs for the extjs application without refreshing the page or going to the server. The extjs application now is present in an IFrame instead of a div as before so the Angular route basically refreshes the IFrame each time a link is clicked to reload the extjs app.
The results seem good. Pages load faster.
My questions :
Is this good design?
I know AngularJs's real power is in data binding and directives which I do not leverage. Is it an overkill to use AngularJs for this usecase?
Is there a better suited library for this specific purpose?
Thanks for your time.
While it may work, other people maintaining the app need to understand the two frameworks and visitors to your site will have to download all that extra code.
It looks like EXTJS 4 has extensions for UI routing ext-ux-router and ExtJS 5 has it built in.
By using a router built into EXT JS you may be able to avoid the iframe reloading hack.
Related
What would happen if i have a SPA (Single page application) with the server sending information, and the user turns off javascript? Does it would continue working or it would stop?
It will not work.
It would completely stop working and It would show something like this.
This is the image of my localhost which I create on React.
and this is the example of udemy
UI components mounted but I can't click anywhere It's disabled.
If you want to try it on your application. then disable javascript on different website and check.
https://www.enablejavascript.io/en#chrome
As far as I understand, one of the major features of SPA is making async calls to get data and update a part of the page.
In case you don't use JS or disable JS, making async calls is not possible and therefore, your SPA will no more be called SPA.
I'm developing a complex information system, and our front-end stack is defined to use Angular Framework. I'm aware that Angular was planned and mostly suitable for Single-Page Applications. But at this stage, I'm facing an issue with MPA support from angular 6. Basically, our client's requirement is that to view certain element in a system, it has to be opened in a different tab because normally people will open multiple and use it to gather or compare elements between each other.
My current app is distributed among multiple lazy loaded modules, so my question is what is the best way to implement MPA support for angular, in order to solve this issue? I know that if I open a link in a separate tab, the whole application has to be downloaded by the client and only then he can view the particular page. Can anybody advice on maybe certain solutions for this case, or whether its possible to not download the whole app on a new tab? Thanks.
PS. I've browsed through the whole internet, but haven't found any solution for this.
I am working on a multipage app using angular these days. There we use normal location.href navigation for routing rather than using the angular router module. This way angular app can be used as a multipage app. When we do this, every time when we are reloading the browser, angular bootstrap everything and loads from app component onwards. So when you use lazy loading, you can limit the the no.of modules loading every time the browser refreshed. same happens when you open something in a new tab.
As suggested by #Suresh Kumar Ariya, server side rendering is to just render the static content of a page while the javascript files needed for the dynamic functionality of that page loads in the background. So I don't think this is what you are looking for unless you wanna just serve static content fast for user experience improvement.
What you can do is try to do more lazy loading to minimize the initial loading and optimize your code
You can also opt for Angular with Service Side Rendering Concept. So Data can be shared b/w client and server end. https://angular.io/guide/universal
Thanks everybody for advices, solved the issue with service workers, now all tabs are loading instantly =) thanks to #Patryk Brejdak
After looking around a bit I came to no conclusion about this matter: does Google and other search engines crawl pages that are only accessible through ng-click, without an anchor tag? Or does an anchor tag always need to be present for the crawling to work successfully?
I have to build various elements which link to other pages in a generic way and ng-click is the best solution for me in terms of flexibility, but I suppose Google won't "click" those elements since they have no anchor tag.
Besides the obvious ui-sref tag with I have about other solutions like:
<a ng-click = 'controller.changeToLink()'>Link name</a>
Altough I am not sure if this is a good practice either.
Can someone please clarify this issue for me? Thanks.
Single page applications are in general very SEO unfriendly, ng-click not being followed being the least of the problems.
The application does not get rendered server side, so search engine crawlers have a hard time properly indexing the content.
According to this latest recommendation, the Google crawler can render and index most dynamic content.
The way that it will work is that it will wait for the Javascript to kicking and render the application, and only index after the content is injected in the page. This process is not 100% proof and single page applications cannot compete with static applications until recently.
This is the main reason why most sites are using them for their menu system, as that would make for a much better user experience than full page reloads. Single page apps are not SEO friendly.
This is slowly changing as now Angular Universal, Ember Fast Boot and React are adding the possibility to render server side an SEO friendly page, but still have it take over as SPA on the client side.
I think your best bet to try to improve your SEO is to submit a site map file to google using their webmaster tools. This will let google know about those pages that you trigger via ng-click.
Note that this only has a chance of working if you are using the HTML5 mode for the router and not using bookmarks (urls using #), as Google does not index bookmarks.
In general its very hard to get good SEO for an Angular 1 app, and thats why its mostly not used for public indexable content. The sweetspot of AngularJs is for building the "dashboard" private section of your app, that users can access after logging in.
Try using prerender.io to prerendered these angularge pages and filter out bot requests and serve these prerendered pages from the page cache.
I have been struggling to find the best way to build/design an application layout I get pretty frequently.
The general build is a SPA with tabs for different bits of information. I use bootstrap tabs and a single viewmodel currently. What I would like to do is modularize it better with a different viewmodel/component/whatever for each tab.
As a user interacts with a tab, their actions will affect the results of the other tabs. IE tab 1 click sends data to tab 2 to refresh a table based on those values.
When a user navigates between tabs I need to save "state" or sorts/page/filter/etc.
I've looked into using things like knockout components, knockout multiple view models(with postman), durandal, knockout/require combo.
Any successful implementations or other thoughts would be appreciated.
I've tried going to the vanilla Knockout route for SPA development and it gets challenging.
I would suggest using a library such as Durandal as it provides all of the necessary components for SPA development. Durandal uses Knockout as its bi-directional binding framework so it should be an easy transition. You will need to setup your routes for each tab and then style the navigation accordingly. Typically, I will use one view/viewmodel for a specific page. In your case, it would be one view/viewmodel per tab.
In your application logic, as you update information on one tab, you'd need to send a POST to your server through AJAX to update the 'state' of the other view models for other tabs.
I'm trying to create a one page website with jQuery. i'm trying to figure out how I change the URL of the website (E.g. www.test.be) when I click the right menu item. Right now it just gives (www.test.be/#) But I'd like it to say (www.test.be/work) for example. Also when I refresh I'd like the website to be on the page where the user was, not the first page. Would this be possible to achieve?
While you can do this with jQuery alone, it would be an uphill struggle. You're better off using a client-side MVC framework.
There are a number of client-side MVC frameworks available that should do this. I generally use Backbone.js, and using its routing you would easily be able to accomplish this kind of thing. It makes it very easy to define client-side routes with hashes and assign views to those routes. As long as you don't mind the URL being www.test.be/#work, that will be fine
You might also want to check out AngularJS as an alternative, but I can't speak for how easy it would be to implement this in Angular.