How to create screensaver during client gets data from server? - javascript

An Angular application weighs over 5 mb in production. First time, when client asks page from server it takes some time, during this process user sees a blank white page.
Is it possible to create screensaver until client gets data?

You have two options:
Option 1 - clean & tidy: Create a new loading component and set that as your root component, and offload all of the loading work from your root component to that new component via lazy loading.
Option 2 - quick & dirty: You can edit your index.html file and put whatever you want inbetween your main app component's opening and closing tags, including a style tag to style the elements which will appear there. This content will disappear when your app loads.

The cleanest and neater way is to Lazy Loading your modules. You can easily convert your modules to be loaded lazily.
This divides your huge javascript into chunks and does not load them until they are requested.

Related

Is it possible to alter actual css file using javascript?

I want to modify the CSS file using data that I get from the database. So, after the login, I am getting all the necessary data from DB and update styleSheet using insertRule/deleteRule methods then, redirect to the main page.
Login -> Theme engine page (modify css) -> home page
Theme engine page (theme.html) is an empty HTML page with one JS file (themeEngine.js) which modifies CSS file.
I checked the stylesheet in theme.html it is same as the expected result but, when it redirects to home page the CSS file goes back to its default version. The methods insertRule/deleteRule is not altering an actual file!
I tried importing themeEngine.js to every existing HTML file but in that case, default style appears (for a little amount of time, depending on the internet speed) before the theme engine starts to work and importing js file to every page is quite inconvenient.
I would like to know how can I solve this problem: having a custom style for every user. Is it possible to edit an actual CSS file using JavaScript?
Browsers can't change data on a server without explicit support from it by the server. (Imagine how long the Google homepage would survive otherwise!)
Typically you would need to pick a server-side programming language, use it to write an API, and then interact with it using Ajax.

Is it a good idea to pack all pages into JSON arrays besides index?

This question is a bit of an odd one, but simply refers to a Single Page Application POV - Where one page is loaded then other pages are loaded from click events, refreshing, and other events as such.
And recently I got the idea to simply pack all pages besides / (root directory) as JSON, so when pulling data from another page it can be decoded in JSON using JSON.parse(page) (JS) then put onto the page, and if there's any problem simply send a 404 message back as an example.
This was a new idea I got while building my SPA, and was curious as to if it was worth all the effort to setting up and managing.
Example from localhost/home
{
"html" : "<h1>This is the home page</h1>"
}
Example from localhost/
// add libraries like jQuery, js files
// use php to load the content div that the new data will be placed
// add stylesheets
// etc...
Which would be retrieved from JS using a GET request, then parsed, look in the JSON array for html then place it in the correct content box.

Larger HTML files VS client templating

Let's assume i have 50 views in my app, all of these views include user html.
<div>Hi, im a user</div>
What would be faster, loading and rendering the user view in the client and using the template engine to attach it to all of the other 50 views OR if this piece of HTML were on each of the 50 views, making their files larger, but eliminating the need for client rendering and the additional Http request?
Edit
I'm not concerned about duplicate code, we will compile the small piece of code, so it won't be duplicated. The question is strictly about speed of larger HTML files VS client rendering + http request.
You want to avoid putting the same exact HTML in every file. Use includes/templating/partials in order to display headers/footers so that when you need to make a change, you only need to change one file. Not 50.
As far as loading parts of the page asynch; It's all about what you want the loading to look like to the client. Asynch loading appears faster to the end user because the initial page load is faster (less data to transmit) but actually takes longer over all because of the multiple http requests.

Reusing html like templates without a view engine

This is for a new application, there's going to be several servers handling different parts (one for htmls, one as a proxy to handle https requests, and a full java backend with a database). The view server is supposed to be as simple as possible (an apache server delivering the htmls and that's it)
The idea is to use the pure htmls (with JS) that the UI designed created. Now, I thought of making the entire application using Jquery, by pulling all the dynamic data and append js files with logic on how to handle the ajax response.
My problem comes when I want to reuse htmls (the header, the footer and the menu are exactly the same for all pages). I can call, for example, /contact.html, and through ajax, call header.html, footer.html and menu.html. But that would mean 4 GET requests only for the main page (plus, rendering could be really off until all requests are finished).
I also don't want to have single full pages, because if I want to change the menu, I have to make that change in every html.
Is there some other alternative I'm missing ? If not, what is the best approach here (performance AND maintenance are equally important here)
Try http://mixer2.org/ .
Mixer2 can load html templates and convert them to java bean instance.
All the html tag and org.mixer2.xhtml.* java class are mapped one by one automatically.
So, You can load several templates such as "header.html", "footer.html", and re-use the tag snippet copy.

preload javascript (ckeEditor.js wysiwyg) in another page before called

Is there a way to pre-load ckEditor ckEditor before we even open the page in which the ckEditor.js javascript is being called?
I would like to do this as the ckEditor.js is a heavy 350kb file which for some user takes 20-30 sec to upload over the dialup connections. I wanna load it when the user has only opened the front page ( which is just a simple still html) and is busy reading the front page. and by the time he/she moves to the page where ckeditor is used, the ckeditor.js is already loaded and cached.
You can definitely do this by including CKEditor as a js file regularly on your home page, which will cause it to load into the cache before moving on to another page. The problem is that CKEdtior is usally linked to with some arbitrary number as a query string at the end of the file name which makes it uncacheable (ckeditor.js?v=12424324234 or something similar). You'll probably need to get into the CKEditor source (which I remember is a complete nightmare) and do a global find for where that file calls the JS file you're trying to cache, and make sure it doesn't include that variable query string on the end.

Categories

Resources