(Updated February 2021 for PikaJS 1.2)
Introducing PikaJS: a jQuery-like JavaScript library that simplifies the client-side scripting of HTML.
I had been using jQuery and PrototypeJS, and I needed to ditch PrototypeJS at long last.
My colleague Michael Franzl said, “Hey! Check out this Balalaika thing!”
So I did.
Unfortunately, Balalaika doesn’t give you many methods to do cool stuff. That’s left as an exercise for the programmer…
So, I decided to make my own jQuery, and PikaJS is the result!
What is PikaJS?
PikaJS is like jQuery or PrototypeJS, only smaller, lighter, and more efficient.
How do you say “Pika”?
However you want.
I say PEEK-ah, which is a Slovene word meaning “dot” or “period”. This is appropriate since PikaJS is very small.
The name has a double-meaning since a pika (PIKE-uh) is a small lagomorph related to rabbits. Pikas are small, cute, and furry, much like PikaJS.
Therefore, you can say it either way – or make up your own pronunciation.
PHEW! Now that that‘s out of the way…
Why PikaJS?
As I mentioned above, my friend introduced me to Balalaika. Check this out:
https://github.com/finom/balalaika
BOOYAH! That’s pretty sassy. Well done, sir.
PikaJS is based on Balalaika, which itself is simply a very, very small “jQuery” that’s only 986 bytes in size. When you look at its source code, first you weep. Then, after awhile, you realize that it’s actually quite simple. It’s just nicely optimized.
Modern browsers (including IE10 and up) will work just fine with Balalaika. At this point, browsers have all the functions they need to do fancy jQuery-like stuff without all kinds of hacks. So, Balalaika simply leverages this built-in functionality in a nice, small, jQuery-like “wrapper”.
BUT, the only functions included in Balalaika are:
$(expr) -> selected elements
.is()
.on()
.off()
.extend()
PikaJS therefore starts with Balalaika and builds all kinds of stuff on top of it.
For example, AJAX requests of all kinds should be easy to do without digging into XMLHttpRequest.
Now, I realize that we’re in a brave new world where everything is “Web 4.0 Push Notification Mobile Cloud Blockchain Fabulous™”, but back here in the real world, we still need to send and receive data from a server with JavaScript from a simple web page.
Yeah, THAT real world.
Anyhoo, the idea was to include the best of jQuery and the best of PrototypeJS (yes, it exists) – but in a much smaller package.
- PrototypeJS 1.7.3 + Script.aculo.us = 120 kB minified
- jQuery 3.5.1 = 87.3 kB
- PikaJS = 10.6 kB
That’s just minified, not gzipped. PikaJS is only 4.4kB gzipped!
Okay, but how compatible is PikaJS?
Pika will work with all modern browsers, including IE10+, and the majority of mobile browsers. It is being used on Sott.net – which gets millions of pageviews a month – with no complaints. So, I guess that means it works!
PikaJS also includes a few things to improve compatibility with various browsers, but not TOO much. For the most part, I just made sure that what I used wasn’t cutting edge, but instead widely supported and generally fast and small.
IE < 10 is not supported, but this shouldn’t be a big deal. IE 8 and IE 9 are effectively dead, and IE 11 accounts for less than 1% of global browser market share as of February 2021. Note also that jQuery 3.x no longer supports ancient versions of IE out of the box, either.
End users who have IE8 or IE9 and cannot upgrade to an actual, real web browser may wish to simply dowse their puters in gasoline and set them on fire. 😉
Or, you can include a shim, shiv, polyfill, shimmy, shaky, or chimichanga – whichever you prefer.
Okay, but how did you make it so small?
It’s quite simple, actually.
Dig into the source for jQuery or Prototype, and you’ll find that both do a lot of what I call “fluffy stuff”.
They tend to compensate for poor programming, fix things for you, and generally they extend the living poop out of everything.
This is all great for ease of use, but it also results in bloat.
PikaJS takes a very different approach: You’re a programmer. Learn how to program! 😱
PikaJS does not hold your hand. It’s not forgiving. If what you write doesn’t work, you need to figure out why.
For example, Pika doesn’t clean up after you. If you attach an event listener, it’s up to you to remove it before you remove the element the listener is attached to from the DOM. jQuery and Prototype do this for you, but PikaJS does not.
Most of the time, it isn’t needed if you pay attention to how you code – and use delegated event listeners.
In recent years, there is an air of, “I want it to just work”. That’s nice and all, but it doesn’t result in efficient, fast code. It results in bloated, slow code. Not everyone is running your JS on a Core i7 in the latest browser!
PikaJS is small, furry, and fast, but it’s not very smart – much like a lagomorph. So, you have to be the smart one when you use it. And don’t forget to feed it.
Wow, that sounds awful!
It’s just a “new” way of working. Most of the functionality you’ve come to expect from jQuery exists already in PikaJS, and it works. There is also a TON of functionality in other libraries that either you don’t use, or you don’t need!
There are benefits to doing things this way. When your library isn’t extending every object out the wazoo, memory usage drops.
When it doesn’t hold your hand, you are forced to code better, to think about performance and stability, and to think about exactly what your event listeners are doing and how they are working. You learn more, and you write better code.
Historically, programmers tend to use some framework that is, “the latest thing”. They never actually bother to look at source code and see if they can improve upon what has been done. Need some new functionality? There’s a gem/library/node/photon for that!
I don’t use any code without knowing exactly what it’s doing. This is unusual, I admit, but PikaJS is the result.
Well, but, but… Okay, so what does PikaJS give me?
First of all, note carefully in the documentation which methods are chainable, and which aren’t. The most normally-chained methods ARE chainable.
Also, note that in some cases, you must use .each to iterate over a series of selected elements. But again, most often-used methods like .show, .hide, .css, .addClass, and .removeClass automatically iterate over selectors that return multiple results from the DOM tree.
This was a simple question of minimizing code and complexity. Also, methods involving modifying content in the DOM generally require .each so that you’re sure that you’re doing what you think you’re doing.
In those cases where you do have to use .each, you will find it isn’t really that inconvenient!
So how do I use it?
First, include the minifed pika-min.js in the head of your page.
Be sure to also remove jQuery, PrototypeJS, or whatever else you’re using that commandeers window.$, or you’ll be in big trouble!
And then, get crackin’!!
All the rest
I released PikaJS under the MIT license, just like Balalaika. You’re free to use it for whatever project you want.
For docs to see exactly how to use PikaJS, see the PikaJS GitHub page.
The following is just a quick list of all the main methods available to you:
$.extend .next .is .first .on .last ._on .attr .off .val .onChange .addClass .ajax .removeClass .formData .show .select .hide .parent .visible .remove .css .html .getDimensions .update .getHeight .replace .getWidth .append .each .prepend .blank .before .focus .after .data .up .fade .down .slideUp .previous .scrollTo
Those all look rather familiar, eh?
There are also quite a few other “internal” convenience methods, such as $.T and $.JS.
$.T is like Toggle.display(‘#blah’) in PrototypeJS – VERY handy!
$.JS allows you to use the “document head trick” to insert, execute, and immediately remove chunks of JavaScript code.
Like I said, see the docs for further details, including information on selectors and all that jazz.
I tried to make the documentation as thorough as possible. Plus, if you’re familiar with jQuery at all, using PikaJS should be a breeze!
Have fun!
Trackbacks/Pingbacks