Organizing Javascript Files in the Solution

Asked

Viewed 982 times

-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 it this way, how should we split our javascript code? A file for each page, an "archive" with all events and methods of all pages?

We should have a file for every web page .html and a .js separated?

What is your recommendation?

[UPDATING QUESTION 05/03/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 take my conclusions based on the comments and answers of colleagues.

To answer some will consider reusability of code, others will consider performance, others 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 that when selecting a value something happens on the page, either manipulate other objects via DOM or perform some remote operation with Ajax. Somewhere on my page I will have a javascript to run this. My question then applies: for this type of javascript code, I create a file per page, leave the JS in the html file (cshtml, php, whatever) or put all these little routines in a single js and Linko to all pages, or any other variation of it.

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

What do you recommend?

javascript
  • 2

    This depends a lot. Among other things, on the structure of the application. You can split the code into dozens of js files, and compile a single, minified file to be delivered to the browser. In general, the fewer files you deliver to the browser, the faster the app.

  • It became vague, the answer will depend on individual opinion.

  • As @bfavaretto comments the "best practice" can range from a large minified file to a complex modular structure with multiple files (a la AMD). You will find people advocating one, the other or neither according to the characteristics of the problem, background who is responding and personal opinions.

  • In my opinion, what is explicit in the question is quite objective ("how to divide the code"). Only what is implied is that it is subjective ("how to divide from the point of view of performance" vs "how to divide from the point of view of logical organization" vs other points of view). That is, it is not the case to close, just edit it by putting a little more context (i.e. focusing on what can be answered objectively). P.S. will remove the "best-practice" metatag, other relevant tags can be added later depending on the context.

  • Each framework you use will have its best practices, being that Angularjs, Polymer-project, Backbone, Extjs, Meteorjs, and several others, each will be different. So it’s at least vague and based on opinion. The answer will be vague tb, something like MVC, HMVC or Web Components style, all talk to join files and minify them. But they do not fully answer the boy’s question. If he specifies the environment he wants to organize it may be possible to help him.

1 answer

2

The two main factors in this decision are the download time and the use of the cache. Both are conflicting and it is necessary to make a trade-off.

Not sending the code a page will not use reduces the file size 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, maximizes individual performance, but commits to collective.

Already use an "archive" with all the code of the site has the opposite feature: the first time a visitor access the site he will find it slow, because there is a lot of data to be downloaded. But if it continues until the end (i.e. do not give up and close the tab of the browser before the site loads) you will find a website faster than usual - since all pages use the same code, which is now in the browser cache.

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

What to do then?

First, ensure that the visitor will not give up your site without even looking. Do whatever it takes for your home page is as fast as possible (and preferably as portable as possible - even running with Javascript disabled). In other words, "Compile" a JS specific to it. For the other pages, it pays to condense everything in one file, since the initial slowness will pay in the long term. Or, if your site is well "partitioned" (e.g., customer area, employee area), create specific archivals for each set of use cases.

If your code uses popular libraries (such as jQuery), it might be interesting to download them from a CDN instead of your own website. I have no information about which of them have more traffic (and therefore already have the code cached on as many computers as possible), but it would be something to consider if using a free CDN.

And as for the developer’s side?

As pointed out in the comments, from the point of view of the final result (i.e. what will be sent to the customer) does not much matter how you organize your sources - since they should at least be minified before using (Standard web compression helps, but it doesn’t 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.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.