Organizing Javascript files in the solution [closed]

Question

Organizing Javascript files in the solution [closed]

Navigation

#1 by (2 votes)

-1

Thinking about the concept of HTML 5 and modern web standards we have that in a web page, the HTML file should provide the structure, the CSS style file should provide the formatting and the Javascript should provide the behavior of the page. >

Looking at this, how should we split our javascript code? One file for each page, one "archive" with all the events and methods of all the pages?

Should we have a .html and a .js separated file for each webpage?

What is your recommendation?

[UPDATE QUESTION 3/5/2014]

I understand that it is not a question that will have a right or wrong but my goal is to collect the largest number of different opinions and make my conclusions based on the comments and responses of colleagues.

In order to respond, some will consider code reusability, others will consider performance, other maintenance, etc.

My question is not about using existing JS frameworks but my own routines.

For example, let's say I have a page that has a combobox and I want it to select a value something happens on the page, either manipulate other objects via the DOM or perform some remote operation with Ajax. Somewhere on my page I will have a javascript to perform this. My question then applies: For this type of javascript code, I create one file per page, I leave JS in the html file (cshtml, php, whatever) or I put all those small routines in a single js and link to all pages, or any other variation thereof.

I find a valid discussion that can add value to many.

What do you recommend?

javascript

asked by anonymous 05.03.2014 / 05:13

1 answer

Switch with several POST [duplicate] How to create a Live Wallpaper

score 2 · Answer 1

The two main factors in this decision are download time and cache usage. Both are conflicting, and a trade-off is needed.

Do not send the code that a page will not use reduces the size of the file and consequently the download time, causing the page to render faster. However, when the next page is loaded your code will not be in the cache (because it is different from the first page) and it will have to be downloaded again. That is, individual performance is maximized, but it is committed to collective.

Already using an "archive" with all site code has the opposite feature: the first time a visitor accesses the site it will find it slow as there is a large amount of data to download. But if it continues to the end (ie do not give up and close the browser tab before the site loads) it will find a site faster than usual - since all pages use the same code, which is now in the browser cache.

At first glance then it may seem that using multiple files is better - because everything that is common to the various pages will go to cache, only what is new that will be downloaded with each new page. But in reality this is not so. When a request is made to the server, there is an overhead to establish the connection, send the request and receive the response. If multiple files are combined in one, this overhead is amortized between them, since there will only be one request and one response (albeit long). With several, there would be multiple requests and multiple responses (one round-trip for each file).

What to do then?

First, ensure that the visitor will not give up on your site without even looking. Do whatever it takes to make your home page as fast as possible (and preferably as portable as possible - even with JavaScript disabled). In other words, "compile" a JS specific to it. For the other pages, it is worth compensating for everything in one file, since the initial slowness will be paid in the long run. Or, if your site is "partitioned" (eg, customer area, employee area), create specific files for each set of use cases.

If your code uses popular libraries (such as jQuery), it may be worth downloading them from a CDN instead of your own website. I do not have information on which ones have the most traffic (and therefore already have the cached code on as many computers as possible), but it would be something to consider if you use a free CDN.

And what about the developer side?

As pointed out in the comments, from the point of view of the final result (ie what will be sent to the client) does not really matter how you organize your sources - since they should be minimized before using it (compression web servers help, but it does not replace all the benefits of minification). As this topic is already more subjective - better way to organize, better tool to "compile", etc. - I will refrain from expressing an opinion.