---
title: "Introduction"
description: "Why use a JS framework if we can do all from scratch?"
type: "docs"
category: "doc"
tags: []
authors: [Anonymous]
date: "2026-09-09"
last_update: "2026-09-09"
time_minutes: 2
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/js/introduction"
---

# Why use a JS framework if we can do all from scratch?

![GitHub last commit](https://img.shields.io/github/last-commit/derafu/js/main)
![CI Workflow](https://github.com/derafu/js/actions/workflows/ci.yml/badge.svg?branch=main&event=push)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/derafu/js)
![GitHub Issues](https://img.shields.io/github/issues-raw/derafu/js)

This library provides a collection of utility functions for common web development tasks, organized into modular components for better maintainability and flexibility.

## Structure

The library is organized into the following modules:

### Main Modules

- `src/derafu.js` - Main module (exports all functions under the `derafu` namespace).

### Core Modules

- `src/tabs.js` - Tab management functions.
- `src/ui.js` - User interface functions (popups, tables, notifications, copy/paste, etc.).
- `src/utils.js` - Basic utility functions (password generation, cookies, language detection, number formatting, etc.).

### Validation Modules

- `src/validation/l10n-cl.js` - Chilean validation functions (RUT validation, etc.).

### Form Modules

- `src/form/fields.js` - Form field management functions.
- `src/form/tables.js` - Dynamic table functions.
- `src/form/validation.js` - Form validation functions.

### Compatibility Modules

- `src/__.js` - Main compatibility layer (exports all functions under the `__` namespace).
- `src/form.js` - Form compatibility layer (exports all form functions under the `Form` namespace).

## Quick Start

Import using the CDN of the module you need, for example UI module:

```html
<script src="https://cdn.jsdelivr.net/npm/derafu-js@0.1.0/src/ui.js"></script>
```

Then use the function you need, for example notify function:

```javascript
UI.notify('Hello World!');
```

**Note**: Remember to load the dependencies first, in this example notyf is used for notifications.

## Usage

### Browser Usage

Load the modules in the correct order:

```html
<!-- Load individual modules -->
<script src="src/utils.js"></script>
<script src="src/ui.js"></script>
<script src="src/validation/l10n-cl.js"></script>
<script src="src/tabs.js"></script>
<script src="src/form/validation.js"></script>
<script src="src/form/fields.js"></script>
<script src="src/form/tables.js"></script>

<!-- Load compatibility layers -->
<script src="src/__.js"></script>
<script src="src/form.js"></script>
```

Then use the functions:

```javascript
// Using the compatibility layer (recommended for existing code).
__.generatePassword(12);
__.notify('Hello World!');
Form.check('myForm');

// Using individual modules (recommended for new code).
Utils.generatePassword(12);
UI.notify('Hello World!');
FormValidation.check('myForm');
```

### Node.js Usage

```javascript
const Utils = require('./src/utils.js');
const UI = require('./src/ui.js');

Utils.generatePassword(12);
UI.notify('Hello World!');
```

## Validation and Testing

Run the validation and test suite:

```bash
npm install
npm run format:check
npm run lint:check
npm run test
```



---
Last updated on 09/09/2026