kitten.jsJavascriptFramework

Kitten.js Exists Now

So, I said earlier that I was making a Javascript framework called Reactive. That was a lie, it is actually called kitten.js, and it is actually tiny.
Blog post image
Author
TKDKid1000
October 23, 2022

(That image was whatever randomly generated from https://placekitten.com/400/300 by the way.)

Alright, I wasn't lying when I said that I was making my own Javascript framework. kitten.js is still a work in progress, but I figured I would write about it because I was bored and this is what I do instead of actually working on the project.

My initial inspiration came from petite vue and alpinejs. Both are amazing and super fun frameworks, that also work with just a single script tag. Most of the features of kitten.js can map almost 1:1 with alpinejs (shhh, it's a secret). I started it because I was bored, then like, I sensed competition.

When I started making kitten.js, I had 2 goals: make it easy, and make it small.

  • Easy: Anyone with the most rudimentary Javascript knowledge can throw it into any application and add a tiny bit of interactivity to it.
  • Small: I sensed competition here. Alpinejs is 7.1KiB gzipped, petite vue is 6.9KiB. That, personally, is wayyy to large for a Javascript framework. If I can't fit it on my Apple 1, I refuse to use it. Thus, kitten.js is 2.79KiB. Hear. that petite vue? You are invalidated now.

You can totally call me out for saying "kitten.js isn't even done yet, it will get much bigger". Yes, you are correct, but I have something to say to that. I have implemented every planned feature aside from effectful functions, and for loops. Those 2, yes, could end up taking a cumulative 1.21KiB, but I am stripping away everything possible to stay under 4KiB.

Also, lighthouse! I recently got obsessed with it, because my personal website (the one you are reading this on) has trash scores! I run the kitten.js demo app through lighthouse, and was amazed.

image

As you can see, kitten.js can get perfect lighthouse scores. Easily.

How about ease of use then? Anyone can write a pure Javascript app and get perfect lighthouse scores.

Kitten.js is super easy. You can declare all of your variables in the html, and they all update statefully. It is performant, and simple. A fully functional kitten.js app can literally fit inside this blog post, so I am gonna send a basic kitten.js app. I could explain it, but it's self explanatory.

<!doctype html>
<html>
<head>
<title>kitten.js</title>
</head>
<body>
<div id="app" k-data="{ name: '' }">
<input type="text" k-bind="name" />
<p k-text="this.name"></p>
<button type="reset" @click="this.name = '', alert('Reset')">Reset</button>
</body>
<script src="/kitten.js" type="module"></script>
</html>

Aaaand, that is a functional kitten.js app. 310 bytes, and you can ship to production.

I don't know what else to say about kitten.js, I kinda just wanted to flaunt it for a bit because it's awesome and everyone should go use it.

Here's another kitten for the road! image

Well it's time to me to go, please try out kitten.js!

Related Posts

Blog post image
Javascript

There are too many Javascript frameworks!

Too many Javascript frameworks! I'm literally gonna list some, my experiences with some, and why I am making my own...

TKDKid1000
October 17, 2022
Blog post image
Web

Why I chose to rewrite TKDKid1000's Website with Firebase and Next.js

The 2 older versions of TKDKid1000's website worked, but they had their issues. In this article, I explain the history of these websites, and why and how I'm switching to Next.js and Firebase.

TKDKid1000
October 17, 2022

You must be logged in to comment!

Loading...
© 2022 TKDKid1000TermsPrivacy