I created a React App on a multi page website, but I don't know how to integrate it on our website.
Explanation of the problem
The user load the website "/" (no react code is involved at the first loading)
The user click on a link "/appReact"
The _"/appReact" page loads the page and the React app code
The React app sends ajax requests to the server
Finally the React app gets the data and render itself
The step 3 and 4 makes the loading very slow.
The step 3 delay is caused by the multipage nature of the website.
The step 4 delay is caused by the response of the server
Possible solutions
I can try many different solutions or combine them, but I'm not sure if is the right way to proceed.
Optimize the react app to makes the ajax loader faster
In my case I can do that but is not the real problem.
Load the React app when the user load the website ("/")
This could improve the step 4, but we carry on the React app all around the website.
Use react router in conjunction of the multipage website
I don't know if is possible to do that. React-router can handle the url to load different apps, but I don't know if is possible to do in a multi site page without affect the site.
A trick using jquery
I have this temptation to bind the click (step 2) and hide the content of the page to run the react app. This will simulate a Single Page Application, but is a patch. I would like something more reliable.
Any suggestion?
You could try React Habitat
That way you can pass properties to your React App directly on page load and not need the additional ajax request.
Related
I researched a lot on how to measure the page load times in a single page application like React, Vue etc but did not get any proper answer.
In Websites that are built using Single Page Application frameworks/libraries like vue, react etc load the initial page only once and then all the route changes do not fire a page load. To understand it better let us say our landing page is /index. When index route is loaded it is considered a Page Load but when we change the route to let's say /index/products here SPA takes care of it and loads the content using AJAX without loading the page.
But in websites that are built without SPA frameworks the case is different it loads every page on route changes and we can run the below line of code on each page and get the performance metrics.
performance.getEntriesByName(window.location.href)
This line of code simply returns a dataset containing some information about the page load speeds as shown in the image below.
So in SPA it runs only once and not when we change the routes. So what I want to do here is that I need to make this line run on every route change so that I get the above performance metrics that are shown in the image for every page.
Right now it only runs for the main page and when I change the routes inside the website, it does not run for every page. But in the case of reload it works properly because reload is again a new page load.
I have a CMS backed web site where Vue.js was added to handle a UI feature of the site. The feature has tabs that switch content on the page. I need to make the tabs deep linkable as in there needs to be a way to have a certain tab set as active on page load. I can easily achieve this using a URL has but I would like to see if I can just use the Vue.js router. I haven't been able to find any resources to add the router to an existing site that isn't fully powered by Vue.js.
Is there way to add vue-router without any additional server configuation?
You could use Vue Router in the hash mode for history. Your URL would end up being something like www.example.com/post/1#tab1 and www.example.com/post/1#tab2.
One caveat, if SEO is important to this site, then you would need to do the routing on the server to make the page easier to crawl by Google.
I'm working on a mobile app with Cordova. When the user starts up the app, I'd like to kick off a non-blocking function to load data from the server. This function can take up to a few seconds.
I'm using the leecrossley/cordova-plugin-background-task plugin. It works fine if I stay on the page that kicked off the function. If I change pages, it stops the function.
Any thoughts?
Jon
Sounds as if you are experiencing web-view-throttling!
Cordova uses the Chromium web engine so it usually follows all of the performance settings implemented in the chrome browser.
You can read some more about the throttling issue here:
https://thenextweb.com/apps/2017/01/26/chrome-throttle-background-tabs-google/#.tnw_WIKDX2EX
The solution to your problem is
to create a main page to function as the core of your application. This main page will always be open 'thus saving your from scripts being stopped when a new page is loaded.
For app pages, i recommend either:
creating a separate .html file per app page, then load those external pages into your main app page via an iFrame ...the src of the iFrame can be updated via javascript. (the downside to this approach is that you will need to write additional javascript to monitor and control the events that happen inside of your iFrames -from the main page.)
or
Build a very big single page application; wrapping all of your app pages in divs.. then create a javascrip menu function that manages what page is displayed and what page is hidden. (This may result in a massive .html page but this method will allow you to run any number of non-blocking scripts the device can handle at once.) <-- This is the method i have been using for over three years, i also add some iFrames to include special page modules when needed. CSS and JavaScript can be loaded from external files.
I believe most cordova developers actually use this single-page method!
I need to make a headless (for a docker container) app that waits for an external signal and then acts on that signal by clicking on several html elements (selectors, buttons, links) and filling in some input fields. All this can be done using jQuery, I know how to do that.
The app needs to keep the page loaded so it can act immediately, reloading the page every time is taking too long. The whole action of receiving a signal and filling in a form and submit it, should be done under one second.
I made an electron app that does all this but I need to make the app headless so it can be run inside a docker container.
It looks like Phantomjs could do this but I see two problems:
The Phantom script needs to keep the web page loaded as the web page I need to automate is very heavy, it can take more than a minute to load.
The Phantom script needs to be able to receive a signal and report back on the progress. HTTP or file based is too slow, I'd like to use websockets for this communication.
I hope someone can point me to the right tools for this and/or point me to some examples how to achieve this.
I would like to use Javascript, but if there is a perfect solution in an another modern language, I have no problem to use that.
I managed to get it working inside a Docker container using Electron.
Does a browser logs a history on url hit? or when all the resources of an html page are loaded?
In my page, few external links make my landing page load a little longer..though the html(view) page is rendered. Based on a condition check, angular js routes to the second page quickly, but the browser history log doesn't store the first page's entry. We have back button functionality enabled in our page. So when a user clicks on browser back button, it should show the first page. But instead, browser's home page is rendered.
I've already asked a similar question related to angular js here:
Angular JS - How to force browser to log history for quick routing?
I'm unable to adopt both the solutions since we're not encouraging any third party scripts such as angular ui-router. Also, the second solution is not adoptable since after $http.get('/someUrl') we need to delay for few seconds to call another service. If "someUrl" takes some 6 to 7 seconds, we need to know this delay beforehand (which is indefinite) to call another service.
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
States are bound to named, nested and parallel views, allowing you to powerfully manage your application's interface.
For more help refer this
Angular JS - How to force browser to log history for quick routing?
Angular's $location.replace() did the magic at last.
Previously I was using $location.url('/somepath') which was only redirecting to my browser's home page instead of saving first page's history.