Custom building jQuery - javascript

I'm using jQuery for a mobile app, but I don't use all or even half of its modules so I'm looking to nix those and reduce the size a bit. (No, I don't want to use Zepto or other libraries for some reasons).
There was one: projects.jga.me/jquery-builder/ but its not maintained anymore.
jQuery Uncompressed: http://pastebin.com/CwUT9U8p
Wondering which functions/modules I can safely remove, any pointers would help.

you can use grunt to build the jquery modules you want to use into a custom version of jquery, it's documented on the jquery git repo here
It's worth noting though that jquery uses a lot of internal code calls, so even a trimmed down version wont be as small as you might like (possibliy not even as small as a minified gzip version of the full lib)
If you are only wanting sizzle and getJson have you though of using the stand alone sizzle lib and a lightweight json ajax wrapper? there are microlibs for ajax/json here

Related

What happens if i don't use jquery CDN slim package of bootstrap v4

What happens if I don't use jQuery slim package that comes with Bootstrap v4 and instead of that I use the jQuery host CDN available on Jquery site. I google it and I know there is a difference between these two as the slim version does not have various functions like ajax or animations. Does it effect anything on my website if I remove the slim jQuery package that comes with Bootstrap v4.
I am just a beginner not a pro like others but I want to add some features on a page with Ajax. I spent hours online and try many codes but nothing works. In last I delete one by one script of Bootstrap than I found there is something with jQuery CDN link. When I used google host jQuery CDN the code works but not with the slim Bootstrap jQuery.
Does it effect anything on my website if I remove the slim jQuery package that comes with Bootstrap v4?
So long as you have an up-to-date version of jQuery, then nothing will be affected from the point of view of bootstrap. The slim version that Bootstrap comes with simply provides functionality for the various features of Bootstrap that rely on jQuery to work properly like collapsible navbars, alerts, etc.
You can absolutely use a separate jQuery, and honestly probably should. jQuery is a fantastic library that was designed to make JS cross-browser compatible and making use of it drastically improves your code.
Also, I would recommend not using a CDN if possible. CDNs are great for speedy development but if your website is going to go into production and be used for any length of time, it's better to have dependencies like Bootstrap and jQuery locally hosted because CDNs can and will go down for any number of reasons (server shutdown, server migration, DDoS, perhaps the person accessing your website's internet access is limited and won't allow them to make GET requests to that CDN, etc.) and if any of those reasons occur, you won't be alerted. Your website will just break.
Edit: So I do want to make an update. Nowadays it seems like using a CDN in production has become more common thanks to the reliability of CDNs and the benefits of global CDN networks having nodes (likely) closer to your customer being comparatively quicker to serve the content than requests against your webserver.
The issue with the slim version of jQuery is losing all AJAX functionality.
I have replaced the default jQuery slim reference from Bootstrap 4 with the normal version:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
Found here https://code.jquery.com/
Slim version(jquery-3.2.1.slim.js) of bootstrap's Jquery is actually a lighter version 3.2.1/jquery.js
In this slim version ajax related code has been removed so you have no ajax support with this .slim.js
Just check the first line of Jquery-3.2.1.slim.js
jQuery JavaScript Library v3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector
This is jQuery JavaScript Library v3.2.1 without -ajax,-ajax/jsonp.....-effects/animatedSelector
So 3.2.1/jquery.js is the superset of jquery-3.2.1.slim.js
So jquery.js is recommended if you are using any of removed methods(in slim.js) in your project otherwise you can use jquery-3.2.1.slim.js directly.

What is slim in file.slim.js

