PikaJS

<img src="https://pikajs.com/img/pika_250.png" title="PikaJS" alt="PikaJS" align="right">

What is PikaJS?

PikaJS is like jQuery or PrototypeJS, only smaller, lighter, and more efficient.

Jump down to the How To!

OR

⇒ Try the PikaJS Demo!

But wait - There's more!

PikaJS v3 also comes with 5 handy plugins to help you create new user experiences quickly:

• Animate - animate darn near anything
• Hotkeys - bind any keystroke to any function
• Sortable - drag-n-drop sorting made easy
• DatePicker - clean, simple, and uniform datepicker
• MultiSelect - powerful SELECT:multiple lists

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?

I had been using jQuery and PrototypeJS, and I needed to ditch PrototypeJS at long last. My colleague said, "Hey! Check out this Balalaika thing!" So I did.

BOOYAH! That's pretty sassy. Well done, sir.

PikaJS evolved from 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.

At this point, browsers have all the functions they need to do fancy jQuery-like stuff without all kinds of hacks. So, PikaJS simply leverages this built-in functionality in a nice, small, jQuery-like "wrapper".

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.7.1 = 85.4 kB

PikaJS v3.2.4 = 12.2 kB

That's just minified... PikaJS is only 5.1 kB gzipped!!

Okay, but how compatible is PikaJS?

Pika will work with all modern browsers, including IE10+, Edge, 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. 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 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!

Alternatively, you can call: var $ = Pika.noConflict(); (use whatever var you want instead of $ if necessary)

PikaJS v3 coexists peacefully with any other library you're using that may want to use window.$. That means you can even use jQuery and PikaJS at the same time!

And then, get crackin':

DOM Ready

$(function() {
	// Do stuff here
});

Selectors

$('body') ->  Object [ <body> ]

$('img.pic_class') ->  Object [ <img>, <img> ]

$('#some_div')  ->  Object [ <div> ]

$('#some_div ul')  ->  Object [ <ul> ]

$('div.thisclass')  ->  Object [ <div> ]

$('#container div.thisclass span')  ->  Object [ <span>, <span>, <span> ]

$('#this_doesnt_exist')  ->  Object [ ]

$('form[name=myForm]')  ->  Object [ <form#my-form-id> ]

The return object is basically a quasi-array of DOM elements. You can check for existence however you want:

$('#this_doesnt_exist').length > 0  ->  false

It's important to note that the return value is NOT a traditional array, so Array functions like .pop() won't work. But you can do a for/forEach loop and iterate as usual.

Note that you can also do pure JS stuff very easily like this:

$('#container div.thisclass span')  ->  Object [ <span>, <span>, <span> ]

$('#container div.thisclass span')[0]  ->  <span>

$('#container div.thisclass span')[0].innerHTML  ->  'Some text/html inside the SPAN tag'

$('#search-form')[0].submit()  ->  Submit the form

$('#some-div')[0].childNodes  ->  Child nodes of DIV#some-div; pass each back in to $( ) to Pikafy it

Advanced selectors

$('#container div.thisclass').select('span')  ->  Object [ <span1>, <span2>, <span3> ]

$('#container div.thisclass').eq(1)  ->  Object [ <span2> ]  (this is CHAINABLE! Indexing starts at 0)

$('#container div.thisclass')[1]  ->  <span2>   (this is NOT chainable!)

To make any DOM element chainable, just pass it in to $():

var el = document.getElementById('main');  // el = <div#main>
$(el)	  ->  Object [ <div#main> ]

var el = $('#container div.thisclass')[1];	// el = <span2>
$(el)  ->  Object [ <span2> ]

All the goodies

$.extend

var myObject = {a:1};
$.extend(myObject,{
	b: 2
});

This is not magic. It's a simple loop that adds the passed-in object parameters to myObject.

.is

$('#container div').is('.thisclass')

Returns true if DIV has class "thisclass", false otherwise

.on

// Simple event listener

$('.my-selector').on('click.namespace', function() {
	alert('I love pizza');
});

// Submit a form
$('#my-form').on('submit', function(event) {
	// Stop event bubbling/HTML form submission (this happens automagically in ._on, but not here)
	$.S(event);
	// Do stuff here
	// Do AJAX, or you can submit form like so:
	this.submit();
	// Note that this is the DOM object, NOT $(el) like in ._on()
});

._on

// Delegated event listener
// You can pass event in