A lightweight javascript library for building micro apps for the front-end.
npm install appblocks> A tiny, fast, and lightweight JavaScript library for building micro applications
AppBlocks is designed to enhance web pages with self-contained micro applications. With a focus on simplicity and minimal footprint, AppBlocks provides everything needed to build interactive components while being ridiculously easy to integrate into any project.
- ðŠķ Lightweight: Minimal bundle size with no heavy dependencies
- ⥠Fast: Efficient rendering with smart DOM diffing (Idiomorph)
- ðŊ Focused: Built specifically for micro apps and widgets
- ðĶ Zero Config: Works out of the box with a simple script tag
- ð§ Flexible: Template-based with reactive data binding
Read more about the AppBlocks use case.
Here's a complete "Hello World" app in under 30 lines:
``html
{data.message}
`
`html`
`bash`
npm install appblocks
Then import in your JavaScript:
`javascript`
import { AppBlock } from 'appblocks';
Download the latest release and include it in your HTML:
`html`
`javascript
var app = new AppBlock({
el: document.getElementById('app'),
data: { count: 0 },
// ...
});
// Update data and automatically re-render
app.setData({ count: 1 });
`
` Now you see me Now you don'thtml
$3
javascript
filters: {
uppercase(app, value) {
return value.toUpperCase();
}
}
`html
{data.name|uppercase}
`$3
javascript
events: {
'click .btn': function(e, element) {
this.Parent.setData({ clicked: true });
},
'submit form': function(e, element) {
e.preventDefault();
// Handle form submission
}
}
`$3
javascript
app.fetchRequest('https://api.example.com/data',
{ method: 'GET' },
{
success: (data) => app.setData({ items: data }),
error: (err) => console.error(err)
}
);
``ð Full Documentation
- Getting Started Guide
- Data Management
- Directives
- Filters
- Methods
- Event Handling
- HTTP Requests
- API Reference
AppBlocks works in all modern browsers that support ES6:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see LICENSE file for details