The project has stop maintenance.

TNT.js

The JavaScript framework for modern web.This is a front-end framework that can control multiple pages. Writing JavaScript is like writing back-end code, which truly realizes efficient native development. In addition, we will add native component writing and debugging in future versions.

Roadmap

Please refer to TNT.js Roadmap.

Demo

Install tntjs

Although tntjs is a more native front-end framework, you can still install them using a package manager just like any other framework

First we need a project directory, assuming you are developing in a Linux environment, let's create a new MyFirstTNTJsProject

$ mkdir MFTJP #here is the abbreviation
$ cd MFTJP
$ code ./

Then let's install it

$ npm install tntjs #npm
$ yarn add tntjs #yarn
$ pnpm install tntjs #pnpm

Or you can also use the files on the cdn

https://cdn.jsdelivr.net/npm/tntjs@latest/dist/src/index.js

How to use?

Now you can happily control multiple pages with tntjs!

Next, let's write the simplest Hello world. tntjs uses <v> to realize the two-way binding of responsive variables and pages, that is to say, the value bound on the page will change as the variable changes.

<v data="variableName"/>

Fill in the expression in the data attribute

The js part needs to instantiate a TNTApp

export const app = new TNTApp();

Then use page to preset the page:

// App.js
export const app = new TNTApp();

app.page({
  data: {
    x: "Hello world!"
  },
  mount: document.getElementById("app")
}, "id1")

Each html file has a separate pageid, you can use <page-id> to set it in <head>, which is the page identifier for tntjs multi-page programming

<page-id>page1</page-id>

Use data in the first parameter to set the initial value of the responsive variable
The first parameter uses mount to specify the Element object of the scope of the tntjs application (the specified node can only have one child node)

Now, Import it in html file

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="./App.js" type="module"></script>
  <title>tntjs demo</title>
  <page-id>id1</page-id>
</head>
<body>
  <div id="root">
    <div>
      <v data="x"></v>
    </div>
  </div>
</body>
</html>

Open it in browser, You can see:

Hello world!

Documentation

Please refer to https://tnt.js.org for more information.

Sponsoring

We're all middle school students and we don't have that much money. So sponsoring TNTjs will give us an extra reward to let us keep updating!😉

Contributors

Emoji guidelines:
- ⭐ : Community administrator
- 🖊️ : Major contributor
- 🧑‍🎓 : Student


箱子Acbox ⭐ 🖊️ 🧑‍🎓	samzhangjy ⭐ 🖊️ 🧑‍🎓	mono ⭐ 🖊️	27Onion 🖊️ 🧑‍🎓	leonfyr 🖊️ 🧑‍🎓	Rotten-LKZ 🧑‍🎓