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.
Related
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
I am currently thinking about coding my first webapp.
I would say i have beginner to intermediate coding skills in html,css,js,jquery node,sql and monogodb.
The problem is that i do not really know how to achieve my goal.
My goal is to built a responsive single page website, which gets the stock price from an api and display it on one card. Furthermore the user should be able to click on the plus button and add another card with an stock index he chose from a choosing form option.
Now what want to know is:
Is this an example for choosing a js framework like react, vue etc. and how can I accomplish my goal ?
I coded the api get request etc. in node and was able to print everything I want into the console log. How do I do the same thing but displaying it on my html page ?
How can I create these cards which are automatically getting added to the homepage ?
How can I save the data for each individual card? (especially without a login procedure...)?
I know these are quite easy questions but I really want to learn how to do it.
Please check the images below.
(check:
I would say try to use your existing skills to achieve your goals. When you run into problems you cannot solve or problems that could be solved by a specific framework such as react, try using them. It's better to understand what these frameworks are doing before you rely on them for every development.
You need to use an http framework like express to return your api values from node js to a web client.
Needs more info but as you're already talking about component based libraries, a good approach would be to keep the cards in a json array and render your page from that. If you are persisting the card data in a database you will also may want to render them server side as the page is loaded using a server side technology like node.
To keep things simple, you can store the info client side using something like localStorage or indexeddb. If you want to store something on the server side, you will need to introduce a way of identifying the user.
Recently I decided to check out VueJS 2.0. Since I still mostly work with various CMS systems (Wordpress, TYPO3, OctoberCMS, that kind of stuff) I wanted to try and implement a pjax like page loading. To my suprise, it is not as simple as I thought.
Is there a way to replace parts of the page and reinitialize the components in VueJS?
I should probably explain why I want to implement such a feature. In the last years I found that it is much easier and quicker to develop feature rich websites using a frontend framework. However, since most customers need a backend to manage their websites, using an already existing CMS is a no brainer.
In the past I used Angular to build the frontend. It worked suprisingly well, even with pjax, since it is possible to reinitialize parts of the page in Angular 1.0.
Angular 2.0 took a different approach and while I absolutely love what they have done with it, I do not think it is suitable for use in an enviroment, where most of the frontend is being rendered by the server. That's why I decided to check out VueJS.
I want to implement a pjax-like feature, because the HTML already gets rendered on the serverside and dynamically replacing parts of the page just looks cool :)
EDIT
Just to be clear, I am not talking about the jQuery pjax plugin, just about dynamically replacing parts of the page (which in the company I worked for before was simply referred to as "pjax" :P)
Yes, you can absolutely do that. You can structure your one page view with multiple components, and you can just reload the data of one component which will update only that component, or you can also have conditions with v-if, so that you can change which components will render dynamically.
Sample fiddle: http://jsfiddle.net/mimani/6dgbg2dL/
Sample fiddle simulating ajax with setTimeout: http://jsfiddle.net/6dgbg2dL/1/
You can use vuex to communication between multiple components, check one sample here.
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.
I'm wondering if its possible to load a website like the twitter search results page using node.js with jsdom and still be able to detect any changes in the DOM after the initial render.
Example:
Initial page
Modified page
Thanks for your help.
If you want to detect what changed in the DOM tree you will need to understand the minified Twitter's javascript code and properly intercept the events or callbacks. I don't suggest you this approach because js code that works perfectly in browser may break when using jsdom. For instance, when I was trying to do some server side scrapping with jquery I got stuck with this bug that in most browsers is definitely not an issue.
For the time being, what I recommend is that you consume the Search API directly from Twitter which is a more straightforward approach.
Hope it helps!
Certainly the best approach is to leverage the Search API (or whatever relevant API) from Twitter to accomplish this.
But if, for some other project, you want to host a full browser environment (JS + dom + renderer) that remains alive and lets you interact with it, the PhantomJS project might work:
http://code.google.com/p/phantomjs/
It hosts a WebKit instance for automation.