How to use jQuery on Node

Oyetoke Tobi Emmanuel
Jan 24 · 2 min read

Integrating jQuery into Node sounds cool, right? 😎 How the hell do we implement it? 🤔

I know that almost everyone reading this article must have come across and written jQuery. It's the most popular JavaScript library on earth, yea earth. It just makes your life easier, faster and less code to do cool stuff.

However, no matter how good a library/framework is, there will always be something better that will overshadow its reign😞.

jQuery has problems that these libraries/frameworks fixed. jQuery current size is (255kb) which is quite large compared to most latest libraries. This will eventually be an issue once your project becomes large. Read more on jQuery here.

Due to the speed that web development is moving at, we all need to start using less codes with optimal logic in order to reduce file size and make web page load faster.

Then Node, ES6/7/8, Babel all came out which helps us minimize and optimize our web app assets and so on.

But we can’t dispute the fact that jQuery really makes life easier with plugins feature. jQuery has tons of plugins littered around the web/github/gitlab and this makes us write less code and helps a lot in sticking with DRY.

So let’s assume you have this web app that is built with jQuery and you are told to rewrite just the functional/reactive part/page to react/vue.

This should be easy, right? All you need is to convert everything to Component/Template. But wait even though everything will be a component/template, there are some stuff you can just pull off with jQuery since the page will still have jQuery.

So enough story, let’s see how you can use jQuery in Node(Vue/React):

npm install jquery -S

After installing it, how do we import and use it?

import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();

Shikena! That’s all. 🎉 You can now use the legendary $(selector) . Very cool.

And in case you are not using Vue/React on Node but on Browser, then all you need is to do is, be as free as usual and use $(selector) anywhere as long jQuery is script is added.

Now with this, you can use any jQuery plugins on earth. All you need to do is install and import it as seen below:

npm install jquery-toast-plugin -S

Usage:

import $ from 'jquery';
import 'jquery-toast-plugin/dist/jquery.toast.min' # path to the plugin
window.jQuery = window.$ = $;
$.toast({
heading: 'Success',
text: 'Success',
showHideTransition: 'slide',
icon: 'success',
loaderBg: '#19c520',
position: 'top-right'
});

That’s all. Never thought this could be more easier than this.

Thanks for reading this, clap and share.

Facebook Developer Circles Lagos

Oyetoke Tobi Emmanuel

Written by

Software Engineer. Python and JavaScript Developer. Technical Writer. https://citguru.github.io. Subscribe to my channel: http://bit.ly/oyetoketoby

Facebook Developer Circles Lagos

A Tech Community united in knowledge sharing. Visit fb.com/groups/devclagos

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade