Let’s get started by introducing what a library is, in JavaScript. Any program or functions you write to perform actions in your WebApp, for instance, is bundled up into a module that can be easily reused anywhere, instead of just adding the code directly to the scripts, just for your app’s use.
Goals
- No dependencies (fully independent code and functions)
- Efficient (minimal size and processing load)
- Reusable and easy to add to any project
Templates and Functions
JavaScript is powerful language by itself. With its DOM (Document Object Model) Manipulation capabilities, you can achieve almost all tasks your library needs to do with just vanillaJS functions.
Here are a few things you can do to your HTML and CSS using JavaScript:
// Add HTML code to your pagethis.template = '<div id="id">' + ' <div class="class"></div>';document.body.innerHTML += this.template;
// Change element stylingdocument.getElementById("id").style.display = "none";
// Modify element attributesdocument.getElementById("id").src = "";
// Add listeners to elementsdocument.getElementById("id").addEventListener("click", this.function);
Basic Structure
So generally, libraries are .js files along with .css files (if you need to add a lot of custom styling). All the functions used in the library, along with variables, even HTML templates to be appended, are wrapped up into a class in the .js file. I previously wrote an article on JavaScript classes which could probably help you out there.
// Previewer.js// LIBRARY CLASSfunction Previewer() {// Add all your code here}
And then to initialize the module, add var previewer = new Previewer; to your WebApp’s script, once .js and .css files have been included in your project.
Conclusion
Now you know the structure, the power of pure JavaScript and how it can be bundled up into a library. Let’s look at how the basic goals were achieved in the above hypothetical library we just built.
- Using vanillaJS (basically pure Javascript) eliminates the need for any dependencies, making the code, functions independent
- Optimization for efficiency is automatically done when you have minimal or no dependencies, and the code is as compact as possible
- Using classes and functions to wrap up code is basic modularity
Previewer: Writing my first JavaScript library
A image previewer for the web, which uses a Picasa inspired UI and is super light-weight.
Getting rid of dependencies
Initially, I wrote the code heavily relying on jQuery selectors and functions cause I found them simplifying my code greatly and also making it easy for me to work on. But the coders in Reddit made me realize this isn’t a good practice at all as it had dependencies which made it less efficient; and so I had to take the jQuery off.
This isn’t much work when you’re dealing with single elements selected and modifying attributes or styling. The problem is when you use selectors in vanillaJS for multiple elements.
// jQuery function that selects all elements of this class and assigns them the click listener$(".preview-image").click(function() {// function code here});
// Pure JavaScript equivalent of above codevar images = document.querySelectorAll(".preview-image"); for(i = 0; i < images.length; i++) {(function(i){images[i].addEventListener('click', function () {// function code here});})(i)}
This is because JavaScript returns an array of objects when it queries for elements and so the click event listener have to be added individually for each one.
Future Development
All libraries have room for improvement and addition of features. Being an active contributor in the Open Source, the first thing to do is make the code as easy as possible for other developers to understand and contribute. Descriptive comments throughout the code and a good README.md would greatly help.
Another thing would be leaving it to the community to assess and suggest. Through just the community’s ideas I’ve added many features such as keyboard based control for the library (detailed below) and also accepted pull requests from developers who wanted to help.
document.onkeydown = keyCtrl; // Maps all keyboard actionsfunction keyCtrl(e) {if (e.keyCode == '27') {// Add function code here
// 27 here means Esc key, similarly other conditions can be used // for other functions and different keys
Conclusion (Last one I swear)
This would be good enough to get you started on building libraries and maybe frameworks too. Since the coding community comes with stuff, like every day, its hard to keep track, so, for further reading I’d suggest you checkout npm packages. Right now rather than adding the files manually, you just give the task of importing JS modules to npm.
Checkout the project I mentioned, Previewer:
ajayns/previewer_A super light-weight JavaScript image previewer_github.com
I hoped you enjoyed this developer tutorial. If you did, please be sure to recommend, follow, and share this article.