NanoJS is a lightweight, dependency-free JavaScript framework designed to provide a simple, reactive experience for building web applications. Inspired by modern frameworks like Vue and Svelte, NanoJS focuses on minimalism and ease of use, allowing developers to build dynamic, reactive interfaces without the overhead of complex tooling.
- Reactive Signals: Simple and efficient reactive data binding.
- Component-Based Structure: Modular architecture for building reusable components.
- Zero Dependencies: No need for npm, Node.js, or build tools. Just vanilla HTML, JavaScript, and CSS.
- Lightweight and Fast: Optimized for performance with minimal overhead.
No installation is required! Just download the files and include them in your project.
<script type="module" src="./nano.js"></script>Create a project structure like this:
project/
├── index.html
├── nano.js
├── components/
│ └── MyComponent.html
Create a component file, such as MyComponent.html:
<template>
<div>
<h1>{{title}}</h1>
<input type="text" oninput="updateTitle(event)" value="{{title}}" />
<input type="text" id="itemInput" placeholder="Enter item name" />
<button onclick="addItem()">Add Item</button>
<loop values="item in items.value">
<div>
<span>Item: {{item.name}}</span>
<button onclick="removeItem({{item.id}})">Remove</button>
</div>
</loop>
<p>Total items: {{items.value.length}}</p>
</div>
</template>
<script type="module">
const title = new Blip('Hello, NanoJS!');
const items = new Blip([{ id: 1, name: 'Item 1' }]);
window.updateTitle = function(event) {
title.value = event.target.value;
};
window.addItem = function() {
const inputElement = document.getElementById('itemInput');
const itemName = inputElement.value.trim();
if (itemName) {
items.value = [...items.value, { id: Date.now(), name: itemName }];
inputElement.value = '';
}
};
window.removeItem = function(itemId) {
items.value = items.value.filter(item => item.id !== itemId);
};
</script>
<style>
h1 { color: #007acc; }
button { margin: 5px; }
input { margin-right: 10px; padding: 5px; }
div { margin-bottom: 10px; }
</style><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My NanoJS App</title>
<script type="module" src="./app.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>import { loadComponent } from './componentLoader.js';
loadComponent('./components/MyComponent.html', '#app');The Blip class is used to create reactive variables.
const title = new Blip('Hello, World!');
title.value = 'Updated Title';- Use
Blipvariables for reactive data. - Use modular components to keep your codebase organized and reusable.
To test your NanoJS app locally, you can use Python's built-in server:
python3 -m http.server 8000Then, open your browser and navigate to:
http://localhost:8000
NanoJS uses a simple reactive system. When the value of a Blip variable changes, all elements bound to it are updated automatically.