DEV Community: Louis Bertson

Total.js v5: Schemas and Actions.

Louis Bertson — Tue, 26 Nov 2024 11:24:54 +0000

Total.js v5: Schemas and Actions.

If you’re diving into Total.js development, you’ve chosen a robust, modern framework that’s packed with powerful features for building fast, scalable applications. At the heart of Total.js are two essential concepts that will guide much of your backend logic: schemas and actions.
Schemas and actions might seem complex at first, but once you understand how they work together, they’ll become some of your favorite tools in the framework. In this guide, I’ll break down these concepts, show you
how to set them up, and walk you through practical examples that will empower you to create an organized, flexible codebase.

Let's get started!

Understanding schemas and actions in Total.js

In Total.js, schemas and actions play distinct roles that complement each other:

Schemas: These are blueprints for organizing data and the operations that manage it. With schemas, you define the structure of your data and associate it with specific actions that can perform tasks on it, such as creating, updating, or deleting records.
Actions: Actions in Total.js represent business logic for performing specific tasks. Actions can be tied to schemas (schema actions) or created as standalone functions that handle tasks not directly linked to any schema.

Think of schemas as structured “folders” where you organize your data logic, while actions are the “tools” that operate on that data. You’ll be able to call actions as needed, whether they belong to a schema or stand alone, and they’re especially useful for handling backend operations like processing user input or interacting with a database.

Getting Started with Schemas in Total.js

1. Setting Up a Basic Schema

A schema in Total.js is more than just a data structure. It’s a powerful way to group related actions that handle specific tasks for a particular type of data. Here’s a simple example of creating a schema for Users.
In your total.js application create a folder schemas and then create a file users.js inside to paste the following:

NEWSCHEMA('Users', function(schema) {
    // Action: list
    schema.action('list', {
        name: 'Listing operation',
        query: '*search:String', // Query parameters
        action: function($) {
            // Action logic goes here
            $.success(); // Send a success response
        }
    });

    // Action: insert
    schema.action('insert', {
         name: 'Creation operation',
        input: '*name:String, *email:Email', // Input validation
        action: function($, model) {
            // Action logic for inserting user
            $.success(model); // Respond with the inserted model data
        }
    });

    // Action: read
    schema.action('read', {
         name: 'Reading operation',
        params: '*id:UID', // Parameter validation
        action: function($) {
            // Action logic to read a user by ID
            $.success(); // Send a success response
        }
    });
});

In this example, we created a schema called Users with three actions:

list: Returns a list of users based on search parameters.
insert: Adds a new user to the database with validation for required fields (name and email).
read: Retrieves a specific user by their unique ID.

By organizing these actions within the Users schema, you create a cohesive set of operations for handling user data.

2. Linking Schemas to Routes

To make these schema actions accessible via HTTP requests, you can link them to routes in Total.js. This will allow your frontend or API clients to call these actions. Just create a controller file controllers/api.js to put the following:

exports.install = function () {
        ROUTE('GET  /api/users/         --> Users/list');
        ROUTE('POST /api/users/insert   --> Users/insert');
        ROUTE('GET  /api/users/{id}     --> Users/read');
}

In this example:

A GET request to /api/users/ will call the list action.
A POST request to /api/users/insert will invoke the insert action.
A GET request to /api/users/{id}/ will trigger the read action with a unique user ID passed in the URL.

This structure keeps your routing and backend logic organized and straightforward.

Standalone actions

While schema actions are great for data-centric tasks, sometimes you’ll need an action that performs a standalone operation, not linked to a specific schema. Standalone actions are defined independently and can be used for any custom backend functionality.

1. Creating a Standalone Action

Total.js recommand to create your actions file in actions folder. But you can put them somewhere else like (schemas,definitions,modules,etc)
Let’s say we want to create a standalone action called find. This action accepts query parameters for pagination and sorting without being tied to a schema.

Let us create this file in actions/default.js and copy/paste the following:

NEWACTION('find', {
    query: 'page:Number,sort:String',
    params: 'projectid:String',
    action: function($) {
        // Logic to find specific data based on query and params
        $.success(); // Send a success response
    }
});

This find action can be called to handle any general-purpose data search, making it a flexible solution for various backend needs.

2. Connecting standalone actions to routes

Just like schema actions, standalone actions need to be linked to routes to be accessed from your API or frontend.

ROUTE('GET /api/find/           --> find');

With this route, a GET request to /api/find/ will call the standalone find action.

Using ACTION()

Total.js provides the ACTION() method, a way to call both schema-related and standalone actions in your code.

Example

Let’s call the Users/insert action we created earlier using ACTION():

ACTION('Users/insert', { name: 'John', email: 'johndoe@gmail.com' }).callback(function(err, response) {
    if (err) {
        console.error('Action error:', err);
    } else {
        console.log('User insert response:', response);
    }
});

Here, we specify the Users/insert action and pass a search query to find users with “John” in their data. You can use this approach to call any schema or standalone action, making ACTION() a highly flexible tool.

Advanced: Calling Schema Actions Within Other Schema Actions

Total.js allows you to call actions within the same schema using the $.action method. This feature is powerful for creating complex workflows that involve multiple steps.

Example: Nested Schema Actions

Let’s say we want an action in the Users schema to first list users, then perform additional processing based on that list.

NEWSCHEMA('Users', function(schema) {
    schema.action('list', {
        name: 'Listing users',
        query: 'search:String',
        action: function($) {
            $.success([{ name: 'John Doe' }, { name: 'Jane Doe' }]); // Sample data
        }
    });

    schema.action('proccess', {
        action: async function($) {
            // Call the list action within the same schema
            $.action('list').callback(function(err, users) {
                if (err) return $.invalid(err);

                // Process users after retrieving the list
                users.forEach(user => {
                    console.log('Processing user:', user.name);
                });
                $.success('Users processed successfully!');
            });

            // or 
            // var response = await $.action('list').query({ search: 'totaljs' }).user($.user).promise($);


        }
    });
});

In this example, proccess calls list within the Users schema. This structure is great for chaining operations within schemas and gives you full control over workflow management.

Advanced usage

Total.js v5 allows so many other usages of NEWSCHEMA and NEWACTION for very specific cases. We are not going to cover them here because we are preparing another blog post for them. But if you are curious about learning them you can check this blog post

Key Takeaways and Tips

Working with schemas and actions in Total.js can elevate your application’s structure and efficiency. Here are some key points to keep in mind:

Schemas are collections of related actions tied to specific data entities. Use them to organize and validate your data-centric actions.
Standalone actions allow you to build independent functions for tasks that don’t fit within a schema.
Use ACTION() for flexible action calls, whether they’re schema-based or standalone.
Route linking connects your actions to HTTP endpoints, making your backend logic accessible via API routes.
For more complex workflows, nested actions within schemas give you a streamlined way to manage multi-step processes.

With these foundations in place, you’re ready to start building robust, modular backend logic in Total.js! Experiment with different schema and action configurations, and don’t hesitate to explore Total.js’s extensive documentation as you continue to master this flexible framework.

Happy coding!

QueryBuilder in Action Part 1

Louis Bertson — Mon, 25 Nov 2024 13:30:26 +0000

When building applications with Node.js in general or Total.js specifically, querying and managing data efficiently is essential. In this blog, we’ll cover how to perform basic data operations using the Total.js QueryBuilder. This first part will introduce fundamental concepts, demonstrate core actions like inserting and retrieving data, and showcase practical examples to get you started.

Getting Started: Exploring `QueryBuilder` in Total.js

