I am creating a joomla plugin and want to load an array of images after the page has loaded. To do that, I'm currently using mootools.js to call myserver URL, obtain the JSON response and parse the response into javascript variables that represent each image url. It works great, but mootools.js is appropriately named since it is a real heffer in the size department.
Is there a lightweight script out there that will make the ajax call and parse the JSON object? The smaller the better.
I just found a JSON parser, json2.js, at json.org that minifies down to about 3k. You basically do a standard HTTPRequest via AJAX and then pass the response text to the JSON parser to create the JSON object.
Thanks for all the answers and I did track them all down. I couldn't get any of them small enough to compete with this approach, though.
There are quite a few javascript frameworks out there in addition to Mootools that can accomplish what you're looking for. I recommend taking a look at Jquery or Prototype. They're very similar to Mootools and the mini-fied versions may provide the lightweight solution you're looking for:
http://jquery.com/
http://www.prototypejs.org/
If it's lightweight you want, I can suggest Net.js.
http://xkr.us/code/javascript/Net/
However, it doesn't support parsing of JSON, but that is simply one row of code, getting the responseText and calling eval on it:
var json = eval('(' + xhr.responseText + ')');
Downsides:
Timeout is not configurable. However, easy to modify directly in the source.
No support for a request-group with common finish-handler. Each request is individual.
Two suggestions:
Find a library that breaks the functionality you need down into relatively small components. Then download only the components you need. YUI is nicely divided, but even those files can be somewhat larger than necessary. A smaller project that is based on YUI is Fork. Find this library at http://forkjavascript.org
Find the functionality you need in one of the open source libraries and refactor it into your own significantly smaller version.
I don't know what particular version of MooTools you're using, but it doesn't have to be large if you tailor it specifically to your needs. MooTools provides an advanced download page that will allow you to create a custom-built, minified version of the library in a single file. Try it out and see if it suits your needs. If it does, you won't have to go and learn prototype/jquery/etc.
Edit: I just tried downloading MooTools' Request.JSON package with all dependencies. With the YUI compression option, the file size came out to 33.8KB.
Related
We are developing a javascript component to be used in a JSF app and we're using Dojo.
The thing is we only need specific parts of the library and we'd like to only insert into our webapp the files/folders we use to accomplish our goal.
We could do this 'by hand' but in the future we might need to add other functionality from Dojo and then we will not know what resources we need -> I guess by this moment you realised we are no Dojo/js gurus.
Basically we are looking for a way to automate this process. We were thinking of getting a list of the dependencies and then create a small script to 'filter' the files.
Is this possible ? Have anyone tried this before ?
Thanks.
I may be misinterpreting your request, but I think dojo does what you want out of the box. Since the latest versions of dojo follow the Asynchronous Module Definition (AMD) format, you use a global require function to describe what dependencies a specific block of code have, and only those modules are loaded. An example from the sitepen dojo intro:
require(["dojo/dom", "dojo/domReady!"], function(dom){
var greeting = dom.byId("greeting");
greeting.innerHTML += " from Dojo!";
});
If you only want to have to to load a single <script/> tag, you'll want to look into the dojo builder. Using the online build tool You can select what packages you want included into the dojo.js layer and it will bundle everything up into a zip file that includes dojo.js/dojo.js.uncompressed.js which contains dojo core in addition to the modules you selected.
Ok, we did this by doing the following (just in case anyone will need this):
* declare a JSF filter and map it to /js/* (all dojo resources are under /js folder, this may need to be modified to fit your folder structure); this way, all requests for a dojo resource will be filtered.
* in the filter class, get all the requested files: (HttpServletRequest) request).getRequestURI() and write it line by line in a file: now you have all the needed resources.
* parse that file with a script, line by line, and copy the files to another location -> build the folder structure.
* use the created files in your WebContent folder (or wherever you need it), you have a clean library -> you only deploy what you use.
The web is littered with full-blown JavaScript libraries who say they will save your day and make your web development life much easier. You get encouraged to include these “mere 80 kb” libraries that is supposed to be the solution to all your needs, and practically make the web site work by itself. Needless to say, I’m not a big follower of JavaScript libraries,, especially since they almost always include lots of superfluous code, so I thought I’d put together a tiny library with only essential JavaScript functions.
The result of that is EJ – Essential JavaScript.
EJ consists of functions that I use all the time and they make writing JavaScript go faster and the result is being able to do work more efficiently. It is also about having the things you would write again and again for every web site you produce in one neat and tiny file instead, to be able to focus on the new things you need to address
Background
I am new to Node.JS but very experienced with JavaScript and jQuery. I have had no problem installing jQuery via npm install jquery, however, referencing plugins within the code is another challenge.
I have reviewed this similar StackOverflow question, and the solution appears to work but it seems to me that instantiating a "fake" browser window and injecting your jQuery plugin-based functions each time you need the plugin is possibly not the most efficient approach.
The specific plugin that is failing for me linq.js (yes, I am aware that js linq is available via npm but it is not the same as linq.js!).
NOTE: The plugin to which I am referring does not rely on any DOM elements; in my case, it simply runs JSON objects through various data functions. This is why I don't think I need to instantiate a window object.
Question
How do I properly import and use jQuery plugins in a Node.JS application?
You can't do this. JQuery manipulates DOM on the client-side, which means that it has no business on the server-side where NodeJs runs.
You don't.
You don't use jQuery on the server, ever. It has no place there, you don't have a DOM on the server and jQuery itself is a mediocre library to start with.
If you really want to use a "jQuery plugin" in node, you rewrite the plugin as a standalone module without a jQuery dependency.
As an aside, you also shouldn't need linq.js because it's an API you don't need, you already have array methods. Also your coding C# in JavaScript rather then learning JavaScript.
You also have all the array methods (map, filter, reduce, etc) so you simply do not need this. If you really want some of the sugar linq.js offers use underscore instead. (I personally recommend for ES5 over underscore)
Please use ECMAScript correctly rather then emulating C#.
I believe that this question has been asked in a few different forms, but I've read quite a few different responses.
At first, I had a web-application written with mostly jQuery that would make use of servlets to retrieve information from various locations JavaScript could not access (ie. Feeds, images from a server, etc.). Now, however, I've been told to do away with the servlets and application configuration classes so that this project of mine contains only HTML, CSS, and JavaScript/jQuery. Rather than pulling the images off of the server, I need to retrieve them from a local file on the computer. I know that allowing this might seem like terrible design, but it's what I've been asked to do. At any rate, what I really need to do is count the number of image files in a directory and then perhaps compile an array of the filenames themselves. I could do this fine in Java when using the servlets, but without them, I'm not sure how or even if this can be done.
I'm basically trying to use the jQuery Cycle plug-in to cycle through these images like a slideshow. I inject (or $("#div").append()) these images into the div by using a loop based on the number of images present.
So, is there a way I can do this with using JavaScript, HTML, jQuery plug-in, etc? I'd like to avoid using PHP and Java at this point...
You can't just read a directory with JavaScript; however, there appears to be a way to "exploit" how browsers function using http://www.irt.org/articles/js014/. It may not be pretty, but the demo works in the latest Chrome and IE7-9 for me. I'm sure some of the techniques could be updated to use cleaner code if you'd like to improve upon it.
EDIT:
Another technique you could use can be found in Javascript read files in folder
It definitely looks to be a cleaner solution. What I'd recommend is extracting the body contents to inject into a hidden div or using the path for an iframe that you can read from.
Is there is way to compress JavaScript code?
e.g.
function test(){
// some code here
}
after compression it should be
function test(){//some code here}
Also, I need vise versa at the time of editing the code.
You can use a javascript minifier.
YUI Compressor
JS Minifier
jsCompress
There are a number of tools available that can reduce the download size of your javascript, improving first-load performance. The general technique of making syntactic changes to your javascript, without changing its structure, is called minification; and the tools are minifiers. I know Google has an excellent tool, as does Yahoo - there are probably others as well. Check the other responses here for links.
For more resources, try this search:
http://www.bing.com/search?q=javascript+minify
Some other things to keep in mind when optimizing your javascript:
You'll want an option to download non-minified javascript, at least on your test site - debugging minified javascript is a major pain.
Configure your web server to also compress (gzip) your javascript if the client includes the appropriate 'accept' header in their request.
Make sure you configure our cache settings for your javascript so that browsers can use their locally cached version without even sending a server request, if the file is already previously downloaded.
Minified Javascript
http://www.google.com/#hl=en&q=minified+javascript&fp=64df356c6a3f8304
http://www.minifyjavascript.com/
http://developer.yahoo.com/yui/compressor/
Good answers, for jquery you have a compressed version, remove the comments in the header to save some octets.
For your own files, use the YUI compressor, i think it's the best.
I would add if you want to save some time, you can also put all your Javascripts files in one, so you will save some precious time with http request (only for production though).
There is already a compressed version of jQuery for you to use. For js you write yourself any of the other tools mentioned will work, I use YUI myself.
A good way to optimize your site is to include one javascript file for all. An article that explains the process of Javascript Bootstrapping can be found here.
Once you use the available compressors above, you should implement this so that your site run quicker.Hopefully this will help.
Use JSMIn its the best.
Is there any way to truncate jQuery?
I need to use only AJAX related methods in jQuery code.
As you might know the minified version is only 55KB and the uncompressed version is about 110KB.
I think the answer to your question is 'probably not'.
But consider these points:
You don't have to serve it on every page request, sensible HTTP response headers should mean it only needs to be downloaded once per client browser.
If you use the Google CDN for jQuery, your client may not need to download it at all, as there is a very good chance they will already have it cached.
i.e.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
Using gzip compression it brings it down to 19kb. It's going to be cached from there on out, so I'm not sure why it's an issue. That's far less than most decent sized images.
Using a CDN is also an option if you don't mind someone else hosting your code and your issue is just overall bandwidth.
Is there a reason why you need to make it smaller? Coming in at a size of 55kb is rather insignificant nowadays.
If you need it faster, try having it link off of Google, it's always cached on their server. Look at their documentation here.
You can also try downloading your Javascript files asynchronously.
You can go to an older code base if it suits your needs.
1.2.6 packed is 30KB
1.1.4 compressed is 22KB
You can try to build your own jQuery from source. jQuery is actually cut into little modules and you could try to disable some of them when building your own jQuery.
If you only need AJAX, you may not need DOM manipulation, CSS utilities or animations.
Um, why is jQuery too big? How large are your pages?
What you should be doing is forcing the client to cache it so it's only downloaded once. You do this by setting the Expires header often accompanied with versioning the file so you can force a reload if necessary.
You could manually prune the code but that's probably going to be a huge headache.