How do I properly import jQuery plugins to Node.JS? - javascript

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#.

Related

Is there any way to delete useless functions in JS libraries?

I'm building a project in javascript, using paper.js in some features.
Most of my project is built in vanilla Javascript, just some minimum but important features are built with paper.js
The problem is that the library (.min library) is 200kb.
The normal library is 300kb, I was wondering if there is an automatic way to see which functions are being used in the main paper.js library, in order to delete the useless functions.
If there is no program or automatic way to do this, maybe some advice of how to do it manually, or which tools you recommend for me and my team in order to delete useless functions, then minify the file and run it smaller.
Thank you all guys, I did not added any specific code because I want this anwser to be global.
Greetings
You have to do it manually but it's not an easy (and certainly not quick) process. You'll have to find which functions you're using and then find whatever classes or functions those functions reference. You would probably have an easier time creating a new script then copy/pasting what you're using (and any referenced content) then running it with your script, log errors, and repeat.
When you're done there's many minify libraries and services online you can use to minify the new script.
I used the paper-core version and then minified.
I saved 140kb by doing this.
There's still no way to see useless functions in this library

Injecting PolyFill into a React Component

So I hear using jQuery is an anti-pattern in react. So how then are people injecting things like polyfills?
For example here for Object.assign(), Mozilla provides a very simple polyfill script that I'd like to try out. (yes I know there are things like babel-polyfill, etc. I just want to try injection js period, I don't need to get fancy here yet)
I assume you'd inject this in the componentDidMount(). But if not using jQuery are people simply using plain JS and the document object?

Guidance on Node.js module

I am currently started learning with node js, as I am working With Intel WebRTC SDK. If I want to make some modifications or add feature to the existing library, what do I have to do? Do I need to create modules or directly change in the files? If there is any other solution, please guide me. I am currently changing the codes of library itself, which I need to do again for a new version of their library. Please guide me through it.
It really depends upon what kind of changes you need to make and for you to get specific guidance, you will have to show the exact types of modifications you're trying to make (before/after code changes).
Additions to the library can likely be done without modifying the library itself by just adding new methods to the module or just making new methods available in your own module.
Replacement of existing methods with your own version can also likely be done without actually modifying the source by just replacing a given method with a reference to a new implementation in your own source file.
Fixing of bugs should likely be done via some sort of source control system (like GitHub) so that you can more easily apply patches you've already done to a new version of the source code.
Wholesale changing of existing code to do something different or work differently should probably be completely avoided because (as you have discovered), it creates a merging nightmare when you want to take a newer version of the original code. Instead, write a new function that does what you want and leave the current function in place. Then, your new function can live on, even after upgrading to a new version.

Can Q.js be used without node.js and require?

I am trying to use the latest q.js to add promises to my ajax calls. I don't use node.js in any way shape or form. I downloaded the latest from https://github.com/kriskowal/q and include just the q.js. In my console I see in some places:
ReferenceError: require is not defined
I don't know if this is a deal breaker or not, but I don't use requirejs either. I am playing around with a single page app, and while I use jquery for ajax, I plan to remove that dependency for either my own simple implementation or another smaller library. I want to use q.js, and also use bootstrap.js and will possibly use flatiron-director, that's about it. So I don't use npm, or any of that other stuff since my app is so simple. With only a couple JS files, I don't see any reason to add that complexity.
So is that error a problem and q.js won't work without require.js (or node.js)? I thought I read it's stand alone, but when I see errors like this and it seems as if it depends on some other JS libraries it has me doubting if I can use it or not.
The V2 branch of this project uses require.js. The V1 branch does not use require.js.
https://github.com/kriskowal/q/tree/v1

How to work with jQuery and remain agnostic to its version?

We're developing a snippet that is embedded in 3rd party sites, and uses jQuery.
The snippet checks if the site already has jQuery loaded. If so, it uses that library, otherwise it loads our own copy (currently jQuery 1.4.4, we're migrating to the latest soon).
There are breaking changes in jQuery. One such change, for example is the change in semantics of attr(), and introduction of prop().
Are there some guidelines to working with jQuery in a way that will be as backward compatible as possible? Even when we migrate to latest, we still want to use an existing jQuery library if it exists instead of loading a new copy, to save load time and resources.
There are a few solutions to your problem
1. Use a subset of jQuery
Find the subset of jQuery that works upto a reasonable amount back and only use that subset.
Note that I recommend not using .attr at all, ever. since a) it's a minefield and b) it has different behaviour on different versions. You may find the sensible subset of jQuery is quite small. Good luck finding it.
2. Just use the latest version
Use the latest version of jQuery and tell your library users that they need to upgrade.
Seriously everyone should be using the latest version anyway, force them to upgrade.
3. Don't use jQuery
Don't have a dependency on jQuery.
Seriously, the less dependencies you have the better your code is
I prefer 3. as an optimum solution
Take a look at these guidelines:
http://www.davidtong.me/upgrading-jquery-from-1-4-x-to-1-6-1/
it's not the latest version available of jQuery, but it's enough hot.
Version 1.6.4 is a minor release
From version 1.6.4 to 1.7.x some new features and fixes were introduced but nothing seems is breaking code written for jQuery 1.6 version
This is one of my pet peeves with jQuery even though I love what it(jQuery) enables overall.
I wish the jQuery team would have addressed this early in development and created a version initialization method so you could "request" a specific version when building your library. Ideally, you'd have:
(function($, undefined) {
// your code
}(jQuery.noConflict(false, "1.4.4")));
Where jQuery.noConflict would accept a "key" for which API version you would like to use for this library. Each jQuery loaded would check automatically if a previous jQuery was loaded and create a new reference entry for it in an associative array. (check for jQuery/$, request jQuery.jquery to get version, request jQuery.loadedVersions to obtain the previous associations, and build a master list of all loaded APIs) If no valid library was found, it could default to the latest available version or just kick out an error.
Of course, this doesn't help you (unless you want to modify a subset of jQuery APIs and keep them up to date yourself... /yuck) but short of that, it's a bit of a crap shoot.
noConflict will return the jQuery API if $ is not the current jQuery API (thus, not overwriting the $) but it doesn't really handle API conflicts and you'll only ever get the last jQuery API loaded. It would simply ignore the first loaded API (because it's not === to the current code scope jQuery object) and return itself.

Categories

Resources