Total.js’s QueryBuilder offers a powerful abstraction layer for interacting with various databases through operations such as filtering, inserting, updating, and retrieving data. Whether you're working on a lightweight application or managing complex queries, QueryBuilder provides a simple yet flexible ORM solution for Node.js applications.

Database Support and Implementations

QueryBuilder acts as a middle layer, abstracting the specifics of database engines. To utilize it effectively, you’ll need to integrate an existing implementation or build your own that meets your requirements. Total.js supports multiple database engines, ensuring flexibility for different use cases.

Here are the currently available implementations:

NoSQL Embedded Database (TextDB): This is a lightweight, file-based database included in the Total.js core, perfect for small applications or prototyping.
PostgreSQL: Utilize QueryBuilder with one of the most robust and feature-rich relational databases.
MySQL: Integrate with this widely used database for scalable and high-performance solutions.
SQLite: Leverage QueryBuilder with this lightweight, serverless database for quick deployments or embedded applications.

Setting Up `QueryBuilder`

In this guide, we’ll start with an embedded NoSQL (TextDB) database to demonstrate how to define schemas and perform basic actions like querying, inserting, and updating data. By the end, you’ll have the skills to adapt these operations for other supported database engines.

Setting up the Database

To learn effectively, we'll create a test NoSQL database file with sample user data.

Database Setup: Create a databases/users.nosql file to store sample user records:

{"id": 2, "name": "Bob", "age": 30}
{"id": 3, "name": "Charlie", "age": 28}
{"id": 4, "name": "Diana", "age": 22}
{"id": 5, "name": "Edward", "age": 35}
{"id": 6, "name": "John", "age": 45}
{"id": 7, "name": "Fiona", "age": 27}
{"id": 8, "name": "George", "age": 29}
{"id": 9, "name": "Hannah", "age": 24}
{"id": 10, "name": "Isaac", "age": 31}
{"id": 11, "name": "Julia", "age": 26}

Good to know: You don't need to manually create the .nosql file in the databases folder. The framework is able to create it during the insert operation if it does not exists. But the .nosql file content is plaintext and it is important to understand its structure. Maybe it will be usefull to fix certain cases.

Schema Definition: Create a schema with actions in schemas/users.js. We’ll define actions for listing, retrieving, and inserting users.

Basic QueryBuilder Actions with Practical Examples

In schemas/users.js, we'll define actions for listing and inserting users. This schema uses QueryBuilder methods to filter data, retrieve specific records, and add new users to the database.

1. Listing Users with Filters
We start by defining a list action to retrieve users based on criteria like name or age.

NEWSCHEMA('Users', function(schema) {

    schema.action('list', {
        name: 'List users',
        query: 'page:Number, sort:String, name:String',
        params: 'id:String',
        action: async function($) {
            // Example: filter by name
            var users = await DATA.find('nosql/users').where('name', $.query.name).promise();
            $.callback(users); 
        }
    });
});

Usage Examples:

Here are some variations of using list to filter users.

Filter by Name:

var users = await ACTION('Users/list').where('name', 'John').promise();
console.log(users);

Retrieve First User Only:

var user = await DATA.find('nosql/users').first().promise();
console.log(user);

2. Retrieving a User by ID
Another useful feature is retrieving a user by their ID. Using QueryBuilder's .id() method makes this straightforward:

var builder = DATA.find('nosql/users');
builder.id($.params.id);
// or builder.where('id', $.params.id);
$.callback(await builder.promise());

Example Usage:

var user = await ACTION('Users/list').params({ id: 5 }).promise();
console.log(user);  // Retrieves user with id 5

3. Inserting a New User
Next, let’s define an insert action to add new users to the database.

schema.action('insert', {
    name: 'Inserting new users',
    input: '*name:String, age:Number',
    output: 'success:Boolean',
    action: function($, model) {
        DATA.insert('nosql/users', model).callback(function(err) {
            if (err) {
                console.error(err);
            } else {
                $.success(true);
            }
        });
    }
});

This action adds a user to databases/users.nosql. Here’s how you can call the insert action.

Usage Example:

// in `definitions/test.js`
ON('ready', function() {
  var result = await ACTION('Users/insert', { name: 'Alice', age: 25 }).promise();
    console.log(result);
});

Practical Usage Cases: QueryBuilder in Action

1. Retrieve Users by Filtered Name

async function getUsersByName() {
    var users = await ACTION('Users/list').query({ name: 'Hannah' }).promise();
    console.log(users);
}
getUsersByName();

2. Retrieve User by ID

async function getUserByID() {
    var user = await ACTION('Users/list').params({ id: 4 }).promise();
    console.log(user);
}
getUserByID();

3. Insert a New User and Retrieve the Updated List

async function insertAndRetrieve() {
    await ACTION('Users/insert', { name: 'James', age: 32 }).promise();
    var users = await ACTION('Users/list').promise();
    console.log(users);
}
insertAndRetrieve();

Conclusion

In this first part of QueryBuilder in Action, we covered the essentials: creating a basic NoSQL database, defining schema actions, and using QueryBuilder methods to list, filter, retrieve, and insert users. We explored practical code examples for each operation to help you understand how these concepts work in a real-world scenario.
In the next part, we’ll dive into more advanced QueryBuilder methods, and complex filtering to give you a complete toolkit for managing data efficiently in Total.js.
Stay tuned for QueryBuilder in Action Part 2, where we'll go deeper into advanced querying techniques to supercharge your Total.js applications!

Performance Testing: Total.js vs. NestJS

Louis Bertson — Wed, 23 Oct 2024 11:14:09 +0000

When it comes to building high-performance applications in Node.js, choosing the right framework is crucial for optimizing concurrency, response times, and resource utilization. In this article, we’ll provide a comprehensive performance comparison between Total.js (versions 4 and 5) and NestJS, two frameworks designed with different philosophies and use cases.

Why Compare Total.js and NestJS?

Total.js: Known for its minimalist design, Total.js emphasizes speed and simplicity, making it ideal for performance-focused applications.
NestJS: Built for an exceptional developer experience, NestJS follows a modular architecture, inspired by Angular, making it a go-to for larger, more complex applications.

While both frameworks cater to distinct project needs, this comparison aims to identify which one is better suited for scalable, high-performance applications.

Test Methodology: Fair and Accurate Comparisons

To ensure a fair and unbiased performance test, the methodology simulates real-world stress conditions, measuring several key metrics:

Response Time: The time taken to process 10,000 requests.
Concurrency Handling: How well the frameworks scale with increasing connections.
Project Size: The size of the source code and dependencies required to set up a basic application.

Hardware and Testing Environment

Machine: iMac Intel Monterey, 12GB RAM
Node.js Version: v21
Testing Tool: Bombardier (for simulating high-concurrency requests)

Step-by-Step Code Setup

1. Setting Up Total.js v4

Step 1: Create the project folder:

mkdir total4
cd total4

Step 2: Initialize the project and install dependencies:

npm init -y
npm install total4

Step 3: Create the index.js file:

require('total4');

ROUTE('GET /', function() {
    this.html('Hello world!');
});

HTTP('release', { port: 8000 });

Step 4: Start the Total.js v4 server:

node index.js

2. Setting Up Total.js v5

Step 1: Create the project folder:

mkdir total5
cd total5

Step 2: Initialize the project and install dependencies:

npm init -y
npm install total5

Step 3: Create the index.js file:

require('total5');

ROUTE('GET /', $ => $.html('Hello world!'));
DEBUG = false;
F.http({ port: 8001 });

Step 4: Start the Total.js v5 server:

node index.js

3. Setting Up NestJS

Step 1: Create the project folder:

