Jet.js is a reactive JavaScript framework I built mainly for my own projects.
It looks a bit like Angular and Vue — and I can already hear your question:
“Why not just use Angular or Vue? They have experience, history, and huge communities.”
Fair question 🙂
I actually started with Vue, and I completely agree — using your own framework is risky. Bugs will show up anyway, and it’s usually much easier (and safer) to use something well-established.
But here’s my short answer:
With Vue, I can’t change the core.
With Jet.js… I can 😄
And not just that — I can simplify the syntax, add exactly the features I need, and avoid things I don’t.
Right now, I’m at the point where I can write a simple component in a minute.
In bigger frameworks, the same thing can easily take 2–5× more time (and code).
So yeah… I decided to take the risk.
At the moment, Jet.js weighs about 31 KB, while Vue.js is around 211 KB.
Jet will probably get even smaller after more optimization, although every time I add another “magic” helper, it politely refuses to go on a diet. So in reality, it will likely stay somewhere around the same size.
But size is only part of the story.
For me, the more interesting comparison is the amount of code needed for very simple components.
Small example: Hello World
Jet.js
jet({
name: "hello-world",
data: { text: "Hello world!" },
tpl: `<h1>{text}</h1>`
});Vue (HelloWorld.vue)
<template>
<h1>{{ text }}</h1>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
text: "Hello world!"
};
}
};
</script>Even in this tiny example, Jet.js is more direct.
Less structure, less ceremony, less talking to the framework before doing the actual work.
Parent / child example
In Jet.js, child components can be very minimal.
No extra prop initialization, no boilerplate component setup, and if the prop name is the same, I do not even need to pass its value manually.
Jet.js
//parent component + import child and pass props, note props nas no value as it named the same
import "./child-com.js";
jet({
name: "parent-com",
data: {
title: "I'm a parent component",
child: "I'm a child component",
},
tpl: `
<h1>{title}</h1>
<child-com d-child></child-com>
`
});
//child component, no export etc
jet({
name: "child-com",
tpl: `
<h2>{child}</h2>
`
});Vue version
//parent component ParentCom.vue
<template>
<div>
<h1>{{ title }}</h1>
<ChildCom :child="child" />
</div>
</template>
<script>
import ChildCom from "./ChildCom.vue";
export default {
name: "ParentCom",
components: {
ChildCom
},
data() {
return {
title: "I'm a parent component",
child: "I'm a child component"
};
}
};
</script>
//child ChildCom.vue
<template>
<h2>{{ child }}</h2>
</template>
<script>
export default {
name: "ChildCom",
props: {
child: {
type: String,
default: ""
}
}
};
</script>And here is a slightly more natural final paragraph if you want to continue the post:
Of course, Vue is more mature, more battle-tested, and backed by a huge community. I am not arguing with that.
But for my own projects, I enjoy being able to write less code, shape the syntax the way I want, and change the framework from the inside when needed.
That is probably a bad habit.
Or a very good one.
Time will tell 🙂
Below are some demo examples and downloads
Note: Jet.js is still ALPHA
Documentation(NOT READY YET, it’s on stage of filling with content)