6

I have an asp.nset-mvc site and I have a partial view that exists in a number of different views.

There is also a .js file that is associated with functionality that is used by that partial view.

Right now i am including that js file in every Parent view that houses this partial view inside the head section.

I am thinking now its easier to maintain by removing that reference to the javascript file from every parent view and just putting that reference inside the body of the partial view. (so its just listed in one place)

Does anyone see any downside to this change? Is this the recommended practice with javascript that is only leveraged by a specfic partial view?

George Stocker
  • 57,289
  • 29
  • 176
  • 237
leora
  • 188,729
  • 360
  • 878
  • 1,366
  • 2
    Why not just bundle all of your JS together in a single file and avoid the issue entirely? – Evan Davis Apr 22 '14 at 13:46
  • I don't understand your comment. The js is all in a single .js file. I am just trying to determine the best practice for referencing that js file (from every parent view or inside the partial view) – leora Apr 22 '14 at 14:17
  • Here is exactly what you're looking for: [Include JavaScript file in partial views][1] [1]: http://stackoverflow.com/questions/912755/include-javascript-file-in-partial-views – Stanko Apr 25 '14 at 11:43
  • @leora, are you asking about any particular mvc framework version? – Dave Alperovich Apr 25 '14 at 14:47
  • Just put it in the partial view. Better to keep things together that change together. – Evan Larsen Apr 29 '14 at 14:59

7 Answers7

5

I would ask myself a few questions:

  1. How large is the js file? How large is it minified?
  2. How much times is it used in an average use in your application?

If it is a large file that isn't used a lot, I would include the script inside of the file and not make a deal about it.

You need to remember that js files are cached, and if the average user will enter the partial view, he will need to download the script.

As for a good practices for script\style handling:

Use combined js files and minify them in production.
This can be done by using a asset manager or by "grouping" js files using bundles.

Bundles
Cassette - For Assets

You can also use "require.js" for dependency script loading.
I haven't used it but from what I know, you can setup modules and js functions that depend on other modules and js files.

RequireJS

Amir Popovich
  • 29,350
  • 9
  • 53
  • 99
3

It sounds to me like you're better off just keeping it with the rest of your scripts.

You should be bundling, minifying, and "forever caching" the scripts. If you're doing that, then even new users to your site only have a small file to download. By breaking it up into multiple files, you're only hurting things. It's better for them to just download everything they are going to need for your site all at once.

I'd consider separate bundles if you have vastly different sections of your site that you don't expect users to cross. For example, maybe your unauthenticated section and your 'members only' section. Even then, it won't make much difference, so it may make more sense to just bundle them in a way that makes sense for the overall architecture of your site (e.g. perhaps the members only section is a different mvc area).

But pulling out scripts that partials need individually just because not every single page will use it is going to be counter productive.

EDIT: I think I understand better after re-reading. What I said still stands, but emphasis on the bundling. Don't just include individual script references for all your scripts on every page that needs it. Better to basically bundle up all the scripts your site needs and include them on every single page. With caching, users will only download it once, and then make no further script requests as they navigate through your site, instead of each page ending with yet another unique script that requires downloading.

InfinitiesLoop
  • 14,349
  • 3
  • 31
  • 34
0

I think a good solution it's to create extensions methods to add javascript in partialView

A good example : How to render a Section in a Partial View in MVC3?

Community
  • 1
  • 1
binard
  • 1,726
  • 1
  • 17
  • 27
0

Answer to your question can be derived from the answer to this question:

  • Do you consider this partial view being a part of the entire web application, or just a separate component?

Usually, it's part of the web application since you are going to use it inside this web application only. So, from this point of view it's not necessary to bundle the view with its javascript, since the javascript, as well as the view, is part of the web application entirety anyway.

  • When do we bundle things?

When they are related to each other and not related to anything else outside of its entirety. I doubt that your javascript for this view does not depend on anything else outside of it. Not even a jQuery? not even any kind of framework, e.g. knockout or bob.js? If yes, then why don't you bundle your view with those frameworks in it too?

Yes, the answer is - dependencies. Ones are implementation and others are dependencies. However, the border between the implementation and dependencies becomes blurry when working with the partial views inside one web application. Reason being, partial view is part of the web application. It's just a framework's way of handling things to let you separate the partial views in the reusable way. But still the partial view remains a part of the entire web application, and thus its implementation script as well.

If you followed all these thoughts, then you would agree that in this particular case, it does not matter if you want to bundle the code with the partial view, or if you want to bundle it with the web application's rest of the scripts. It's simply the same thing.

So, the decision must be dictated by other indicators, such as script load performance and so on. This goes outside of the scope of the question, but the provided description should be enough as an answer.

Tengiz
  • 8,011
  • 30
  • 39
0

Loading javascript ad-hoc by just putting that reference inside the body of the partial view is a correct strategy. You avoid parsing and interpreting overhead on all other pages. Even if your javascript file is cached, it would still take time (however minuscule) to get executed on every page that includes it. What if you have complex logic in it, or iterates over DOM, or you have many such files?..

Really, this is the first step to mature dependency management. If you know what functionality is used on what page, any re-factoring or maintenance effort will be less expensive in the future.

The question is how to reference javascript resources from within the partial view. You don't want to just dump a <script> tag in the middle of the page [citation required], instead you can use a specialized asset manager like cassette. There are numerous perks to using it, but first and foremost you can reference assets in one place of the page life-cycle (e.g. from your partial view):

@{
  Bundles.Reference("scripts/your-dependency.js");
  Bundles.Reference("scripts/another-dependency.js");
}

...and then render the required<script> tags elsewhere (e.g. in your master view):

<body>
  ...
</body>
  @Bundles.RenderScripts()
</html>

...which could include additional resources required from other views and/or minified bundles containing shared javascript code.

Oleg
  • 24,465
  • 8
  • 61
  • 91
0

I use something like what is explained here, works great. http://blog.mariusschulz.com/2013/07/07/generating-external-javascript-files-using-partial-razor-views

user3210546
  • 155
  • 7
0

i think u should use requirejs because of

In my opinion, there are three rather important reasons:

You can create and re-use modules without polluting the global namespace. The more polluted your global namespace is, the bigger the chance of a function/variable collision. That means you define a function called "foo" and another developer defines the function "foo" = one of the functions gets overwritten.

You can structure your code into separate folders and files and requirejs will load them asynchronously when needed, so everything just works.

You can build for production. RequireJS comes with its own build tool called R.JS that will concat and uglify your javascript modules into a single (or multiple) packages. This will improve your page speed as the user will have to make less script calls and load less content (as your JS is uglified).

You can take a look at this simple demo project: http://bit.ly/requirejs (in cloud9ide).

To build your modules into a single app, all you have to do is have requirejs npm package installed and run the command: r.js -o build/build.properties.js

In development, having all modules in separate files is just a good way to structure and manage your code. It also helps you in debugging (e.g. error on "Module.js line 17" instead of "scripts.js line 5373").

For production, you should use the build tool to concat and uglify the javascript into a single file. This will help the page load quicker as you are making less requests. Every request you make to load something slows down your page. The slower your page, the less points Google gives you. The slower the page, the more frustrated your users will be. The slower your page, the less sales you will get.

If you wish to read more about web page performance, look at http://developer.yahoo.com/performance/rules.html

Gaurang s
  • 831
  • 6
  • 18