mkdir nestjs-app
cd nestjs-app

Step 2: Initialize a new NestJS project using the NestJS CLI:

npm install -g @nestjs/cli
nest new .

When prompted, select npm as your package manager.

Step 3: Modify the main.ts file:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Step 4: Start the NestJS server:

npm run start

Running the Performance Test

Once all servers are up and running on their respective ports:

Total.js v4 on 8000
Total.js v5 on 8001
NestJS on 3000

Step 1: Create a test folder:

mkdir performance-test
cd performance-test

Step 2: Initialize the project and install dependencies:

npm init -y
npm install total5

Step 3: Create the `run.js` file:

require('total5');

function run(name, url, count, callback) {
    console.time(name);
    count.async(function(index, next) {
        var opt = {};
        opt.method = 'GET';
        opt.url = url;
        opt.dnscache = true;
        opt.keepalive = true;
        opt.callback = function(err, response) {
            err && console.log('ERROR ' + name + ':', err);
            next();
        };
        REQUEST(opt);
    }, function() {
        console.timeEnd(name);
        callback && callback();
    });
}

const COUNT = 10000;
var arr = [
    { name: 'Nest.js', url: 'http://127.0.0.1:3000/' },
    { name: 'Total.js: 4', url: 'http://127.0.0.1:8000/' },
    { name: 'Total.js: 5', url: 'http://127.0.0.1:8001/' }
];

// Add multiple rounds
arr.push.apply(arr, arr);
arr.push.apply(arr, arr);

arr.wait(function(item, next) {
    run(item.name, item.url, COUNT, next);
});

Step 4: Run the performance test:

node run.js

Performance Results

After running 10,000 concurrent requests, here are the results:

Framework	Average Response Time (10,000 requests)
Total.js v4	3.36 seconds
Total.js v5	3.30 seconds
NestJS	4.88 seconds

Project Size Comparison

Framework	Project Size
Total.js v4	1.7 MB
Total.js v5	909 kB
NestJS	118 MB

Startup Time Comparison

Framework	Startup Time
Total.js v4	Instant
Total.js v5	Instant
NestJS	Compiled (slower)

Key Takeaways

1.Total.js is Faster: Both Total.js v4 and v5 outperformed NestJS by an average of 1.5 seconds in response time, which is crucial for speed-critical applications.

2.Compact Project Sizes: Total.js projects are incredibly lightweight, with Total.js v5 requiring less than 1 MB, while NestJS can take up to 118 MB.

3.Instant Startup: Thanks to CommonJS, Total.js apps launch almost instantly, while NestJS requires a TypeScript compilation process, resulting in slower startups.

Why Choose Total.js?

All-in-One Framework: Total.js provides a comprehensive set of built-in tools (HTTP, REST API, real-time, static file servers, etc.) without the need for extra libraries.
Speed-Oriented: The framework’s minimalist approach leads to faster request handling, making it suitable for high-concurrency applications.
Smaller Footprint: The compact size and modularity of Total.js make it ideal for projects focused on performance and resource management.
Integrated Tools: With tools like Flow, CMS, and Code Editor, Total.js offers a complete ecosystem for rapid development.

Conclusion

For developers prioritizing speed, efficiency, and rapid application development, Total.js proves to be the superior framework in Node.js. It outperforms NestJS in terms of response time, resource utilization, and project size, making it the go-to framework for high-performance, scalable applications.

Download the complete test setup and scripts here to run your own performance tests.

Total.js: Total.js Framework
NestJS: NestJS Documentation
Bombardier: Bombardier on GitHub

Total js UI #3 Data binding part 1

Louis Bertson — Mon, 02 Sep 2024 18:21:00 +0000

Total js UI #3 Data binding part 1

In this tutorial, we delve into the fundamentals of data binding in Total.js UI—a key concept that connects your user interface with data models, making your app dynamic and responsive.

In this video, you'll learn:

What data binding is and why it matters
The UI builder HTML element <ui-bind>
Key element attributes and how to use them
A deep dive into ui-binding commands
Practical examples of ui-bind commands in action

Whether you’re new to Total.js or looking to enhance your skills, this video provides the essential knowledge to start building dynamic UIs with ease.

🔔 Don’t forget to like, subscribe, and hit the notification bell to stay updated with the latest tutorials!

Total.js Enterprise: Total.js Enterprise
GitHub: Total.js on GitHub
Stack Overflow: Total.js questions on Stack Overflow
Telegram: Total.js Telegram group
WhatsApp: Total.js WhatsApp group
Twitter: Total.js on Twitter
Facebook: Total.js on Facebook
LinkedIn: Total.js LinkedIn group
Reddit: Total.js subreddit
Discord: Total.js Discord server
Slack: Total.js Slack channel

Total.js UI :Two Beginner Projects to understand Paths and Data Binding

Louis Bertson — Tue, 13 Aug 2024 14:35:12 +0000

Introduction

Total.js UI is a lightweight yet powerful framework designed to create dynamic user interfaces with ease and flexibility. It stands out for its intuitive approach, allowing data to be linked to interface elements without heavy configurations or extensive lines of code. This tutorial aims to guide you through two small projects to help you understand and master the concepts of paths and ui-bind in Total.js UI.

Paths and <ui-bind> are fundamental elements for linking data to user interface elements. Paths are fundamental components that act as representational addresses to data or functions/actions. They allow you to access, manipulate, and observe data effectively within your application, while <ui-bind> dynamically binds this data to the interface, ensuring real-time updates. Mastering these concepts will enable you to create responsive and interactive web applications effortlessly.
Now, let's move on to the projects we'll cover in this tutorial. Here's a brief overview of the table of contents:

1 Prerequisites
2 Project 1: User Information Update Form
3 Project 2: To-Do List

1. Prerequisites

Before diving into this tutorial on Total.js UI, ensure you have the following prerequisites in place to effectively follow along and complete the projects:

1 Basic Knowledge of HTML and JavaScript:

HTML: You should be comfortable with HTML tags, attributes, and basic page structure. Understanding how to create forms, lists, and other common elements is crucial.
JavaScript: Familiarity with JavaScript fundamentals, including variables, functions, and event handling, is necessary. You should be able to write and debug simple scripts that interact with the DOM.
jQuery: Total.js UI integrates jQuery to handle DOM manipulation, event handling, and Ajax, avoiding the need to reinvent the wheel with a new alternative. This ensures a stable, feature-rich experience for building dynamic interfaces. We are not using too much jquery but it is better you have some background of it!

2 Access to a Modern Web Browser:

Web Browser: Use a modern web browser such as Google Chrome, Mozilla Firefox, or Microsoft Edge. These browsers support the latest web technologies and provide developer tools for debugging and testing your projects.

3 Code Editor:

Code Editor: A good code editor is essential for writing and editing your code. Recommended options include:
- Visual Studio Code: A powerful, free code editor with robust features and extensions.
- Sublime Text: A versatile and lightweight text editor with a clean interface.
- Atom: An open-source editor with a user-friendly interface and customizable features.

4 Basic Knowledge of CSS:

CSS: Understanding CSS will help you style your web pages and control the layout of your elements. You should know how to use selectors, properties, and values to apply styles to HTML elements.

5 Internet Connection:

Connectivity: An active internet connection is required to access the CDN links for Total.js UI and any other external libraries used in the projects. Ensure your connection is stable for smooth downloading and integration of resources.

6 Basic Understanding of Data Binding Concepts:

Data Binding: While we will explain the concepts of paths and <ui-bind> in detail, having a foundational understanding of data binding in web development will help you grasp these concepts more efficiently. Data binding involves synchronizing data between the model and the view, and is crucial for creating dynamic and interactive web applications.

