I have an MVC page that has a number of JavaScript dependencies, let's call them depend-A and depend-B where depend-B depends on depend-A. These are both included in different bundles in MVC that is being included on the page. After running this through Google's pagespeed tool it suggested that we should be including the JS asynchronously to prevent render blocking.
Because of the dependencies, they need to load in particular order so I have looked into utilising LABJS to load them asynchronously in the correct order to prevent the render blocking.
This works by including the bundle's URL, but I lose the ability to be able to have the debug versions of the JS files locally while developing.
Can anyone suggest a way around this, so that we can load the JS files asynchronously but in order and maintain the debug versions locally?
Here is what I am currently using.
<script src="~/Scripts/LAB.min.js"></script>
<script>
$LAB
.script("#Scripts.Url("~/bundles/jquery")").wait()
.script("/scripts/fileone.js").wait()
.script("/scripts/filetwo.js").wait(function() {
FunctionInFileTwo();
});
</script>
The page source with the above code is as follows.
<script src="/Scripts/LAB.min.js"></script>
<script>
$LAB
.script("/bundles/jquery?v=GnU3whLS74nHNYUsUJjcWJKdXvKBNbFqBrkQVKSNlKc1").wait()
.script("/scripts/scripts/fileone.js").wait()
.script("/scripts/scripts/filetwo.js").wait(function() {
FunctionInFileTwo();
});
</script>
It doesn't look like there's any clean API available for this.
Scripts.Render("~/bundles/yourbundle") returns an IHtmlString of the necessary script tags - you could make a method that scavenges the script srcs from that string and generates the correct $LAB invocations.
Scripts.Manager.RenderExplicit(tagFormat, paths) comes close, where you'd just pass a better format string as the first argument, but reading the code it looks like it could start including differently formatted script tags verbatim in the middle of the list.
Related
I've received a third party javascript library from a vendor with integration instructions that say use the following script include:
<script type="text/javascript" src="../Scripts/thirdpartyscript.js?config.xml"></script>
Note the "?config.xml" bit at the end of the src tag. It's an xml file containing data that the library parses and acts on. Removing the parameter causes the library to throw an exception as it tries to parse a null xml response object.
Require.js doesn't want the "?config.xml" parameter at the end. It treats it like it's part of the lib file name.
Rewiring the third party code won't be a manageable option. Can't remove the code as it's an integral component of the system. I don't want to dump require.js as the app is SPA backbone and require.js is module/dependency manager for the entire backbone code base.
Any viable options?
REVISED ORIGINAL POST FOR CLARITY:
You may be misunderstanding how the "src" attribute of the script tag works. All it does is include the script from the URL given. If the web server serving the file does nothing with the query string (?config.xml), it is just ignored. Remember, "script" tags just include code in your page and executes the loaded code, THAT IS IT. The script tag wouldn't even understand what you mean by "?config.xml" beyond that it is just part of the URL, and just loads scripts from the URL you provide it.
What you possibly need to do is include the script file and call some function or object/function in that script with the XML file as a parameter. The script can, perhaps, retrieve that XML file from the web server (via ajax, a library like jQuery can help with that) also and then process that XML. However, the process of doing that may be out of the scope of what my answer can provide without writing a small "novella" :)
Short Answer: The "?config.xml", as far as the script that is loaded goes, does nothing.
I tried unsuccessfully to add a google map(externally loaded script) to a meteor app, and I noticed there were two kinds of problems:
If I do the simple thing and add the main API script to my <head></head>, then it gets rendered last.
When this happens, I am obliged to insert any scripts that depend on the API again in my template's <head> - after the main API script. (otherwise scripts complain they don't see the API blabla..)
Then the time for the actually function call comes - and now putting it inside <head> after the rest won't work. You need to use Template.MyTemplate.rendered.
Basically my question is:
What's the cleanest way to handle these kinds of things?
Is there some other variable/method I can use to make sure my Google main API file is called very first in my HTML?
I just released a package on atmosphere (https://atmosphere.meteor.com) that might help a bit. It's called session-extras, and it defines a couple functions that I've used to help with integrating external scripts. Code here: https://github.com/belisarius222/meteor-session-extras
The basic idea is to load a script asynchronously, and then in the callback when the script has finished loading, set a Session variable. I use the functions in the session-extras package to try to make this process a bit smoother. I have a few functions that have 3 or 4 different dependencies (scripts and subscriptions), so it was starting to get hairy...
I suppose I should add that you can then conditionally render templates based on whether all the dependencies are there. So if you have a facebook button, for example, with helpers that check the Session variables, you can give it a "disabled" css class and show "loading facebook..." until all the necessary scripts have loaded.
edit 03/14/2013
There is also an entirely different approach that is applicable in many cases: create your own package. This is currently possible with Meteorite (instructions), and the functionality should soon be available in Meteor itself. Some examples of this approach are:
jquery-rate-it: https://github.com/dandv/meteor-jquery-rateit
meteor-mixpanel: https://github.com/belisarius222/meteor-mixpanel
If you put a js file in a package, it loads before your app code, which is often a good way to include libraries. Another advantage of making a package is that packages can declare dependencies on each other, so if the script in question is, for example, a jQuery plugin, you can specify in the package's package.js file that the package depends on jQuery, and that will ensure the correct load order.
Sometimes it gets a little more interesting (in the Chinese curse sense), since many external services, including mixpanel and filepicker.io, have a 2-part loading process: 1) a JS snippet to be included at the end of the body, and 2) a bigger script loaded from a CDN asynchronously by that snippet. The js snippet generally (but not always!) makes some methods available for use before the bigger script loads, so that you can call its functions without having to set up more logic to determine its load status. Mixpanel does that, although it's important to remember that some of the JS snippets from external services expect you to set the API key at the end of the snippet, guaranteed to be before the bigger script loads; in some cases if the script loads before the API key is set, the library won't function correctly. See the meteor-mixpanel package for an example of an attempt at a workaround.
It's possible to simply download the bigger js file yourself from the CDN and stick it in your application; however, there are good reasons not to do this:
1) the hosted code might change, and unless you check it religiously, your code could get out of date and start to use an old version of the API
2) these libraries have usually been optimized to load the snippet quickly in a way that doesn't increase your page load time dramatically. If you include the bigger JS file in your application, then your server has to serve it, not a CDN, and it will serve it on initial page load.
It sounds like you're loading your Javascript files by linking it with HTML in your template. There's a more Meteor way of doing this:
From the Meteor Docs:
Meteor gathers all JavaScript files in your tree with the exception of
the server and public subdirectories for the client. It minifies this
bundle and serves it to each new client. You're free to use a single
JavaScript file for your entire application, or create a nested tree
of separate files, or anything in between.
So with that in mind, rather than link the gmaps.js into head, just download the un-minified version of gmaps and drop it in you application's tree.
Also from the Meteor Docs:
It is best to write your application in such a way that it is
insensitive to the order in which files are loaded, for example by
using Meteor.startup, or by moving load order sensitive code into
Smart Packages, which can explicitly control both the load order of
their contents and their load order with respect to other packages.
However sometimes load order dependencies in your application are
unavoidable. The JavaScript and CSS files in an application are loaded
according to these rules:
Files in the lib directory at the root of your application are loaded
first.
[emphasis added]
And if the sequence is still an issue, drop the js file into client/lib and it will load before all the Javascript you've written.
I've used meteor-external-file-loader and a bit of asynchronous looping to load some scripts, which will load javascript (or stylesheets) in the order you specify.
Make sure to have meteorite and add the package above >> mrt add external-file-loader
Here's the function I wrote to make use of this package:
var loadFiles = function(files, callback) {
if (!callback) callback = function() {};
(function step(files, timeout, callback) {
if (!files.length) return callback();
var loader;
var file = files.shift();
var extension = file.split(".").pop();
if (extension === "js")
loader = Meteor.Loader.loadJs(file, function() {}, timeout);
else if (extension === "css") {
Meteor.Loader.loadCss(file);
loader = $.Deferred().resolve();
}
else {
return step(files, timeout, callback);
}
loader.done(function() {
console.log("Loaded: " + file);
step(files, timeout, callback);
}).fail(function() {
console.error("Failed to load: " + file);
step(files, timeout, callback);
});
})(files, 5000, callback);
}
Then to use this, add to one of your created methods for a template like so:
Template.yourpage.created = function() {
var files = [
"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
"javascripts/bootstrap.min.js"
];
loadFiles(files, function() {
console.log("Scripts loaded!");
});
}
Quick edit: Found it's just a good idea to place the functionality from the .created method in the /lib folder in Meteor.startup();
Meteor.startup(function() {
if (Meteor.isClient) {
// Load files here.
}
});
Caveat: Lots of javascript files = really long load time.... Not sure how that will be affected by the normal meteor javascript files, and the load order there. I would just make sure that there are no conflicts until users take action on the website (or that if there is, they are loaded first).
Is there anyway of importing multiple javascript files in HTML without having to specify each file?
<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>
ie. can I specify something like js/toolkit/* ?
I have 50+ javascript files that i have to import, and to specify each file seems very time consuming.
Including a JavaScript file in another JavaScript file is common in web development.
Because many times we include the JavaScript file at run time on the behalf of some conditions.
So, we can achieve this using JavaScript as well as using jQuery.
Method 1: Use JavaScript to include another JavaScript file
Add the following function in your web page.
function loadScript(url)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
head.appendChild(script);
}
just call the below loadScript function, where you want to include the js file.
loadScript('/js/jquery-1.7.min.js');
Method 2: Use jQuery to include another JavaScript file.
Add jQuery File in your webpage.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
Just call the getScript function functions.
jQuery(document).ready(function(){
$.getScript('/js/jquery-1.7.min.js');
});
How to include a JavaScript file in another JavaScript File
There's a way:
You can create a javascript function that takes the path as a parameter and creates these HTML lines:
<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>
And you'll just have to call this:
loadLib("toolkit/Toolkit");
loadLib("toolkit/Viewable");
loadLib("toolkit/Overlay");
But this is not recommended because the load time will be increased due to the number of HTTP requests.
You should better use something in the server side to put everything in the same file.
No you can't do it. And by the way this is not good idea to load all 50 separate files. Consider compressing them in one single script to improve performance and decrease page load time.
You can setup grunt to watch the folder of the scripts and concat/minify them into a single file, then you just have to include that in your HTML file.
You will need to specify each file for the browser to know what to retrieve, but depending on the IDE you are using, there may be shortcuts for doing this, (Visual Studios allows you to drag and drop script files into the html to add references).
During development, you want to do just as your doing by keeping the files separate for troubleshooting, but in production, as others have commented, its very good practice to minify your code and combine them into one file. That makes it only one call, and can reduce your overhead significantly.
I recommend you to use JSCompress. It will compress all your javascript code into one single javascript file.
import "./angular.min.js"
import "./jquery-3.6.0.min.js"
import "./app.js"
<script type="module" src="js/importJS.js"></script>
I have a basic webpage set up and I would like to use jQuery to send a single variable (user-generated) to a javascript script (external -- well not really, still on the server, just not embedded in the webpage). This script will do a bunch of stuff with the variable and spit out a large array of results. I then need to update my page with the results.
I've done something similar using AJAX to POST stuff to a PHP script, but how can this be done with a JS script?
well ... including your script using the following (as opposed to embedding it) will keep your source neat and clean:
<script src="yourscript.js" type="text/javascript"></script>
The file could contain a function which you then call from outside (ie, the actual page source). As JavaScript is executed on the client-side (ie, the browser), downloading the file is unavoidable (unless you take extreme measures like an apache::mod_js, or rewrite the function in PHP). Best to keep things simple and use the above.
<script type="text/javascript" src="path/javascript_file.js"></script>
I think this is more what Kaustubh means. You do not have to put the actual code blocks into the page, just reference it this way.
When the page loads it will also load the javascript file (clean)
you can then call the functions seamlessly.
I am trying to building a XSS widget and am having issues with Webkit browsers loading the external javascript files which I am appending into the dom. It works as below:
Widget.js appends 3 javascript files into the dom (jquery, data, content)
Jquery.js is standard jquery with a custom namespace
Data.js is a javascript array
Content.js is a set of jQuery instructions to build the widget based off the data in Data.js
In firefox the browser does exactly 100% of the time what im telling it and the widget loads where ever you placed the include javascript on the page.
However in Webkit ie Safari, the browser returns the 3 files in a random order, and executes once returned. This means that when Content.js looks for $ to do jquery magic it fails. Likewise if jQuery is available and it loads the data late if fails due to lack of data.
Suggestions please?
The best way to do this is to just concatenate the files on the server--that way you go from making 3 http requests to one, and the scripts are parsed and executed together.
If you can't do that, do you have to add the script tags by appending them to the dom? If you just added them in HTML, it should work:
<script src="widget.js"></script>
<script src="jquery.js"></script>
<!--etc -->