Hire the author: Obua E
Image source https://www.tutorialrepublic.com/lib/images/jquery-illustration.png
Introduction
jQuery is a lightweight, “write less, do more” JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish and wraps them into methods that you can call with a single line of code.
Throughout this article, I will be demonstrating how to build a jQuery clone using VanillaJS that can be used to manipulate DOM elements.
Glossary
- DOM: DOM stands for Document Object Model. It is the W3C ( World Wide Web Consortium ) Standard.
- It defines a standard for accessing and manipulating HTML and XML documents and The elements of DOM are head, title, body tag, etc.
- UI/UX: This is User Interface/ User Experience
- API: An API in full is an Application Programming Interface.
- It is a set of operations a software component (i.e., a system, a sub-system, class, or a function) provides to its clients
- HTML: HTML in full is Hypertext Markup Language, a code that is used to structure a web page and its content
- XML: XML in full is an extensible markup language, a document formatting language used for some World Wide Web pages
Step by step procedure
Prerequisite:
A web browser preferable Chrome, Firefox, Safari, or Edge
Setup Environment
We shall be building a simple image gallery slider to use the custom jQuery clone, We shall create custom functions to perform operations to selected elements on the DOM.
The gist code block contains a well-documented self-explanatory source code as seen below.
Step 1: Create a project folder with a relevant name and add all necessary files as listed below.
- css. Inside this folder, create style.css which will have our basic stylings
- images. Inside this folder, we shall have images for the project
- js. Inside this folder, create a main.js file that demonstrates the usage of the custom jQuery clone.
- Index.html file in the root folder
- jQueryClone.js file in the root folder. This file will have our jQuery functions to manipulate the DOM.
Step 2: Open the style.css file and add the following code.
This is the basic CSS that we shall be using in this project, the different operations performed by the CSS are explained in the documentation
Step 3: Add some images to the images folders.
Add relevant custom images of your choice here and link them in the index.html file.
Step 4: Open the main.js file and add the following code below.
The code block below demonstrates how the custom $ function is used to select and manipulate the DOM elements.
The operations performed is well documented in the code as seen below.
Step 5: Open index.html and add in this boilerplate code below in the gist code block.
Below is all the basic HTML that we need, It’s basically having the slider HTML code block and another code block for demonstrating custom jQuery functions as commented in the code block below.
Step 6: Open the jQueryClone.js file and add the attached code below in the gist code block
This is where we shall have the core definition and implementation of the custom jQuery, it shall explain how all the jQuery and custom functions/ methods are created.
It’s well explained as it can be seen from the documented code below.
Step 7: Open index.html with a live server or any of the mentioned browsers in the prerequisites above.
There you go, you have successfully built a custom jQuery from scratch using VanillaJS.
Steps to publish the library to NPM
- First, create a package.json file if it does not exist within your root directory.
Run command npm init -y on the terminal in the root directory. This will generate a boilerplate package.json file and fill it with basic information about the project, the values however can be edited based on your needs.
The field’s name and version are required. But it’s very important to fill in other fields as well for the clarity of the library.
The output would look like this after modifying the fields to suit the needs.
The main field contains the starting js file where we export our module. In this case, the main field value shall be jQueryClone.js
2. Let’s now update our jQueryClone.js file and export our variable(s) to ready it for publishing by adding the content below to the bottom of the file.
3. Create a .npmignore file in the root directory to help ignore unwanted files during publishing, add in the following content as below.
4. If you don’t have an NPM user you need to sign up here and make sure you verify your email then follow the instructions below.
5. We also want to access the module from a script tag, we’ll use the simple solution UNPKG which gets the file from npmjs for us. This is what we put in the src attribute. by using the format below, you can access the library from npm in your script tag
unpkg.com/:package@:version/:file, our library would be fetched like this
https://unpkg.com/customised-jquery-obuae@1.2.0/jQueryClone.js
Check out to publish-to-npm branch on the Github repo to get the full source code or follow this link to access it on the repo.
Learning Tool
To best learn about jQuery, I recommend reading documentation and relevant blog posts
- https://api.jquery.com. This provides jQuery API documentation including all the function signatures and relevant usage
- .https://developer.mozilla.org/en-US/docs/Web/JavaScript. This has all the JavaScript API with all the functions of JavaScript and its usages.
Learning Strategy
I had to first learn about jQuery basic and advanced API and function usage before thinking of building the clone using VanillaJS.
Talking about VanillaJS, I had to first get familiar with basic concepts and basic API including useful functions and classes built in VanillaJS before writing the jQuery clone.
This made it easier to build this feature to work like the very known jQuery/$ global variable
By searching the keywords jquery official documentation and vanilla js official documentation, I was able to get the API docs for jQuery and VanillaJS respectively
Am now able to build my own JavaScript library with the help of the skill sets from this beautiful article.
Reflective Analysis
As a result of using jQuery, the benefits can be best seen when manipulating dynamic DOM elements on the web page without having to force refresh pages already rendered. This plays a very big role in boosting the UI/UX experience.
Conclusion
I believe this article will help boost your creativity for building JavaScript Libraries both for your own and for public consumption by developers around the globe.
jQuery can also be used by also famous JavaScript Libraries like ReactJS, VueJS, and many other libraries.
Here is the link to the Github repository to get started.
Nice Learning and Happy Coding.