7 Basic Knowledge of jQuery:

jQuery: The projects use jQuery for simplifying DOM manipulation and handling events. Basic knowledge of jQuery, including how to select elements, handle events, and manipulate the DOM, will be beneficial. If you’re unfamiliar with jQuery, you might want to review its documentation or tutorials.

By ensuring you meet these prerequisites, you’ll be well-prepared to follow the tutorial and effectively implement the concepts of paths and <ui-bind> in Total.js UI through the provided projects.

2. Project 1: User Information Update Form

Project Overview:

In this first project, we will create a simple form to update user information, such as name and age. The goal is to demonstrate how paths and <ui-bind> can be used to link user data to the interface and display it in real-time when updated.

Key Features:

Using paths: Paths are used to connect the input fields to the user information values (name and age). When a user enters information into the form, these data are directly stored in the associated paths.
Applying <ui-bind>: <ui-bind> is used to display updated data in real-time. As soon as user information is modified in the form, <ui-bind> automatically updates the display, showing the new values without requiring a page refresh.

This project showcases the efficiency of Total.js UI for creating dynamic interfaces where data and display remain consistently synchronized.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TotalJsUi Test</title>
    <script src="//cdn.componentator.com/spa.min@19.js"></script>
    <link rel="stylesheet" href="//cdn.componentator.com/spa.min@19.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
</head>
<body>
    <div class="container">
    <h1>Update User Information</h1>
    <form id="userInfoForm">
        <label for="userName">Name:</label>
        <input type="text" id="userName" placeholder="Enter your name">

        <label for="userAge">Age:</label>
        <input type="text" id="userAge" placeholder="Enter your age">
    </form>

    <h2>Summary:</h2>
    <p>Name: <ui-bind path="user.name" config="text"></ui-bind></p>
    <p>Age: <ui-bind path="user.age" config="text"></ui-bind></p>
    </div>
    <script>
        // Initialize user data with SET
        SET('user.name', '');
        SET('user.age', '');
         var nameinput = $('#userName');
         var ageinput = $('#userAge');

        // Function to update user information
       $('input#userName').on('input', function(event) {

            SET('user.name', $(this).val());

        });
         $('input#userAge').on('input', function(event) {

            SET('user.age', $(this).val());

        });
    </script>
</body>
</html>

Result preview

This project demonstrates how paths and <ui-bind> enable the creation of dynamic interfaces with Total.js UI, where the display remains constantly synchronized with the data.

3. Project 2: To-Do List

Project Overview:

In this second project, we will build a dynamic To-Do List. The goal is to demonstrate how paths can be manipulated to manage a list of items, and how <ui-bind> can be used to make tasks interactive, with actions such as marking a task as completed or removing it.

Key Features:

Manipulation of paths: paths are used to manage the list of tasks. Each task is stored in an array linked to a path (tasks), which facilitates adding, modifying, and removing tasks.
Usage of <ui-bind>: <ui-bind> is used to display the list of tasks and to allow direct interactions with them. Users can mark a task as completed or remove it, and these actions are immediately reflected in the interface thanks to the updates to the paths.

