Tfaada.js
Reactive SPA Framework
Tfaada.js is a modern, component-based SPA framework built for speed, simplicity, and power. Developed from scratch by the TFKity team, it compiles clean `.tfa` files into native JavaScript web components.
Tfaada is used internally by TFKity, powering its UI engine under the hood. It features built-in reactivity, zero-runtime overhead, and a templating syntax that feels like HTML.
Code Examples
Reactive by Default
<button onclick="{increment}">
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<script>
let count = 0;
function increment() {
// When count is updated, the UI automatically re-renders.
count += 1;
}
</script>
Simple Component Imports
<h1 style="text-align:center; color:#2c3e50;">
Welcome to {appName}
</h1>
<LoginComponent appName="{appName}" />
<script>
import LoginComponent from "./components/LoginComponent.tfa";
// When app name changes it also re renders login component.
let appName = "Tfaada Control Panel";
</script>
Get Started
Install Globally
npm i tfaada -g
Create New Project
tfaada initCore Philosophy
- Reactivity First:
State management should be simple. In Tfaada, reactivity is a built-in, automatic feature, not an afterthought.
- Developer Experience:
Writing code in Tfaada should feel natural. The syntax is designed to be minimal, clean, and close to standard HTML and JavaScript.
- No Virtual DOM:
Tfaada is a compiler. It compiles your `.tfa` components into imperative JavaScript code that surgically updates the DOM, leading to excellent performance.
- Component-Based Architecture:
Build encapsulated components that manage their own state, then compose them to build complex user interfaces.
Key Features
Tfaada was born from a need for a straightforward yet powerful framework that gets out of your way. While inspired by the reactive principles of Svelte, Tfaada is built entirely from scratch and is not a fork or extension of any other project. Its primary goal is to provide a highly optimized and intuitive development environment for building applications within the tfkity platform.
Truly Reactive
Forget hooks, signals, or wrappers. Tfaada makes reactivity effortless. Any top-level variable in your `<script>` tag is a reactive source. When its value changes, the compiler knows precisely which parts of the DOM to update, resulting in surgically efficient and predictable UI updates.
Component-Based
Build your application from small, manageable pieces. Tfaada's `.tfa` files encapsulate structure, styling, and logic into single, reusable components. This promotes a clean separation of concerns and makes your codebase easier to scale and maintain.
Simple Syntax
Write code that feels familiar. Tfaada's templating syntax is an extension of HTML, designed to be intuitive and easy to learn. If you know HTML and JavaScript, you'll feel right at home, allowing you to be productive from day one without a steep learning curve.
Vite Powered
Leverage the best of the modern web ecosystem. Tfaada integrates seamlessly with Vite, giving you a world-class development experience with lightning-fast Hot Module Replacement (HMR) for instant feedback and a highly optimized build process for production.
Built-in Logic Blocks
Keep your markup clean and declarative. Instead of scattering JavaScript logic in your template, use Tfaada’s expressive built-in tags like `<each-loop>` for rendering lists and `<if-logic>` for conditional rendering. This makes your templates more readable and easier to reason about.
Zero Third-Party Runtime
Performance is not an afterthought. Tfaada is a compiler that transforms your `.tfa` files into highly optimized, vanilla JavaScript. The framework itself disappears during the build process, meaning your users download a lean, fast application with no framework overhead.
Inspirations
2020
Compiled UI Architectures
Inspired by Svelte & SolidJS
2019
JavaScript Runtime Design
Independent R&D
Articles
2024
Reactivity Without Overhead
Explore how Tfaada compiles reactive statements directly into DOM operations without runtime bloat.
2023
Why You Don’t Need a Virtual DOM
An argument for compiled frameworks like Tfaada and Svelte for predictable, fast UIs.