Time is the most valuable thing we have. Everyone is trying to save it: users close the web page if it is loading too long, developers use ready solutions instead of writing the new code.
Let’s start with the development part. If we talk about any animation on the website, nowadays, JavaScript is the most popular programming language used for it. Just imagine, the number of developers who use it is equal to those, who use Python and PHP together!
With the rising popularity of JavaScript, developers needed the solution letting them develop such dynamic interfaces. Thus, the JavaScript libraries appeared.
JavaScript library – is the library, containing pre-written JavaScript. In fact, it’s the ready-made solution for the needed function, places in one library.
As the JavaScript community is enormous, it creates more and more libraries each day. That’s why sometimes, it’s easier to write the new code instead of searching for the ready-made solution. For example, every 10 days 140 thousands of JavaScript projects appear on GitHub’s repositories. It may seem, that the growth is chaotic, but still these projects are focusing on a few powerful technologies and frameworks. Anyway, a little structuring will be quite useful.
Let’s come back to time. As we know, the less weight the code has, the faster runs the website. So all the developers aim to make the code as short as possible. During our work, we’ve gathered a small collection of the tiniest JavaScript libraries and today we are ready to share it with the community.
Of course, lot’s of listing websites exist already, proposing structured collections. The most popular are Libraries.io, Vanillalist, and Microjs.io. But even they contain thousands of libraries. Therefore, we propose our own list of Lightweight JavaScript Libraries.
Top 10 Micro-sized JavaScript Libraries List
Transparency.js
Size: 0,6 kB
Developed by: Jarno Keskikangas
Transparency is a template engine binding data to DOM.It is connecting values in-place so you don’t need to write separate template sections on your page. Instead, arrange a normal, static html page and start binding some dynamic values on it.
Transparency can bind JavaScript objects to a DOM element using id, class,name attribute and data-bind attribute. It’s possible to provide a custom matcher function. Using Transparency, there is no need in <%=foo%> or {{foo}} assignments or any hand-written loops. Templates are created in plain HTML with plain JavaScript functions
Transparency is matching with IE9+, Chrome, Firefox, iOS, Android and other mobile browsers. Support for IE8 requires jQuery.
Qwery
Size: 0,6 kB
Developed by: Dustin Diaz, Jacob Thornton
It’s the classical selector engine based on querySelectorAll, that allows you to select elements with CSS1, 2, 3 selectors.
We suggest to use Qwery as a selector engine in pair with such DOM modules as Bonzo and Bean.
Pass-Meter
Size: 0,7 kB
Developed by: Chase Hutchins
Pass-Meter is the most simple and light password testing tool we have seen. It weights only 0,7 kB and helps to reject weak passwords like “qwerty” or “12345”. It may be quite useful in developing web apps for large enterprises that have high-security standards. Pass-Meter can be applied both as a standalone module or jQuery plugin
Store.js
Size: 1,1 kB
Developed by: Marcus Westin
The main feature of Store.js is to overcoming the constraint of limiting the cookies by 4093 bytes per domain in order to be supported by every browser.
Store.js writes data into userData, globalStorage, and localStorage wrapper instead of cookies, and creates a cross-browser persistent storage library. Compatible with any browser.
Minivents
Size: 0,2 kB
Developed by: Fabien O’Carroll
Small event system for JavaScript, that enables listening to event, stop listening to event and emit it. Small and useful.
Smoothie Charts
Size: 2,8 kB
Developed by: Joe Walnes and Drew Noakes
Smoothie Charts is a simple library for displaying smooth live timelines. This may be handy while building a fitness app, a social app for fishers or a trader’s website. The library creates streams live and makes it really smooth.
Bowser
Size: 1,4 kB
Developed by: Dustin Diaz
We use this script to check browser version,HTML, CSS and JavaScript features, since jQuery browser was removed in 1.9 version. Works with mobile versions as well.
Another alternative you may like is Modernizr.
Javascript-state-machine
Size: 1,3 kB
Developed by: Jake Gordon
It may be obvious but this script makes a finite state machine. This is the lightest library we’ve found. We consider game development as the best application of this library, but you can use it for any kinds of projects.
Swipe
Size: 1,9 kB
Developed by: Brad Birdsall
This script is perfect for creating an accurate, pixel-to-pixel mobile slider. It has two containers, one function, and just a few styles. Moreover, Swipe library works with any mobile device.
Hyperapp
Size: 1,2 kB
Developed by: Jorge Bucaran
The best solution if you want to develop an upscale browser-based app without learning a new programming language.
Conclusion
As we said at the very beginning, JavaScript libraries save the time of the developer because he can just find a ready-made script and implement it to the project. And at the same time library can save the time of the user, if it’s lightweight and does not overweight a web page or an app.
Of course, this list can be expanded with lots of libraries each and every day. But we hope, you’ve found some handy solutions that will serve you well for your further projects.
Further reading