Excuse my ignorance but I just installed jQuery using npm and between the jQuery files there's a file called jquery.slim.js, what is slim? I know the min stands for minified but slim is new to me!.
btw I'm pretty sure slim is not like min because there's another file called jquery.slim.min.js and obviously it's lighter than the normal slim file.
Also the slim file contains the jQuery 3 beta. (That's what the comments in the code say)
Again sorry for the stupid question but I got no clue.
UPDATE
I'm using require to include the files, would the require include this file without my knowledge? or not?
I don't know if .slim.js is a standard name extension for javascript library, but for jQuery, it is a build without some extensions, just check the beginning of the file:
-ajax,-ajax/jsonp,-ajax/load,-ajax/parseJSON,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector,-deprecated
Typically you have no ajax support (jQuery.ajax is not defined), no effects, and the deprecated method are removed.
Concerning requireJS, as far as I know if you require jquery, the only file "included" will be jquery.js, so you would have to explicitely require jquery.slim in order to get jquery.slim.js file included, which is not what you want.
THE SLIM VERSION – CONS
Possible compatibility issues
Even though jQuery Slim 3.0 is an ‘official’ release, its relative newness ensures that plugin and framework vendors have not had particularly much time to adapt their products to the feature set. If your company is currently going through a rocky transition adapting its products to jQuery 3.0, adding the extra grief caused by a deployment of the slim version is unlikely to be worth it. Problems caused by missing or incomplete implementations of support libraries tend to be among the most difficult to debug. Avoiding them is recommended to experienced and novice developers.
Deploying jQuery Slim saves you the princely sum of 6KB: many applications waste more than that on in-line comments in the markup. Of course, compile and parse time is also reduced – but does that really matter in a time when an octacore smartphone can be bought for fewer than 200 euros?
Original Source
it is a jquery with less features,
features that i needed so i gave up.
your mileage may vary, but fairly,
.slim.min was only 6kB less than just .min.

jQuery and Windows 8 JavaScript Metro Style Apps

Can jQuery be used in Windows 8 Metro-style apps developed using the JavaScript API? I'm looking at the samples, and there's a lot of standard DOM manipulation like document.getElementById, addEventListener, etc. I'd like to use jQuery for productivity.
The $ is not magic. jQuery is just a javascript library. It should run fine.
The only thing that might not work are cssHooks which won't take into account any 'quirks' of their environment.
So yes, it will work, if you trust Microsoft to produce an environment that follows the HTML/CSS/JS specifications.
Do you feel lucky?
Yes, it works, as will any JavaScript library. I verified it on one of the tablets they gave out at the BUILD conference.
However, do not expect to use a CDN to load in the script. You have to download it, add it to the project, and reference it locally.
tl;dr : you can use jQuery 1.7+, but it's not (yet?) fully integrated when markup modification is involved.
Quote from the Dev Center (msdn)
Using jQuery
You can use jQuery in your Windows Store app using JavaScript, but only versions 1.7 and later. We recommend always using the latest version.
That means that it will work, but you will encounter some non-standard behaviors as listed in the HTML and DOM API changes list (msdn)
There are exceptions mentioned when setting the innerHtml property (among others : Making HTML safer) if there is unsafe markup, but this is non-blocking and the simple fact of loading the jQuery library (1.8.2) will trigger a few.
As mentioned before, you do need to use a local copy of the library (no CDN).
You can use any JS library. I suspect that methods like WinJS.xhr (aka '$.ajax') where written so that WinJS doesnt have a dependency on jQuery.
It should run fine. jQuery is just a library. The $('#someid') will internally call the document.getElementById You can use it just as if you can use the javascript code you write yourself...
JQuery should work fine but bear in mind there is some built in functionality for doing this kind of thing, in the case of your example:
WinJS.Utilities.query("#someId li")
.listen("click", function (result) {
Query Collection Documentation
Don't use any windows libraries like WinJS. Why would you want to lock yourself and be dependent on proprietary code? Stick with the usual stuff, i.e. HTML, CSS, JS(JQuery or otherwise). It will only make your future support/dev far more predictable ...
As with all third party JavaScript libraries there are a couple of things you should keep in mind.
Always try to include the .js sourcefile in your project when possible. Calling out to a CDN or external hosted location will flag you for some security checks you wouldn't normally have to go through.
I have used a couple of jQuery versions in coding my own apps. Some of them broke so keep in mind there is still no guarantee. Other libraries, like SoundJS, I used older versions that I know do work.
If you are looking for some examples of third party libraries I have some posts on Knockout and Upshot here:
http://blogs.msdn.com/b/davedev/archive/2012/05/02/connecting-to-wcf-ria-services-in-a-windows-8-metro-style-app-using-upshot-js-and-kockout-js.aspx
I have also written a free Windows Store Gaming Kit that uses third party libraries you can grab the free source for that here: http://win8gamekit.codeplex.com
Actually you can download it through Visual Studio. If you download NuGet Package Manager.
TOOLS->Add Packages & Extensions
Search the left online packages for NuGet Package Manager and install.
Then when in a project that you want jQuery, right click on your references and add a NuGet package, and search jQuery. That's what I use.

how do i avoid including jquery twice?

i have a service i'm building, which will be included as JS on client web pages. optimally, i want to build the service using jquery.
the case may arise, where the page already has JQ included.
how do i avoid including JQ twice in the page? how do i make sure i still have the desired JQ functionality, even if the page has already included an older version of JQ?
is the only solution simply abandoning JQ and going with hand-coded script?
Check for the existence of jQuery and match the version you need against jQuery.fn.jquery.
from the linkedin jquery group:
Ever want to use the latest jQuery, but old code or components leaves you with an older version? Well this standalone version can be included anywhere on the page and will take a custom name space of jQuery14, and will not affect jQuery or $ in any way. Also, easy way to integrate among other frameworks.
http://www.matthewdunham.com/jquery-1.4.2.min.standalone.js

Is jQuery compatible with ExtJS?

I believe Ext.js was using jQuery, but I'm not sure. Does anyone know if there is full compatibility with jQuery and Ext.js?
Ext.js is completely independent of jQuery and as such does not rely on jQuery in any way. Don't know what you mean by 'full compatibility' but you can use both on the same page as they don't interfere with each other.
As Ext.js doesn't use the $-function, you don't even have to do any special trickery to get them to work together, as is the case with using Prototype with jQuery, for example.
You should be able to find some answers on the jquery site where it talks about using jQuery with other libraries.
Hope this helps some.
For ExtJS 3 for example, you need to follow a given loading order for these libraries AND load the ExtJS jQuery adapter.
See http://www.extjs.com/learn/Ext_Getting_Started for details :
jQuery (1.1+) jquery.js
jquery-plugins.js // required jQuery plugins
ext-jquery-adapter.js
ext-all.js (or your choice of files)
I think jQuery (core) and ExtJS are very compatible. I prefer to start new projects using both; in fact, flot.js demands jQuery - and flot.js is very nice - so in nearly every project I use both jQuery and ExtJS. Go for it!
Though ExtJS has made strides in their DOM manipulation and traversal utilities (core), nothing beats the elegance of jQuery (core). However, I prefer ExtJS (UI) to jQuery UI; I find it is much more homogeneous (and capable) than jQuery UI.
Upto Extjs 3.XX, adapters were configurable.
But Sencha (Ext4) onwards, there is no separate adapters, instead we have ExtCore.
No more other libraries
ExtJS used to be built on top of other libraries. With version 2 they had their own but still offered the possibility to use other libs. But not anymore with version 3. ExtJS core code is very very mature, very efficient and VERY tidy. If you ask me, their code is written a lot better than jQuery's but that's subjective.
Combine with jQuery with no tricks
Anyway. If you intend to use ExtJS but would like to use other libs as well you can still do that. But if you think that you'd rather use jQuery with ExtJS I suggest you don't do that, because your code will have many hacks to overcome differences. I would rather use just ExtJS. You'll like it and probably won't want to switch back anymore.

Categories