I am using node.js and ejs for my template, and I included the header.html which contain all the libraries and style files, for all my html files.
The problem that I have is that it reloads all the html, css, and js when I switch between html files (e.g: home.html and about.html).
How can I cache the js and css files and avoid reloading them when I render?
Is there a easy and convenient way (plugins) to swap out the body content and not reload header.html every time for every html files?
HTML files (home.html and about.html)
<% include header.html %>
<body>
<% include navbar.html %>
<% include menu.html %>
</body>
Route files for home.html and about.html
router.get('/', function(req, res) {
req.getConnection(function (err, conn) {
res.render('home', {data: rows});
});
});
I need to perform alot of querys in the back-end, and needs to return the data to the front-end.
What you are asking to do is build an application that loads data that will remain static while certain area(s) of the site a dynamically changed based on user interaction or whatever.
This is called a single page application (SPA https://en.wikipedia.org/wiki/Single-page_application), and the main technology involved with this is AJAX. There are many approaches to doing this and many frameworks such as AngularJS, Knockout etc that help you do this as well.
If you are loading new page states via server-side code then your architecture will need to be refactored or preferably rebuilt if you wish the achieve this effect the right way. Every time your user has a page refresh, all of the data must be re-sent to the user and because of this you will have to resend the entire view (data and dom nodes script includes images etc..) with each update you wish to perform on the UI.
You may server cache some things, or even client cache pages that the user has not been to yet... but without ajax there is really no way around the fact that you must reload the entire page each time you wish to make an update.
There are more demos of how to build this with NodeJS than there are fish in the ocean, but here the most popular one on my SERP results https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular.
Related
Is it possible to serve a dynamic html page without a backend server or without using a front-end framework like Angular?
Edit
To clarify, the index file is served from a backend. This question is about how to handling routing between the index and dynamic pages.
I have an application that consists of two files - index.html and dynamic.html. When the user clicks an option say "Option A", they are served dynamic.html and the url is updated to /option-a. Now, with a server this is no problem and assuming the user visits the app from the landing page, it isn't a problem either because a cookie can be set. However, suppose a user visits a page at my-domain/option-a. That route doesn't exist and there is no server to redirect so it will 404. They would have to visit dynamic.html.
I think this architecture demands that there's either a server to handle route redirects or a SPA framework.
Is there something I'm missing?
your SPA framework will be active only once your HTML page is loaded and to do that you need to redirect any URL that user tries for your domain to that HTML file. For this you obviously need a server (and since you are talking about my-domain/option-a I assume you have atleast a basic server). You can refer to this link to get an idea on how server can redirect a URL to specific html file: Nodejs - Redirect url.
Once HTML is loaded you can initialize your SPA framework and decide the template to be loaded based on the URL.
Note: without a server you will access URLs using file://somepath/index.html and anything other than this URL will result in 404 and no SPA framework can handle that.
I think the solution is to use a static site generator such as Jekyll or Middleman and allows you to convert information into static pages. That way you functionally are building a bunch of pages but they are all compiled ahead of time. You can add dynamic content that is loaded in from a yaml file and it will compile the content into separate html pages.
It is not possible, but there is a workaround using url parameters like this:
my-folder/index.html
my-folder/index.html?=about
my-folder/index.html?=about/sublevel
my-folder/index.html?=profile
my-folder/index.html?=./games
const urlParams = new URLSearchParams(location.search);
const route = urlParams.get('');
console.log(route);
// Should print "about" "about/sublevel" "profile" "./games"
Of course this approach is not as clean as using a server for routing, but it's the best you can get without a server.
BTW. I tried an alternative solution creating symlinks with all the target routes pointing to the same index.htmlfile. But it did not work because the browser (firefox) redirects by default when it finds a symlink, thus home is shown all the time.
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.
I have a javascript file that other people use on their site. It creates a button and loads a css file that is hosted on our server:
style.setAttribute('href', 'http://mysite.com/assets/some.css');
The user can call it in their site like so:
<script type="text/javascript" src="http://mysite.com/global.js"></script>
I want to give the user the ability to upload their own CSS file on my web app that will replace the one that I am setting in global.js.
Currently, I added a custom_css:binary column in the Users table that will hold the CSS file, but this requires the user to stay signed in on the site. I'm not sure if this is the right way to approach this or if there is a better way to do it. Also, what are some security risks to this approach?
I'm using RoR for the backend.
Any help would be great!
UPDATE 1
I'm able to store the uploaded JS file and load the custom CSS, but it's currently checking the current_user - this means the stylesheet will not be rendered for the users. How can I work around this?
I was able to find the solution myself.
There are several ways to approach this:
Add a query string to the JS src
Scrape the page for a certain element that gets generated by your script
I opted for option 1. When I detect a dynamically generated query string, I send that over to the controller in the params hash and load the css file accordingly.
I'm working on a ruby-on-rails app that would write XML files for each section on a page. So instead of querying the database every time the user makes a request it would simply call the XML file that corresponds to that page and the javascript will parse the file. On the rails side there will be a content management system. When user is ready to commit all their content changes they will hit the publish file at which point the data which possibly was already saved in the database will now be written to an xml file.
The challenge is that I want all the xml files to live inside a folder in the main project directory called xml_display.
How do I configure the routes.rb to take a request like... myhost.com/display_xml/pagename.xml
and return the static page in rails_project_root/display_xml/pagename.xml
I've looked into High Voltage and it doesn't seem to be the solution I'm looking for.
I hope this sounds interesting to you.
You can just make a controller that redirects to your static files something like the following:
routes.rb
match '/display_xml/:id', :action => 'display'
display_xml_controller.rb
class DisplayXMLController
def display
redirect_to "http://#{host_domain}/static_xml_dir_in_public/#{params[:id]}.xml
end
end
You need to set host_domain to wherever you are running from. Most set up in a config.yml
I have a web page where you can customize your game character. In order to speed up browsing (gems) I load entire gems database (600 entries, 247KB) as a separate .js file, so it can be cached and I don't need to load it every time.
I don't notice a delay, is it still a bad idea?
Should I ajax-get necessary records on the fly instead?
FYI: I use ASP.NET MVC 2.0, here is loading the script:
<script type="text/javascript" src='./Data.aspx/Gems'></script>
And here is the action:
[OutputCache(Duration = 14400, VaryByParam = null)]
public ActionResult Gems() {...}
EDIT: My main concern is not load time, but memory usage. Is it going to have noticeable impact having excra 250KB of javascript loaded/parsed by browser?
I find it a pretty good idea. Plus, if you ever need to "upgrade" the GEMS database you can just load up the scripts with a version tag like
<script type="text/javascript" src='./Data.aspx/Gems?v=1232'></script>
Where v=123 will force the user to download the new version if required.
I assume the page won't function until the script is fully loaded anyway but to make the page feel faster you should load the javascript at the bottom of the page.
Embedding the data as a script will cause the browser to halt page loading until the script file has been downloaded and parsed.
If you fetch a static script or data file using ajax, the browser should cache it as if it was an inline script, so there isn't any downside to using ajax, and you don't have to worry about slowing the page load.