We made a runtime frontend framework from scratch
Hello!
We're an open source team named BugDuck, which is mainly of middle school developers.
In April 2022, we started TNTjs with a sudden thought. At first, we promoted a runtime programming language to the outside world, implemented with pure JavaScript, but later felt unrealistic, so we changed TNTjs to a real-time dynamic fully reactive front-end framework and supports two-way data binding.
Now, we are refactoring TNTjs again. We are about to release tntjs Alpha 0.2.0 in the end of July this year.
So hop on and let me introduce you some core features of TNTjs!
In 0.2.0, you can use dynamic variables by using reactive(), just like in Vuejs. You can use <v data="variableName"> tags to render their data as well:
<v data="x"></v>
And more than that, we wrapped all core functionalities into the TNTApp top-level class. You can use it like follows:
const app = new TNT.TNTApp()
.useData({
x: 233333
})
.mount(document.getElementById("app"));
In TNTjs Alpha 0.2, we're using Virtual DOMs, and it turned out to be much faster than TNTjs Alpha 1.0. For rendering 10000 nodes it will take about 200ms. However - that is still pretty slow and we're currently working on improving the performance.
You can use <t-for> to implement a loop, and you can use <t-if> <t-elif> <t-else> to implement condition rendering.
Here's a kitchen-sink demo of TNTjs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TNTjs Demo</title>
<script src="./dist/tnt.min.js"></script>
<style>
.green {
color: green;
}
.red {
color: red;
}
</style>
</head>
<body>
<div id="root">
<div>
<h1>Counter</h1>
<v data="nae"></v>
Bar: <v data="bar"></v>
<p :class="(sum % 2 === 0 ? 'green' : 'red')">
Sum:
<v data="sum"></v>
</p>
<button onClick="data.foo.push(1)">Plus 1</button>
<button onClick="foo.push(-1)">Minus 1</button>
<button onClick="foo.pop()">Pop top</button>
<button onClick="bar++">Plus bar</button>
<button onClick="foo[foo.length - 2] += 2">Plus 2</button>
<t-if cond="sum % 2 === 0"> It's even! </t-if>
<t-else> It's odd! </t-else>
<br />
<p>
<code>data.foo</code>
content:
</p>
[
<t-for data="currentNumber in foo">
<span onclick="alert(`You clicked: ${currentNumber}`)">
<t-if cond="currentNumber > 0">
<v data="`${currentNumber}`"></v>,
</t-if>
<t-else>
← 0
</t-else>
</span>
</t-for>
<t-if cond="foo.length && foo[foo.length - 1] > 0">
<span>
<v data="`${foo[foo.length - 1]}`"></v>
</span>
</t-if>
]
<t-get src="./test.json" type="json">
<v data="name"></v>
</t-get>
</div>
</div>
</body>
<script>
const app = new TNT.TNTApp()
.useData({
nae: 114514,
foo: [],
bar: 5,
})
.useComputed({
sum() {
let sum = 0;
data.foo.forEach((v) => (sum += v));
return sum;
},
})
.useEffect(() => {
console.log(`Sum changed: ${data.sum}`);
})
.onMounted((app) => {
console.log("App mounted!");
})
.mount(document.getElementById("root"));
data.foo = [233];
</script>
</html>
Finally, if you like our framework, please leave us a star on GitHub !
If you have some good ideas about improving TNTjs, please file us an issue or email us at bugduck@163.com.
And at last, any contributions are highly welcomed. If you want to become a contributor, you can fork the repo and submit us a pull request. We will be happy to review it!
Thank you!
Top comments (2)
So basically vue js light edition
Yes, but there is a big difference between tntjs and Vue. Vue's components are deeply dependent on Vue. tntjs is committed to native development. One of the biggest drawbacks of scaffolding development is that once the project scales, it will become difficult to maintain. tntjs simplifies native development based on native development and introduces the concept of components