Here is the code for this project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="//cdn.componentator.com/spa.min@19.js"></script>
    <link rel="stylesheet" href="//cdn.componentator.com/spa.min@19.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <style>
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        #taskForm {
            display: flex;
            gap: 10px;

        }
        #taskInput {
            flex: 1;
            border-radius: 10px;

        }
        #addTaskButton, .complete, .remove {
            font-size: 0.9em;
            padding: 5px 10px;
        }
        #addTaskButton {
            white-space: nowrap;
        }
        .remove {
            background-color: red;
            color: white;
            border-color: white;
        }
        .complete {
            color: white;
            border-color: white;
        }
        article {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 10px;
        }

        article.disabled { opacity: .5; background-color: #ddd; }
    </style>
</head>
<body>
    <div class="container">
        <h1>To do list</h1>
        <div id="taskForm">
            <input type="text" id="taskInput" placeholder="New task">
            <button type="button" id="addTaskButton">Add Task</button>
        </div>
        <div id="taskList">
            <ui-bind path="tasks" config="template">
                <template>
                    {{foreach task in value }}
                    <article class="{{ if task.completed }} disabled {{ fi }}">
                        <span>{{ task.text }}</span>
                        <div>
                            <button class="complete">{{ if task.completed }} Reopen {{ else }} Close{{ fi }} </button>
                            <button class="remove">Remove</button>
                        </div>
                    </article>
                    {{end}}
                </template>
            </ui-bind>
        </div>
    </div>
    <script>
        // Initialize the tasks list with SET
        var tasks = [
            { text: 'Learn Total.js UI', completed: false },
            { text: 'Build a To-Do List', completed: false },
        ];
        SET('tasks', tasks);

        // Add a new task
        $('#addTaskButton').on('click', function() {
            var taskText = $('#taskInput').val();
            if (taskText.trim() !== '') {
                tasks.push({ text: taskText, completed: false });
                SET('tasks', tasks);
                $('#taskInput').val('');
            }
        });

        // Complete or remove a task
        $('#taskList').on('click', function(event) {
            var target = event.target;
            if (target.classList.contains('complete') || target.classList.contains('remove')) {
                var article = target.closest('article');
                var index = Array.from(article.parentNode.children).indexOf(article);
                if (target.classList.contains('complete')) {
                    tasks[index].completed = !tasks[index].completed;
                    SET('tasks', tasks);
                } else if (target.classList.contains('remove')) {
                    tasks.splice(index, 1);
                    SET('tasks', tasks);
                }
            }
        });
        $('body').keyup(function (event) {
            if (event.keyCode === 13)
                $('#addTaskButton').click();
        });
    </script>
</body>
</html>

Result preview

This project illustrates how to use paths to manage a dynamic list and how <ui-bind> can be employed to create interactive interfaces with Total.js UI.

Conclusion

In this tutorial, we explored two small projects that highlight the use of paths and <ui-bind> in Total.js UI. These concepts are fundamental for creating reactive and dynamic interfaces.

Importance of Paths: Paths allow you to link data to user interface elements. They are essential for managing states and real-time updates.
Usage of <ui-bind>: The <ui-bind> is a powerful feature of Total.js UI that synchronizes data with the user interface, providing a smooth and interactive experience.

By mastering these concepts through projects like the user information update form and the To-Do List, you have gained a solid understanding of the basics of Total.js UI.

I encourage you to continue exploring Total.js UI by experimenting with other projects. The more familiar you become with these concepts, the better you'll be able to create complex and efficient applications. Feel free to test different configurations, combine features, and explore the Total.js UI documentation to deepen your knowledge.

Beginner Guide to Total.js UI: #02 Understanding Paths

Louis Bertson — Wed, 07 Aug 2024 22:03:06 +0000

Welcome back to our series on mastering Total.js UI! If you’ve been following along, you should have already completed the installation and setup of Total.js UI, giving you a solid foundation to work with. In this post, we’re diving into one of the most crucial concepts in Total.js UI: Paths.

Paths are like the roadmap of your application. They help you navigate through your data, manage functions, and control actions with precision. If you’re a front-end developer coming from other frameworks like React, Angular, or Vue, you’ll find that paths in Total.js UI offer a unique and powerful way to handle your application's state and behavior.

This blog post is aimed at developers who are just getting started with Total.js UI. Whether you’re transitioning from other popular frameworks or are entirely new to the concept, this guide will walk you through the essentials of paths in Total.js UI, ensuring you’re well-equipped to start building dynamic and interactive web applications.

What are Paths in Total.js UI?

In Total.js UI, paths are akin to addresses in a real-world postal system. Just as you use an address to send a letter to the correct location, paths in Total.js UI guide your data and functions to their correct destination within your application. They are the foundation for creating organized and maintainable code, allowing you to easily access and modify data.

For example, imagine you're sending a package. You need the correct address (path) to ensure it arrives at the right place. Similarly, in Total.js UI, paths help you locate and manipulate specific pieces of data or functions. Without paths, managing data in your application would be like trying to deliver a package without an address—nearly impossible.

Types of Paths

Paths in Total.js UI come in various forms, each suited to different scenarios. Understanding these types is essential for effectively managing data and actions in your applications.

Absolute Paths

Absolute paths are the full addresses of your data or functions. They point directly to the exact location, leaving no room for ambiguity.

Real-Life Example:
Think of absolute paths like mailing a letter to a specific house number in a city. No matter where you are, the letter will always reach the intended house because the address is complete and specific.

Code Example:

SET('users.form.age', 30);

Here, users.form.age is an absolute path that directly references the age property in the users.form object. No matter where in your application you are, this path will always lead to the age property of the users.form.

Relative Paths

Relative paths are like giving directions relative to a landmark rather than a specific address. They are defined concerning the current context or scope, making them more flexible and dynamic.

Real-Life Example:
Imagine giving directions by saying, "Turn left at the grocery store," rather than specifying the exact street name. The directions change depending on where the person is starting, but they still lead to the intended destination.

Code Example:

SET('?.age', 30);

In this case, ?.age is a relative path that depends on the current scope. The exact location of age depends on the context in which this code is executed.

Explicit and Implicit Paths

Paths can be either explicitly declared or implicitly inferred, depending on how they are defined in your code.

Explicit Paths

Explicit paths are those you define directly in your code, making your intentions clear and your code easy to read.

Real-Life Example:
Think of explicitly writing down an address on an envelope before sending a letter. It’s clear, deliberate, and leaves no room for confusion.

Code Example:

<script>
    var mypath = 'Hello world';
</script>

Here, mypath is an explicitly declared path. You can easily reference this path throughout your script, just as you would use a clearly written address to send a letter.

Implicit Paths

Implicit paths are inferred from DOM elements, typically using attributes like id. They are automatically available, making them convenient but sometimes less clear.

Real-Life Example:
This is like relying on a known landmark to identify a location, such as "the house with the red door." While convenient, it might not be as clear to someone unfamiliar with the area.

Code Example:

<li id="mypath"></li>

In this case, mypath is an implicitly declared path, available for use without needing an explicit declaration in your JavaScript.

Scoped Paths

Scoped paths use the ? character to refer to data within the nearest enclosing scope. This allows for concise and context-sensitive paths.

Real-Life Example:
Imagine you’re at a large family gathering, and someone says, “Could you pass the salt?” You know they mean the salt shaker on the nearest table, not one in the kitchen or elsewhere. The context determines the scope.

Code Example:

<ui-plugin path="obj">
    <ui-bind path="?.message" config="text"></ui-bind>
</ui-plugin>

<script>
    var obj = { message: 'Hello world' };
</script>

Here, ?.message is a scoped path. It dynamically refers to the message property within the current scope defined by the ui-plugin.

Temporary Paths

Temporary paths, prefixed with %, are used for transient data that doesn’t need to persist. They are perfect for short-lived data such as user inputs or temporary calculations.

Real-Life Example:
Consider a Post-it note. You jot down a quick reminder, but it’s not meant to be kept forever. It’s temporary, just like data stored in a temporary path.

Code Example:

SET('%search', 'example search');

This creates a temporary path for search, storing it in a transient context. This path is perfect for data that doesn’t need to persist beyond the current session or interaction.

Using GET and SET with Paths

Paths in Total.js UI work hand-in-hand with the GET and SET methods, which allow you to retrieve or update data stored at specific paths.

SET Method

The SET method is like mailing a package to a specific address—you are sending data to a specific path within your application.

SET('users.form.age', 30);

In this example, SET assigns the value 30 to users.form.age. It’s akin to delivering a package directly to someone’s house.

GET Method

The GET method is like checking your mailbox—you retrieve the data that has been sent to a specific path.

console.log(GET('common.page'));

This retrieves the data stored at common.page and logs it to the console, just like reading a letter that arrived in your mailbox.

Watching Changes in Paths

The WATCH method in Total.js UI allows you to observe changes in specific paths and react to them in real-time. It’s like having a security camera that alerts you whenever someone arrives at your door—you get notified whenever there’s a change.

WATCH('path.to.model', function(path, value, type) {
    console.log('NEW VALUE', value);
});

In this example, the WATCH method monitors changes at path.to.model and executes a function whenever the value changes, logging the new value.

Video Tutorial

To complement this blog post, we’ve prepared a video tutorial that covers everything you need to know about paths in Total.js UI. In the video, we walk you through each concept with practical examples, making it easier to understand and apply these ideas in your projects.

This video is an excellent resource for visual learners and those who prefer to see the concepts in action. Don't forget to subscribe to our YouTube channel for more tutorials in this series!

Conclusion

Paths are the backbone of data management in Total.js UI. By understanding the different types of paths and how to use them, you’ll be able to navigate through your data with ease, making your applications more dynamic and responsive.

In this post, we covered the basics of paths, including absolute, relative, explicit, implicit, scoped, and temporary paths. We also explored how to use GET and SET to manipulate data and how to use WATCH to observe changes in real-time.

Mastering paths will open up new possibilities for your Total.js UI projects, giving you the tools you need to create robust, maintainable applications. In the next post, we’ll dive deeper into binding and how it interacts with paths to create even more powerful UIs. Stay tuned!

Beginner Guide to Total.js UI: #01 Installation and Setup

Louis Bertson — Mon, 05 Aug 2024 09:14:42 +0000

Introduction

Welcome to the first post in our series on mastering Total.js UI. In this series, we will guide you through the fundamentals of Total.js UI, empowering you to create robust and dynamic Single Page Applications (SPAs) with ease. Whether you are a complete beginner or an experienced developer looking to expand your toolkit, this guide is designed to help you get started with Total.js UI from scratch.

In this initial post, we will focus on the prerequisites and the installation process of Total.js UI. By the end of this guide, you will have a working environment ready to explore and develop with Total.js UI.

What is Total.js UI?

Total.js UI is a powerful client-side library designed to simplify the creation of reusable UI components. It offers a comprehensive set of features tailored for building SPAs, making it a versatile choice for front-end development. Total.js UI stands out due to its ease of use, minimal dependencies, and a rich collection of pre-built components.

Why Choose Total.js UI?

Here are a few reasons why Total.js UI might be the perfect fit for your next project:

Simplicity: Total.js UI is straightforward to use, even for beginners. Its path-based system for managing data and actions reduces complexity.
Reusability: The library focuses on creating reusable web components, ensuring that your code is modular and maintainable.
Lightweight: With minimal dependencies and small file sizes, Total.js UI ensures that your applications remain fast and responsive.
Comprehensive Components: It includes a variety of UI components and icons that you can integrate into your projects effortlessly.
Community and Support: Total.js UI has an active community, free online chat support, and commercial support options to help you whenever needed.

Prerequisites

Before diving into the installation process, ensure that you have the following prerequisites in place:

Basic Knowledge of HTML, CSS, and JavaScript: Familiarity with these technologies is essential as Total.js UI builds upon them.
A Code Editor: Use any code editor you are comfortable with. Popular choices include Visual Studio Code, Sublime Text, and Atom.
A Web Browser: Any modern web browser will work. Chrome, Firefox, and Edge are good options.

Installing Total.js UI

The installation of Total.js UI is straightforward and can be done in a few simple steps. You have two main options for installation: using a Content Delivery Network (CDN) or downloading the library files directly.

Option 1: Using a CDN

Using a CDN is the easiest and quickest way to get started with Total.js UI. It requires no additional setup and ensures that you are always using the latest version of the library.

Include the JS and CSS Files: Add the following script and link tags to the <head> section of your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>__Total.js UI__ Example</title>
    <script src="https://cdn.componentator.com/spa.min@20.js"></script>
    <link rel="stylesheet" href="https://cdn.componentator.com/spa.min@20.css">
</head>
<body>
    <!-- Your content here -->
</body>
</html>

These tags load the Total.js UI JavaScript and CSS files from the CDN, making them available for use in your project.

Option 2: Downloading the Library Files

If you prefer to have a local copy of the library files, you can download them from the official website.

Download the Files: Visit the Total.js UI library on Github and download the latest versions of spa.min.js and spa.min.css.
Include the Files in Your Project: Place the downloaded files in a directory within your project, for example, in a folder named libs.
Reference the Files: Add the following script and link tags to the <head> section of your HTML file, adjusting the paths as necessary:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>__Total.js UI__ Example</title>
    <script src="libs/spa.min.js"></script>
    <link rel="stylesheet" href="libs/spa.min.css">
</head>
<body>
    <!-- Your content here -->
</body>
</html>

Verifying the Installation

After including the Total.js UI library in your project, you can verify the installation by adding a simple UI component. Let's add a basic component to ensure everything is working correctly.

Create a Simple Component: Add the following HTML code inside the <body> tag of your HTML file:

<ui-bind path="badgeValue" config="text"></ui-bind>

<script>
    SET('badgeValue', 'Hello __Total.js UI__!');
</script>

Run Your Project: Open your HTML file in a web browser. You should see a badge displaying the text "Hello Total.js UI!".

Video Tutorial

To complement this blog post, we’ve prepared a video tutorial that covers everything you need to know about paths in Total.js UI. In the video, we walk you through each concept with practical examples, making it easier to understand and apply these ideas in your projects.

This video is an excellent resource for visual learners and those who prefer to see the concepts in action. Don't forget to subscribe to our YouTube channel for more tutorials in this series!

Conclusion

Congratulations! You have successfully set up Total.js UI in your project. This marks the beginning of your journey with Total.js UI, a powerful library that will simplify the creation of dynamic and responsive SPAs.

In this first post, we covered the prerequisites and the installation process, ensuring that your environment is ready for development. In the upcoming posts, we will delve deeper into the various features of Total.js UI, starting with understanding paths, which are fundamental to managing data and actions within your application.

Stay tuned as we explore more about Total.js UI and help you become an expert in building modern web applications. Happy coding!

Total.js UI Documentation: https://docs.totaljs.com/components
Total.js Enterprise: Total.js Enterprise
GitHub: Total.js on GitHub
Stack Overflow: Total.js questions on Stack Overflow
Telegram: Total.js Telegram group
WhatsApp: Total.js WhatsApp group
Twitter: Total.js on Twitter
Facebook: Total.js on Facebook
LinkedIn: Total.js LinkedIn group
Reddit: Total.js subreddit
Discord: Total.js Discord server
Slack: Total.js Slack channel

Achieve more with Total.js: introducing Total.js Enterprise

Louis Bertson — Thu, 11 Jul 2024 01:43:51 +0000

Staying ahead of the curve requires the right tools and a platform that understands your needs. That's why we are thrilled to introduce our latest video on Total.js Enterprise, designed to help developers achieve more. Whether you're a company, a seasoned developer or just starting, Total.js Enterprise offers a comprehensive suite of tools to elevate your projects and streamline your workflow.

Discover the Total.js Ecosystem

At the heart of our offering is the Total.js Framework, a powerful, open-source solution that has been empowering developers to create fast, scalable, and secure applications with ease. Imagine building websites, mobile friendly apps, and complex web applications with unparalleled flexibility and robustness. The Total.js Platform builds on this strength, providing a range of tools designed to enhance your development process and deliver exceptional digital experiences.

Total.js Enterprise

Total.js Enterprise takes everything you love about the Total.js Platform and amplifies it. This exclusive package is tailored for developers who demand the best in quality and flexibility. Want to know more about the premium open-source content, unlimited use, and 24/7 consulting services? Our video dives deep into how Total.js Enterprise can transform your development process and save you time and resources.

An Investment in Innovation

Total.js Enterprise is an investment that pays off by saving you time and resources, allowing you to focus on what you do best—creating innovative applications. Curious about how this cost-effective solution can benefit your projects? I cover all the details in the video.

Get Started Today

Getting started with Total.js Enterprise is simple and straightforward. Watch the video to learn how you can join a community of innovators and gain instant access to premium content. See firsthand how Total.js Enterprise can empower you to achieve more.

Watch My Video

Ready to see Total.js Enterprise in action? Watch my latest video to discover how this powerful tool can elevate your development experience. Don't miss out on this opportunity to take your projects to the next level.

Conclusion

From the robust foundation of the Total.js Framework to the comprehensive capabilities of the Total.js Platform, and finally to the premium offerings of Total.js Enterprise, our mission is to empower you to achieve more. Join me on this journey to innovation and elevate your development projects with Total.js Enterprise.
Visit our website www.totaljs.com/enterprise to learn more and watch the video to see how you can achieve more with Total.js. Share your thoughts in the comments below and let’s embark on this journey together!

Total.js Enterprise: Total.js Enterprise
GitHub: Total.js on GitHub
Stack Overflow: Total.js questions on Stack Overflow
Telegram: Total.js Telegram group
WhatsApp: Total.js WhatsApp group
Twitter: Total.js on Twitter
Facebook: Total.js on Facebook
LinkedIn: Total.js LinkedIn group
Reddit: Total.js subreddit
Discord: Total.js Discord server
Slack: Total.js Slack channel

Enhancing Your Applications with Total.js v5 Proxy Functionality

Louis Bertson — Wed, 03 Apr 2024 09:58:15 +0000

In the rapidly evolving field of web development, microservices are prevalent and their critical importance of high-performing and reliable proxy servers cannot be overstated. My previous exploration into Total.js, a robust framework for web applications, uncovered its powerful proxy creation capabilities. Since then, Total.js has released version 5, which brings significant updates and improvements to its proxy functionality. Today, I'm excited to delve into these updates, demonstrating how Total.js continues to ease and refine the development process.

Reflecting on the Past.

Before diving into the latest updates, let's revisit why Total.js became my favorite tool for creating proxy servers. Its one-line setup, dependency-free nature, and ease of learning stood out amidst a sea of frameworks. Total.js not only promised but also delivered a lightweight, strong, real-time, and reliable solution for my proxy server needs.

What's New in Total.js v5 Proxy Functionality?

Total.js v5 has introduced enhanced proxy functionalities, addressing bugs and expanding capabilities to offer more control and flexibility to developers. Here's what's new:

Enhanced control with new methods

Check Functionality: The new .check() method allows developers to execute custom logic to determine if a request should be proxied. This adds an extra layer of control, enabling use cases like conditional proxying based on request properties.
Pre and Post Processing: With .before() and .after() methods, developers can now manipulate requests before they're sent and responses before they're returned to the client. This is perfect for adding custom headers, logging, or any form of request/response transformation.
Removing Proxy Routes: The .remove() method provides the ability to dynamically remove proxy routes, offering flexibility in managing proxy behaviors at runtime.

Refined Request Handling with Copy Types

The .copy() method has been updated to support three modes of operation - none, replace, and extend - providing finer control over how query strings are handled:

None: Retains the original query string of the proxied request.
Replace: Clears the original query string, proxying the request without it.
Extend: Appends the original query string to the proxied path, allowing for extended functionality.

Upgrading Your Proxy Server in Total.js v5

Upgrading your proxy server to leverage these new features is simple. Here's a quick guide to get you started:

// Define a proxy route with advanced control
PROXY('/cl/', 'https://totaljs.com')
    .check(function(ctrl) {
        // Add your custom logic here
        return true; // Return true to proceed with proxying
    })
    .before(function(uri, ctrl) {
        console.log(`Proxying request: ${uri}`);
        // Modify the request URI or the controller as needed
    })
    .after(function(response) {
        console.log('Received response:', response);
        // Manipulate the response before sending it back to the client
    });

// Dynamically remove the proxy route if needed
// PROXY('/cl/', 'https://totaljs.com').remove();

Adapting to Use Cases with Copy Modes

Depending on your specific use case, you can choose how the proxy handles query strings:

// Example usage of .copy() with different modes
PROXY('/cl/', 'https://yourdomain.com').copy('replace'); // Use 'none' or 'extend' as needed

Understanding the `.copy()` method in detail

The .copy() method in Total.js v5 allows developers to specify how the proxy server handles the original request's query string when forwarding to the target URL. This method supports three distinct modes: none, replace, and extend. Let's explore each mode with detailed examples to illustrate their use cases:

1. `none`

The none mode tells the proxy to ignore the original query string entirely. This is useful when you want to proxy the request but don't need to pass any query parameters to the target URL.

Example:

PROXY('/cl/', 'https://yourdomain.com').copy('none');

Request: GET /cl/?q=search
Proxied as: https://yourdomain.com/

In this mode, even if the original request contains query parameters (?q=search), they are not forwarded to the target URL.

2. `replace`

The replace mode is used when you want to replace the path of the original request with the proxy path, but without carrying over the query string.

Example:

PROXY('/cl/', 'https://yourdomain.com').copy('replace');

Request: GET /cl/?q=search
Proxied as: https://yourdomain.com/
Request: GET /cl/something/?q=search
Proxied as: https://yourdomain.com/something/

In replace mode, the path after the proxy endpoint (/cl/) is appended to the target URL. However, the query string from the original request is not included.

3. `extend`

The extend mode combines the path and query string from the original request and appends them to the target URL. This is particularly useful for APIs where you need to maintain the integrity of the original request.

Example:

PROXY('/cl/', 'https://yourdomain.com').copy('extend');

Request: GET /cl/?q=search
Proxied as: https://yourdomain.com/?q=search
Request: GET /cl/something/?q=search
Proxied as: https://yourdomain.com/something/?q=search

Here, both the path and query parameters of the original request are preserved and appended to the target URL, making it an ideal choice for scenarios where every part of the request is essential for the recipient.

Choosing the Right Mode

Selecting the appropriate mode depends on your specific use case:

Use none when the target URL does not require any query parameters from the original request.
Opt for replace when you need to maintain the path but not the query parameters.
Choose extend when both the path and query parameters are crucial for the target URL to process the request correctly.

Understanding these modes and their applications ensures that you can tailor the proxy behavior to fit your application's needs precisely, enhancing both functionality and user experience.

Total.js v5 significantly expands the capabilities of its proxy functionality, providing developers with more tools and options to create efficient, flexible, and powerful proxy servers. Whether you're building microservices, handling complex routing, or simply need a proxy for development purposes, Total.js v5 offers the features and flexibility needed to get the job done.

Explore these new features and see how they can enhance your Total.js applications. Happy coding!

Join Total.js Telegram community

Total.js Platform is here

Louis Bertson — Wed, 03 Apr 2024 09:56:22 +0000

Effortless Application Development with Total.js Platform

Introduction

Total.js offers a streamlined approach to application development, focusing on minimalism without compromising power. One of its most compelling features is the comprehensive ecosystem it provides, along with minimal dependencies, making it an attractive choice for developers looking to build robust applications with ease.

The All-In-One Nature of Total.js

Total.js Platform simplifies the development process by offering everything developers need within the framework itself. With just a few simple commands (npm i total4 or npm i total5), you can kickstart your Total.js project without worrying about managing numerous dependencies.

Exploring Key Total.js Applications

Total.js Code Editor

The Total.js Code Editor is a server-side development tool tailored for creating web applications within a web browser. It facilitates real-time collaboration and offers a plethora of features, making it an invaluable asset for accelerating development workflows.
Github: totaljs/code

Total.js SuperAdmin

SuperAdmin simplifies Node.js application management on Linux servers. It seamlessly integrates with NGINX for reverse proxying and Let's Encrypt for SSL certificate generation, providing a hassle-free experience for deploying Total.js applications.
Github: totaljs/superadmin

Total.js CMS

Total.js CMS offers a clean and intuitive content management solution for websites. Built on a NoSQL embedded database with no external dependencies, it empowers users to manage commercial or personal websites effortlessly.
Github: totaljs/cms

Total.js Flow

Total.js Flow is a friendly, modern, and straightforward Visual Programming Interface designed for Low-code Development. Accessible through a web browser, this tool seamlessly integrates, processes, and transforms various events and data in real time.

GitHub: totaljs/flow

Total.js UI Builder

Total.js UI Builder is tailored for creating UI applications across a spectrum of use cases, including classic web applications, dashboards, flowboards, parts, hybrid mobile apps, HMI apps, and more.

GitHub: totaljs/uistudio

Integration Tools

OpenAuth: Lightweight OAuth 2.0 integrator for obtaining user profiles from various services.
GitHub: totaljs/openauth
OpenSync: Synchronization HTTP server for handling external requests and data dissemination.
GitHub: totaljs/opensync
OpenMail: SMTP sender for creating and managing multiple SMTP profiles with HTML templates.
GitHub: totaljs/openmail
OpenFiles: File storage solution for storing files from 3rd party apps.
GitHub: totaljs/openfiles
OpenLogger: Lightweight logging solution for storing logs from 3rd party apps.
GitHub: totaljs/openlogger
OpenTemplates: App for creating HTML templates printable as PDF/DOCX/JPG files.
GitHub: totaljs/opentemplates
OpenReports: App for generating simple reports from PostgreSQL databases.
GitHub: totaljs/reports
BannerSystem: Open-source banner system for portals and websites.
GitHub: totaljs/bannersystem
Extensible: HTTP server for handling dynamic Total.js extensions.
GitHub: totaljs/extensions

Other Useful Total.js Apps

Todomator

Todomator is a task manager designed for small teams. With features like time tracking, REST API support, and open-source licensing, it offers a robust solution for project management.
GitHub: totaljs/todomator

OpenPlatform

OpenPlatform serves as an enterprise-ready platform for running, integrating, and managing multiple 3rd party web applications. It provides a simple container for users and applications, independent of client-side/server-side technologies.
GitHub: totaljs/openplatform

Conclusion

Total.js stands out as a powerful yet minimalist framework for application development. With its all-in-one nature and comprehensive ecosystem of applications and tools, it streamlines the development process and empowers developers to build robust web applications efficiently. Explore Total.js today and experience effortless application development firsthand.

The Art of File Routing

Louis Bertson — Mon, 11 Dec 2023 23:31:44 +0000

In the world of web development, efficiently handling custom files like images, documents, and uploads is a challenge that every developer faces. Total.js, a cutting-edge Node.js framework, offers a game-changing solution with its ROUTE(FILE ...) functionality. In this article, we'll delve into the intricacies of handling custom files in Total.js and highlight its advantages over common approaches used in other popular web frameworks.

Embracing the Art of Uploading Files

File uploading is a pivotal aspect of modern web applications, but it can often be a hassle to manage. Total.js streamlines this process using the ROUTE('POST /upload/', myupload, ['upload'], 1024) method. Let's dissect this method with an illustrative example:

// File: /controllers/upload.js

exports.install = function() {
    ROUTE('POST /upload/', myupload, ['upload'], 1024); // 1024 kB = max. request size
};

function myupload() {
    var self = this;

    // The "self.files" array encapsulates HttpFile objects
    // Each HttpFile object represents an uploaded file
    console.log(self.files);

    // Implement your custom processing logic here

    self.success(); // Signal successful processing
}

In this snippet, the myupload function leaps into action when a POST request targets the /upload/ route. The 'upload' flag hints that this route handles file uploads, while 1024 determines the maximum request size in kilobytes.

The Art of File Routing

Total.js reinvents the concept of file routing by optimizing performance and dynamically processing static files. This capability finds its expression through the ROUTE('FILE ...') syntax.

Empowering All Files in a Directory

Total.js unleashes a new paradigm for managing files within specific directories:

exports.install = function() {
    ROUTE('FILE /documents/*.*', handle_documents);
    ROUTE('FILE /images/*.jpg',  handle_images);
};

function handle_documents(req, res) {
    // Your genius in handling document files here
    res.file('/path/to/file.pdf'); // Deliver the requested file
}

function handle_images(req, res) {
    // Unleash your magic with image files
    // Modify or process the image as needed
    // Then, use res.file() to serve the customized image
}

In this excerpt, the handle_documents and handle_images functions spring to life when requests for document and image files are sent. The res.file() method plays the role of delivering the desired files to the awaiting client.

Resizing Images: A Total Transformation

Total.js doesn't stop at traditional file handling; it redefines the game with its image resizing prowess. The RESIZE(...) function is a star player in this spectacle:

exports.install = function() {
    RESIZE('/gallery/*.jpg', resize);
};

function resize(image) {
    image.resize(120, 120); // Transform the image to 120x120 pixels
    image.quality(90);      // Set image quality at 90%
    image.minify();         // Shrink the image size
    // The modified, sleek image rests in the temporary directory
}

In this revelation, the resize function takes the stage when a .jpg image request dances into the /gallery/ realm. With finesse, it resizes, optimizes quality, and miniaturizes the image. The revamped image then takes its place in the temporary directory, ready for delivery.

Unveiling the Revolution

Total.js stands as a titan among web frameworks, delivering an unmatched experience in handling custom files. Its innovative approach redefines how we upload, route, and manipulate files. By exploiting the ROUTE(FILE ...) and RESIZE(...) methods, developers are empowered to efficiently process and present diverse files. Total.js isn't just a framework; it's a revolution that takes file handling to a level previously unseen in the web development landscape.

Unleashing SuperAdmin: A Total.js Game-Changer for Node.js Process Management

Louis Bertson — Tue, 05 Dec 2023 10:28:09 +0000

🚀 Hey dev.to community! Today, we're thrilled to introduce you to SuperAdmin – a powerful Node.js process management tool that's set to revolutionize the way you handle web applications, REST services, and websites built with Total.js.

Why SuperAdmin?

🌐 Total.js Brilliance

SuperAdmin is born out of the Total.js ecosystem, bringing with it the reliability and efficiency that developers have come to love. Its seamless integration with Total.js makes it a go-to solution for managing and monitoring web projects.

🛡️ Data Security on Your Servers

Worried about data security? SuperAdmin takes care of that! All your data is stored securely on your servers, putting you in control and ensuring the privacy of your sensitive information.

🖥️ User-Friendly Interface and Low Hardware Requirements

No need for a tech wizardry degree to navigate SuperAdmin. The user-friendly interface makes process management a breeze. Plus, it comes with low hardware requirements, ensuring efficiency without breaking the bank.

Dive Deeper with SuperAdmin

🎥 Watch the Introduction Video:

🔍 Explore Features: [https://totaljs.com/superadmin]

How to Get Started

Getting started with SuperAdmin is as easy as 1-2-3! Follow these steps:

Install SuperAdmin using instructions.
Configure your projects effortlessly with the intuitive UI.
Watch your Node.js projects soar to new heights!

Join the SuperAdmin Community

Let's build a vibrant community of SuperAdmin enthusiasts! Share your experiences, ask questions, and connect with fellow developers on Telegram.

Final Thoughts

SuperAdmin isn't just a tool; it's a game-changer for Node.js developers. Elevate your development workflow, enhance security, and embrace the future of process management.

Ready to supercharge your projects? Watch the video and embark on the SuperAdmin journey today!

🚀 SuperAdmin: Total.js Power in Your Hands!

DEV Community: Louis Bertson

Total.js v5: Schemas and Actions.

Total.js v5: Schemas and Actions.

Understanding schemas and actions in Total.js

Getting Started with Schemas in Total.js

1. Setting Up a Basic Schema

2. Linking Schemas to Routes

Standalone actions

1. Creating a Standalone Action

2. Connecting standalone actions to routes

Using ACTION()

Example

Advanced: Calling Schema Actions Within Other Schema Actions

Example: Nested Schema Actions

Advanced usage

Key Takeaways and Tips

QueryBuilder in Action Part 1

Getting Started: Exploring QueryBuilder in Total.js

Database Support and Implementations

Setting Up QueryBuilder

Setting up the Database

Basic QueryBuilder Actions with Practical Examples

Practical Usage Cases: QueryBuilder in Action

Conclusion

Performance Testing: Total.js vs. NestJS

Why Compare Total.js and NestJS?

Test Methodology: Fair and Accurate Comparisons

Hardware and Testing Environment

Step-by-Step Code Setup

1. Setting Up Total.js v4

2. Setting Up Total.js v5

3. Setting Up NestJS

Running the Performance Test

Step 1: Create a test folder:

Step 2: Initialize the project and install dependencies:

Step 3: Create the run.js file:

Step 4: Run the performance test:

Performance Results

Project Size Comparison

Startup Time Comparison

Key Takeaways

Why Choose Total.js?

Conclusion

Total js UI #3 Data binding part 1

Total js UI #3 Data binding part 1

In this video, you'll learn:

Total.js UI :Two Beginner Projects to understand Paths and Data Binding

Introduction

1. Prerequisites

2. Project 1: User Information Update Form

Project Overview:

Key Features:

Code:

Result preview

3. Project 2: To-Do List

Project Overview:

Key Features:

Result preview

Conclusion

Beginner Guide to Total.js UI: #02 Understanding Paths

What are Paths in Total.js UI?

Types of Paths

Absolute Paths

Relative Paths

Explicit and Implicit Paths

Explicit Paths

Implicit Paths

Scoped Paths

Temporary Paths

Using GET and SET with Paths

SET Method

GET Method

Watching Changes in Paths

Video Tutorial

Conclusion

Beginner Guide to Total.js UI: #01 Installation and Setup

Introduction

What is Total.js UI?

Why Choose Total.js UI?

Prerequisites

Getting Started: Exploring `QueryBuilder` in Total.js

Setting Up `QueryBuilder`

Step 3: Create the `run.js` file:

Understanding the `.copy()` method in detail

1. `none`

2. `replace`

3. `extend`