DoDo Framework

> An easy-to-learn JavaScript framework for building reactive single-page applications


DoDo is a modern, lightweight JavaScript framework that helps developers build reactive single-page applications. Unlike component-based frameworks like Angular 2+, Vue, and React, DoDo uses a Model-View-Controller (MVC) architecture, making it simpler and more flexible. Inspired by Angular 1, DoDo provides an intuitive approach to building dynamic web applications.

---

✨ Features

- 🚀 Blazing Fast - Optimized for performance with minimal overhead
- 📦 Zero Dependencies - Lightweight framework with no external dependencies
- 🎯 Simple & Intuitive - MVC architecture makes it easy to learn and use
- ⚡ Modern ES6+ - Built with modern JavaScript (ES Modules)
- 🔄 Reactive - Automatic DOM updates when data changes
- 🛠️ Built-in Libraries - Authentication, HTTP client, form handling, and more
- 🌐 Universal - Works in browsers, browser extensions, Electron, and Cordova apps
- 📝 No TypeScript Required - Pure JavaScript, no compilation step needed

---

🎯 Use Cases

DoDo is perfect for building:

- Single Page Applications (SPAs) - Dynamic, AJAX-powered web apps
- Browser Extensions - Lightweight extensions with reactive UI
- Desktop Applications - Electron-based desktop apps
- Mobile Applications - Cordova/PhoneGap mobile apps
- Progressive Web Apps (PWAs) - Modern web applications

---

📦 Installation

``bash
npm install --save @mikosoft/dodo
`

---

🚀 Quick Start

$3

The easiest way to start a new DoDo project is using the project generator:

`bash
npm init dodo
`

This command will set up a boilerplate project with all the necessary structure.

$3

`javascript
import { App, corelib } from '@mikosoft/dodo';

// Configuration
import { $debugOpts, $auth, $httpClient } from './app/conf/index.js';

// Controllers
import HomeCtrl from './controllers/HomeCtrl.js';
import QuickstartCtrl from './controllers/QuickstartCtrl.js';
import NotfoundCtrl from './controllers/NotfoundCtrl.js';

// Define routes
const $routes = [
['when', '/', HomeCtrl],
['when', '/quickstart', QuickstartCtrl],
['notfound', NotfoundCtrl]
];

// Initialize and configure the app
const app = new App('myApplication');
app
.auth($auth)
.httpClient($httpClient)
.debug($debugOpts);

// Set up routes and start listening
app
.routes($routes)
.listen();
`

---

📚 Core Libraries

DoDo includes a comprehensive set of built-in libraries for common tasks:

$3

Authentication and authorization with JWT token support, route guards, and user session management.

Features:
- JWT token handling
- Cookie-based authentication
- Route protection (guards)
- Auto-login functionality
- Role-based access control

$3

HTTP client library for making API requests with support for:
- GET, POST, PUT, DELETE, PATCH methods
- Request/response interceptors
- Automatic retries on timeout
- Redirect handling
- Custom headers and options

$3

Helper library for working with HTML forms:
- Form control value management
- Validation support
- Type conversion
- Multiple input types (text, checkbox, radio, file, etc.)

$3

Utilities for managing browser storage:
- Cookie - Cookie management with expiration, secure flags, and domain options
- BrowserStorage - LocalStorage and SessionStorage wrappers

$3

Pagination library for handling paginated data display.

$3

Miscellaneous utility functions for common operations.

---

🏗️ Architecture

$3

DoDo follows the Model-View-Controller architecture:

- Model - Data layer with reactive properties
- View - Presentation layer with declarative directives
- Controller - Logic layer that connects Model and View

$3

DoDo uses declarative HTML directives for data binding:

`html




Logout









`

$3

Controllers have lifecycle hooks:

- __loader(trx) - Load views and resources
- __init(trx) - Initialize controller properties
- __rend(trx) - Render the view
- __postrend(trx) - Execute after rendering
- __destroy() - Cleanup when controller is destroyed

---

📖 Documentation

For comprehensive documentation, tutorials, and examples, visit:

http://dodo.mikosoft.info

---

🔧 API Overview

$3

The main application class for Single Page Applications.

`javascript
const app = new App('appName');

// Configuration methods
app.auth($auth) // Set authentication
app.httpClient($httpClient) // Set HTTP client
app.debug($debugOpts) // Set debug options
app.fridge($fridge) // Set shared data container
app.i18n($i18n) // Set internationalization

// Route configuration
app.routes($routes).listen() // Define routes and start
`

$3

For single-page applications (no routing):

`javascript
const app = new AppOne('appName');
app.controller(MyController);
`

$3

Base class for controllers:

`javascript
class MyController extends Controller {
async __loader(trx) {
// Load views
}

async __init(trx) {
// Initialize
this.$model.userName = 'John';
}

async __rend(trx) {
// Render
await this.render();
}
}
`

---

🎨 Directives Reference

$3


- dd-text - Text content binding
- dd-html - HTML content binding
- dd-value - Input value binding
- dd-model - Two-way data binding

$3

- dd-click - Click events
- dd-change - Change events
- dd-keyup - Keyup events
- dd-enter - Enter key events

$3

- dd-if - Conditional rendering
- dd-elseif - Else-if condition
- dd-else - Else condition
- dd-visible - Visibility toggle

$3

- dd-each - Array iteration
- dd-repeat - Repeated rendering

$3

- dd-class - Dynamic CSS classes
- dd-style - Dynamic styles
- dd-disabled - Disable elements
- dd-checked - Checkbox/radio state
- dd-selected - Select option state
- dd-src - Image source
- dd-attr - Dynamic attributes

$3

- dd-href` - Client-side navigation

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

📄 License

Copyright (c) MikoSoft

Licensed under the MIT License

---

🔗 Links

- Homepage: http://dodo.mikosoft.info
- GitHub: https://github.com/miko-soft/dodo
- Author: Mikodanic Sasa

---

💡 Why DoDo?

DoDo is designed for developers who want:
- Simplicity - No complex build tools or configuration
- Flexibility - MVC architecture gives you control
- Performance - Lightweight and fast
- Productivity - Built-in libraries for common tasks
- Modern JavaScript - Uses ES6+ features without transpilation complexity

If you're looking for a framework that's easy to learn, powerful, and doesn't require TypeScript or complex build configurations, DoDo might be the perfect choice for your next project.