10

I am working on a pure HTML website, all pages are HTML with no relation to any server side code.

Basically every request to the server is made using AJAX, I send data from forms, I process this data in Handlers, then I return a JSON string that will be processed back on the client side.

Let's say the page is loaded with parameters in the URL, something like question.html?id=1. Earlier, I used to read this query string on Page Load method, then read data from the database and so on...

Now, since its pure HTML pages, I'm trying to think of an approach that will allow me to do the same, I have an idea but its 99% a bad idea.

The idea is to read URL parameters using JS (after the page has loaded), and then make an AJAX request, and then fetch the data and show them on the page. I know that instead of having 1 request to the server (Web Forms), we are now having 2 Requests, the first request to get the page, and the second request is the AJAX request. And of course this has lots of delays, since the page will be loaded at the beginning without the actual data that I need inside it.

Is my goal impossible or there's a mature approach out there?

Arindam Nayak
  • 7,346
  • 4
  • 32
  • 48
Ali Bassam
  • 9,691
  • 23
  • 67
  • 117
  • I'm guess, you can use htaccess, if there is a parameter u can overwrite the link and call php file, but i'm not sure how to do, just an idea – geekido Dec 25 '14 at 08:33
  • Very good question, following which I made a Google search with words: “javascript single page application framework”. The Nro 1 result was Durandal, after which there was a list for to different sources related to my search that I skim read. In those links frameworks such as AngularJS, Backbone, Knockout and a lot of other frameworks were mentioned and compared in more or less detailed way, which was very useful in my opinion. – jyrkim Dec 25 '14 at 13:52
  • One thing I noticed when I had a look at Durandal (http://durandaljs.com/showcase.html) was that it’s used for BizTalk 360 Web monitoring, which is kind of interesting that Microsoft has chosen it as the Web framework for BizTalk; so the reason I highlighted Durandal is the fact that you’re using ASP.NET :-) Overall, I think it’s kind of difficult to find the “right” framework, because they all seemed to have ups and downs. – jyrkim Dec 25 '14 at 13:53
  • Are you using WebForms or MVC? If you are open to using MVC, it will be a lot easier to implement this kind of SPA app. – Abhitalks Dec 27 '14 at 08:50
  • @abhitalks neither, my goal is to achieve total separation, I don't want my HTML pages to be related to any kind of server side code, in another way, I want pages that ends with `.html`, no `.aspx`, no `.xhtml`, no `.cshtml`, nothing at all. Maybe `global.asax` could provide a solution, maybe to intercept the request? – Ali Bassam Dec 27 '14 at 09:19
  • @AliBassam: That's ok, but you know you can't escape server side code. What will you call Ajax requests against? All I am asking is, what framework are you using for server side code? It could be asp.net webforms, asp.net mvc, php, ruby on rails, node.js whatever. – Abhitalks Dec 27 '14 at 09:22
  • @abhitalks it's a Webforms project, I'm calling `c#` handlers. – Ali Bassam Dec 27 '14 at 09:23
  • @AliBassam: Thanks. That will help me work out a suitable answer if possible. – Abhitalks Dec 27 '14 at 09:25
  • I guess, the approach that you have described is ok, since it is a plain HTML, there wont be any server side processing, so you will get your page rendered little faster. Once the HTML is rendered on the browser, as you suggested may be on load of the client side event, you can raise AJAX calls based on the query string. I remember I have done something similar in the past, and I didn't face any issues. – Thangadurai Dec 30 '14 at 04:47

9 Answers9

6

Is my goal impossible or there's a mature approach out there?

Lately there are a good handful of JavaScript frameworks designed around this very concept ("single page app") of having a page load up without any data pre-loaded in it, and accessing all of the data over AJAX. Some examples of such frameworks are AngularJS, Backbone.js, Ember.js, and Knockout. So no, this is not at all impossible. I recommend learning about these frameworks and others to find one that seems right for the site you are making.

The idea is to read URL parameters using JS (after the page has loaded), and then make an AJAX request, and then fetch the data and show them on the page.

This sounds like a fine idea.
Here is an example of how you can use JavaScript to extract the query parameters from the current page's URL.

I know that instead of having 1 request to the server (Web Forms), we are now having 2 Requests, the first request to get the page, and the second request is the AJAX request. And of course this has lots of delays, since the page will be loaded at the beginning without the actual data that I need inside it.

Here is why you should not worry about this:

  • A user's browser will generally cache the HTML file and associated JavaScript files, so the second time they visit your site, the browser will send requests to check whether the files have been modified. If not, the server will send back a short message simply saying that they have not been modified and the files will not need to be transmitted again.
  • The AJAX response will only contain the data that the page needs and none of the markup. So retrieving a page generated on the server would involve more data transfer than an approach that combines a cacheable .html file and an AJAX request.
  • So the total load time should be less even if you make two requests instead of one. If you are concerned that the user will see a page with no content while the AJAX data is loading, you can (a) have the page be completely blank while the data is loading (as long as it's not too slow, this should not be a problem), or (b) Throw up a splash screen to tell the user that the page is loading. Again, users should generally not have a problem with a small amount of load time at the beginning if the page is speedy after that.
Community
  • 1
  • 1
JLRishe
  • 99,490
  • 19
  • 131
  • 169
  • Very convinced with that, you made me feel better, so in conclusion, this approach is fine and nothing wrong with it, and it's even better and I should go with it? – Ali Bassam Dec 29 '14 at 05:19
  • @AliBassam I don't think one can say that one approach is absolutely better than all others, but the one you are considering is certainly a fine, modern choice with a lot of benefits. I think you should go with it if you want to. – JLRishe Dec 30 '14 at 09:21
2

I think you are overthinking it. I'd bet that the combined two calls that you are worried about are going to run in roughly the same amount of time as the single webforms page_load would if you coded otherwise - only difference now being that the initial page load is going to be really fast (because you are only loading a lightweight, html/css/images page with no slowdown for running any server code.

Common solution would be to then have a 'spinner' or some sort (an animated GIF) that gives the user an visual indication that the page isn't done loading while your ajax calls wait to complete.

Watch a typical page load done from almost any major website in any language, you are going to see many, many requests that make up a single page being loaded, wether it be pulling css/images from a CDN, js from a CDN, loading google analytics, advertisements from ad networks etc. Trying to get 100% of your page to load in a single call is not really a goal you should be worried about.

E.J. Brennan
  • 45,870
  • 7
  • 88
  • 116
1

I don't think the 2-requests is a "bad idea" at all. In fact there is no other solution if you want to use only static HTML + AJAX (that is the moderm approach to web development since this allow to reuse AJAX request for other non-HTML clients like Android or iOS native apps). Also performance is very relative. If your client can cache the first static HTML it will be much faster compared to server-generated approach even if two requests are needed. Just use a network profiler to convince yourself.

What you can do if you don't want the user to notice any lag in the GUI is to use a generic script that shows a popup hiding/blocking all the full window (maybe with a "please wait") until the second request with the AJAX is received and a "data-received" (or similar) event is triggered in the AJAX callback.

EDIT: I think that probably what you need is to convert your website into a webapp using a manifest to list "cacheable" static content. Then query your server only for dynamic (AJAX) data: http://diveintohtml5.info/offline.html (IE 10+ also support Webapp manifests)

Moderm browsers will read the manifest to know whether they need to reload static content or not. Using a webapp manifest will also allow to integrate your web site within the OS. For example, on Android it will be listed in the recent-task list (otherwise only your browser, not your app is shown) and the user can add a shorcut to the desktop.

earizon
  • 2,099
  • 19
  • 29
0

So, you have static HTMLs and user server side code only in handlers? Why you can't have one ASP .Net page (generated on server side) to load initial data and all other data will be processed using AJAX requests?

oryol
  • 5,178
  • 2
  • 23
  • 18
  • Yes only HTML pages and Handlers that receives AJAX requests. My goal in this website is to have complete separation, no server side code in pages (or related to pages in any way). – Ali Bassam Dec 25 '14 at 13:43
0

if its possible to use any backed logic to determine what to load on server side, that will be easy to get the data.

say for example if you to load json a int he page cc.php by calling the page cc.php?json=a, you can determine from the PHP code to put a json into the page it self and use as object in your HTML page

if you are using query string to read and determine, what to load you have to make two calls.

Naveen Setty
  • 615
  • 5
  • 26
0

The primary thing you appear to want is what is known as a router.

Since you seem to want to keep things fairly bare metal, the traditional answer would be Backbone.js. If you want even faster and leaner then the optimised Backbone fork ExoSkeleton might be just the ticket but it doesn't have the following that Backbone proper has. Certainly better than cooking your own thing.

There are some fine frameworks around, like Ember and Angular which have large user bases. I've been using Ember recently for a fairly complex application as it has a very sophisticated router, but based on my experiences I'm more aligned with the architecture available today in React/Flux (not just React but the architectural pattern of Flux).

React/Flux with one of the add-on router components will take you very far (Facebook/Instrgram) and in my view offers a superior architecture for web applications than traditional MVC; it is currently the fastest framework for updating the DOM and also allows isomorphic applications (run on both client and server). This represents the so called "holy grail" of web apps as it sends the initial rendered page from the server and avoids any delays due to framework loading, subsequent interactions then use ajax.

Above all, checkout some of the frameworks and find what works best for you. You may find some value comparing framework implementations over at TodoMVC but in my view the Todo app is far too simple and contrived to really show how the different frameworks shine.

My own evolution has been jQuery -> Backbone -> Backbone + Marionette -> Ember -> React/Flux so don't expect to get a good handle on what matters most to you until you have used a few frameworks in anger.

Andrew Hacking
  • 6,296
  • 31
  • 37
0

The main issue is from a UX / UI point of view.

Once you get your data from the server (in Ajax) after the page has been loaded - you'll get a "flickering" behavior, once the data is injected into the page.

You can solve this by presenting the page only after the data has arrived, OR use a pre-loader of some kind - to let the user know that the page is still getting its data, but then you'll have a performance issue as you already mentioned.

The ideal solution in this case is to get the "basic" data that the page needs (on the first request to the server), and manipulate it via the client - thus ease-in the "flickering" behavior.

It's the consideration between performance and "flickering" / pre-loading indication.

The most popular library for this SPA (Single Page Application) page - is angularJS

Yonatan Ayalon
  • 1,959
  • 18
  • 19
0

If I understand your inquiry correctly. You might want to look more about:

1) window.location.hash

Instead of using the "?", you can make use of the "#" to manipulate your page based on query string.

Reference: How to change the querystring on the same page without postback

2) hashchange event

This event fires whenever there's a changed in the fragment/hash("#") of the url. Also, you might want to track the hash to compare between the previous hash value and the current hash value.

e.g.

$(window).on('hashchange', function () {

    //your manipulation for query string goes here...

    prevHash = location.hash;

});

var prevHash = location.hash; //For tracking the previous hash.

Reference: On - window.location.hash - Change?

3) For client-side entry-point or similar to server-side PageLoad, you may make use of this,

e.g.

/* Appends a method - to be called after the page(from server) has been loaded. */
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

function YourPage_PageLoad()
{
   //your code goes here...

}

//Client entry-point
addLoadEvent(YourPage_PageLoad);

Since you're doing pure ajax, the benefit of this technique is you would be able to easily handle the previous/next button click events from the browser and present the proper data/page to the user.

Community
  • 1
  • 1
Lester S
  • 720
  • 7
  • 21
0

I would prefer AngularJS. This will be a good technology and you can do pagination with one HTML. So i think this will be good framework for you as your using static content. In AngularJS MVC concept is there please read the AngularJS Tutorial. So this framework will be worth for your new project. Happy coding

Jithin Kunjachan
  • 108
  • 4