DEV Community: Peter Širka

Create UI parts visually with the power of Total.js UI Builder

Peter Širka — Thu, 04 Apr 2024 09:20:37 +0000

In today's fast-paced digital world, the ability to craft intuitive and visually appealing user interfaces (UI) is more crucial than ever. We're delighted to introduce our innovative UI Builder Designer, a tool that prioritizes simplicity and efficiency.

At the heart of our UI Builder Designer lies a user-friendly, drag-and-drop interface that simplifies the design process. Imagine having the power to visually assemble and customize UI elements, all in real-time! From buttons and text fields to images and sliders, our tool offers a wide array of open-source components to bring your creative vision to life.

What sets our UI Builder Designer apart is its extraordinary flexibility and adaptability. It's a playground for creativity, offering a broad spectrum of customization options to ensure your UI looks and feels exactly how you envision it. Recognizing the importance of seamless integration in today's interconnected digital landscape, we've engineered the UI Builder to play nicely with third-party applications. This means you can effortlessly incorporate your UI creations into existing projects or workflows, enhancing your apps with beautiful, intuitive interfaces that engage and delight users.

Top features

Open source (MIT license)
Input/Output from the UI builder is structured JSON data (example).
UI components can be serialized directly to the design or loaded from any server.
Easy customization.
Floating mode (look at the Flowboard example).
It supports two modes: editor and render.
It's simple to integrate with any existing web app with the help of the <iframe> element.
It's only a client-side solution, and it works without a special environment.
It includes many open-source UI components.
It's fully open-source.
You can provide the UI Builder designer directly on your server (it's very small app).
Localization
Versioning
The UI builder source-code is less than 1 MB with pictures!

Render example:

Did you know about Total.js UI Builder?

You can create your own set of components.
You can mix multiple sets of components.
You can create UI parts as UI components collected from the included UI components.
You can render the same design as MDI.
Your UI design can communicate with your REST endpoints or through the WebSocket.

What can I design with the UI Builder?

UI forms (like orders forms, contact forms, etc.)
Dashboards
Flowboards
Complete pages like, e.g., product lists, product details, order lists, etc.

If you use the Total.js UI library, the j-UI Builder component can be used to render UI designs. Also, we have prepared advanced UI components like UI Editor and UI Studio.

Total.js Integration

We prepared various integrations for the UI Builder in the Total.js Platform apps. The below integrations are part of the Total.js Enterprise service, and they aren't free. Next, we have prepared the main components of the Gov.uk frontend, and they are also part of the Total.js Enterprise service.

Total.js CMS

We integrated Total.js UI Builder directly into the Total.js CMS, and the CMS admin can easily make forms and join multiple UI designs directly in the CMS Visual Programming Interface. So the admin is able to process incoming data from UI design and return another UI design.

The below example shows a simple form called "Survery", and after submitting the form, the flow returns a new UI design: "Thank you" (message). The data from the "Survey" form is processed and sent as e-mail messages.

Total.js Flow

We prepared Flow components for integrating Total.js UI Studio with the Total.js Flow. It offers the same functionality as I mentioned above.

What next?

Are you interested in implementing UI Builder into your products? Contact us.

Build portals and intranets in Node.js

Peter Širka — Mon, 06 Mar 2023 14:39:03 +0000

We provide an open-source Node.js product for building portals and intranets called OpenPlatform. OpenPlatform is a very flexible and small solution for integrating 3rd party apps which can be written in various technologies or versions that you will love ❤️ . Node.js OpenPlatform is fully open-source under the MIT license.

Website: https://www.totaljs.com/openplatform/
Documentation: https://docs.totaljs.com/openplatform/
Source code: https://github.com/totaljs/openplatform/
License: MIT license
OpenPlatform on ProductHunt 👍

What is the OpenPlatform?

OpenPlatform is a stylish and straightforward Portal / Intranet system for running, integrating, and managing multiple third-party web applications. OpenPlatform provides running applications with a set of services, such as user, security and app management or notifications.

OpenPlatform provides third party apps in iframes (with a simple tokenization workflow). When a user believes they have only one solution, in reality, they use different applications on different hostnames. Developers are not restricted, they can use anything like Java, .NET, Python, RoR, PHP, Node.js, Go, … in combination with Vue, React, Angular, Ember, jQuery, … for creating apps optimized for OpenPlatform. Instead of creating one monolith solution, you can integrate/create many apps into one portal. This solution has a lot of pros in terms of long-term benefits like updating, security, scalability, etc.

OpenPlatform is an enterprise-ready solution.

Ready for customization

We have prepared OpenPlatform that can be customized according to your needs. Developers can change the existing portal layouts or create new ones. Data about users, apps, groups and permissions is stored in a PostgreSQL database under the "op" schema.

Key features

Fully optimized for 3rd party apps integration
Easy to customize
Easy to localize
Low HW requirements
User management
App management
Groups and permission management
Optimized for mobile devices
Simple tokenization
MIT license

Various implementation

Total.js OpenPlatform has been around for more than 4 years. We have deployed it in many projects around the world. The latest version is v5 with very elegant code and fully prepared for various customization.

OpenPlatform gallery

How to test it?

You can test it as a Docker container. Follow simple installation instructions:

https://docs.totaljs.com/openplatform/

Follow the video below:

What's next?

The top 10 features of Total.js Flow

Peter Širka — Fri, 10 Feb 2023 21:03:05 +0000

Total.js Flow is a web-based graphical programming interface that provides a user-friendly and modern experience for low-code development through the use of a web browser. You can use it as an alternative to Node-RED.

Total.js Flow website
Open-Source (MIT)

1. Low hardware requirements

Total.js Flow can be used anywhere you are able to provide the Node.js Platform. You can run the Flow on devices like Raspberry Pi.

2. Without third-party dependencies

In the core, Total.js Flow does not use any external third-party dependencies, but it does not restrict you from using any external dependencies used in the components.

3. Multithreading

This is a key feature. Each flow design (called FlowStream) is provided as an independent worker process, with its own components, memory and CPU resources.

4. Component's editor

You can create your own Flow components or customize existing Flow components directly in the Flow. You don't need any special tools, compilers for creating components.

5. Real-time traffic indicator

You can see traffic between components with flowing data.

6. Bundling Flows to components

You can easily bundle a Flow design as a Flow component and use it multiple times in other Flows.

7. Beautiful user interface

Total.js Flow offers a really nice UI built on top of Web components technology.

8. Running

You can evaluate flow design either as a server-less app or as an application without a UI.

9. Fully integrated with Total.js OpenPlatform

Total.js Flow is fully optimized for use on the Total.js OpenPlatform. The OpenPlatform is a portal solution for integrating third-party apps.

Total.js OpenPlatform

10. Usability

Total.js Flow can be used almost everywhere. Industry/home automation, data processing, monitoring, as a configuration tool, for creating REST services, etc.

What is the Total.js Platform?

Peter Širka — Mon, 30 Jan 2023 15:12:54 +0000

The Total.js Platform is a collection of Node.js server-side and JavaScript client-side libraries targeted for web, intranet, IoT and hybrid mobile apps development. The platform contains tools and apps for developers or IT companies. The main programming language is JavaScript on both sides. Developers can write apps quickly and easily in Notepad without any special tools or programs.

Libraries, components, and icons are all open-source under the MIT license. This means you can use them for commercial and non-commercial purposes without any restrictions or fees whatsoever. Total.js Platform is one of the most complex Node.js/JavaScript platforms in the world, according to us.

Server-side

Our main server-side technology is the Node.js Platform. We have written a framework called Total.js that uses Node.js. The framework allows you to create quickly and easily REST services, web apps, intranet apps, IoT data processing, etc. It works on Linux, Unix and Windows operating systems with low hardware requirements (you can run Total.js on e.g. RPI). The Total.js server-side framework supports most NPM dependencies and can be used with any database, such as PostgreSQL, MongoDB, MySQL, SQL Server, Redis, CouchDB, RethinkDB, etc.

This framework uses an MVC architecture and its primary goal was to provide everything necessary for web development. It contains a lot of helpful parts like HTTP server with full support of Web Socket, Server-Sent events, SMTP implementation, LDAP search, View Engine, NoSQL embedded database, Schemas, real-time merging and minification of static content (JS + CSS + HTML) and a ton of utilities. The framework does not depend on third-party dependencies, but it does not prevent you from using them.

Read me:
The Total.js framework can be used with any client-side technology, including Vue, React, Ember, jQuery, etc.

Size around 1.3 MB
Basic memory usage is 8 MB
Without third-party dependencies

Client-side

Also, the Total.js Platform contains a client-side library called the Total.js UI library (previously jComponent). The main goal of the library is to create reusable UI components and single-page apps with long-term support. The library has implemented the Web components architecture. It offers a lot of functionality like creating reusable UI components, routing, AJAX operations, localization, a template engine, versioning and a ton of helpers. You can write web or mobile hybrid apps without third-party dependencies. Our library includes high-quality open-source Font Icons with more than 400 icons.

More than 300 reusable UI components have been prepared under the MIT license. You can browse all Web components with real-time preview on https://componentator.com.

Read me:
The Total.js UI library can be used with any backend technology like .NET, Java, PHP, Python, RoR, etc.

.js libary 85 kB (gzipped)
.css library 22 kB (gzipped)

Total.js Apps

A number of useful open-source Total.js apps have been developed by us. The apps are written entirely in Total.js. The most used apps are:

Total.js Flow

Total.js Flow is a visual programming interface for low-code development accessible through a web browser. It's a strong alternative to Node-RED with many great features.

Flow website

Total.js OpenPlatform

It's a portal-based solution that can be used as an intranet solution for small and medium companies or teams. OpenPlatform is a small app fully optimized for integrating third-party apps written in any technology.

OpenPlatform website

Other apps:

Total.js Code
Total.js CMS
Total.js SuperAdmin
Total.js TotalDB (coming soon)
Total.js UI Builder (coming soon)
Total.js HelpDesk (coming soon)

Tools:

How do we make money?

It is very difficult to find funding for creating rich and open-source content. Primary funding is from support services and we help to code/develop solutions built on the Total.js Platform around the world. Then we have cloud services, stable partners and additionally, we are developing the Total.js Enterprise service that will give developers access to more open-source premium content like components for the Flow, UI Builder, CMS templates, etc.

Working on the Total.js Platform for 10 years, we evolved from a one-man show to an internal team of nine people.

Total.js FlowStream v1

Peter Širka — Thu, 24 Jun 2021 09:24:53 +0000

We are pleased to announce a new project called Total.js FlowStream app. FlowStream algorithm is part of the Total.js framework, and the Total.js FlowStream app is an advanced GUI and mechanism for running and integrating multiple FlowStreams. The performance is incredible.

Try FlowStream now
FlowStream Website
GitHub repository: https://github.com/totaljs/flowstream
- Follow install instructions
FlowStream components repository: https://github.com/totaljs/flowstreamcomponents

Minimal requirements:

Node.js v14
The latest version of the Total.js 4 framework $ npm install total4

Differences between Flow and FlowStream

Total.js Flow is a single-thread Node.js app that allows you to built only a one-level Flow design divided into multiple tabs. Total.js FlowStream uses a very similar technique, but each FlowStream can be executed in the worker thread (independent thread), and each FlowStream can run other FlowStreams inside as e.g. components. Each FlowStream contains its variables and (important) it's own components with their declarations.

Total.js FlowStream:

FlowStream instance is an independent sandbox instance running in the Worker-Thread (by default)
FlowStream can run other FlowStreams inside as the components
Each FlowStream contains its variables and components with their full declaration
Prepared for various customization and implementation
FlowStream meta-data can be saved/can be read from everywhere, e.g. from DB
FlowStream app is the integrator for Total.js Message Service (TMS)
FlowStream app supports real-time creating of FlowStream components (supports Code editor)
Excellent performance because workers can process thousands of messages in a short time

Total.js Flow:

Flow is a single-thread instance
Flow can't encapsulate another Flow
Flow can't run in the worker thread
Flow is end-product
Flow doesn't support Total.js Message Service (TMS)
Flow does not support the creation/modifying of Flow components in real-time

Try Total.js FlowStream today

You can try Total.js FlowStream in Total.js Cloud or download the repository, follow install instructions.

Node.js Files app

Peter Širka — Mon, 21 Jun 2021 07:42:00 +0000

We are happy to announce a new Node.js app called Files. The Files app is a simple Node.js web application for storing and managing files on the server. The app is fully open-source, and you can modify it according to your needs.

Join Total.js Telegram
Run Files app
Open-source (MIT license)

Files app

without dependencies
without database
uncomplicated usage
supports drag & drop uploading files
supports search
supports Total.js Message Service (TMS)
beautiful user interface
nice features
fully extensible

Requirements:

Node.js +v12
Total.js 4 - $ npm install total4
Download and run

Links:

Try Total.js Files today

You can try Total.js Files in Total.js Cloud or download the repository, and follow install instructions.

New version of Total.js 4 framework (0.0.43)

Peter Širka — Tue, 08 Jun 2021 19:43:28 +0000

We have officially released a new version of Total.js framework 4 (v0.0.43). This version brings great new features that you will love. Total.js framework is still without dependencies, and that's a good benefit for all developers. The new version brings great new features and fixes.

Install Total.js 4 framework via NPM: $ npm install total4
or download the Total.js framework source-code from GitHub

Integrated LDAP search

We have integrated LDAP search into the Total.js framework directly. So you can easily synchronize or sign-in user via LDAP protocol with your e.g. Active Directory (AD) with the help of the Total.js framework directly.

Total.js LDAP documentation

Example:

var opt = {};
opt.ldap = {};
opt.ldap.port = 389;
opt.ldap.host = 'IP_or_HOSTNAME';
opt.type = 'person';
opt.dn = 'ou=KIMS,dc=adtest,dc=ad';
opt.user = 'CN=op-user,OU=SOP_system_acc,OU=SOP,OU=Users,OU=KIMS,DC=adtest,DC=ad';
opt.password = 'password';
LDAP(opt, function(err, response) {
    // @err {Error}
    // @response {Object Array}
});

Total.js framework supports TypeScript

Helferino added support for TypeScript, but we don't recommend it for the development of Total.js applications. The reason is simple (many developers will not agree): we don't see any more significant advantage of TypeScript.

Download: Total.js TypeScript project template

JSON schemas

The new version of Total.js supports JSON schemas. Total.js framework automatically processes all JSON schemas stored in /app/jsonschemas/*.json directory. Also JSON schemas can be defined programmatically via NEWJSONSCHEMA() method.

Usage:

// Validates data according to the JSON schema
JSONSCHEMA('schema_name', { data }, function(err, response) {
    // @err {ErrorBuilder} error handling (nullable)
    // @response {Object} data will be prepared according to the JSON schema
});

// Validates data according to the raw JSON schema object
JSONSCHEMA({ $id: '', properties: {} }, { data }, function(err, response) {
    // @err {ErrorBuilder} error handling (nullable)
    // @response {Object} data will be prepared according to the JSON schema
});

JSON Schemas can be used instead of Total.js Schemas:

NEWSCHEMA('Users', function(schema) {

    // This schema inherits all fields from the JSON schema "user"
    schema.jsonschema('user');

    schema.setInsert(function($) {
        // do something
        $.success();
    });

});

Inline generator for JSON schemas:

console.log('name:String, age:Number'.toJSONSchema());

Good to know:

JSON schemas can be generated from the Total.js Schemas too

Total.js Message Service (TMS)

We have added a new pub/sub pattern for integrating multiple Total.js applications. You can use Total.js FlowStream app for integrating multiple Total.js applications via TMS. This is one of the most significant new feature in the Total.js framework. TMS uses JSON schemas / Total.js schemas for preparing data.

Download TMS Example
Download integrator app: FlowStream app

The integrator app automatically downloads all publishers and subscribers. Then creates components for the FlowStream app. Look to the picture below:

First you need to define all publisher/subscribers:

// NEWPUBLISH('publisher_name', 'JSON Schema or Total.js Schema or Inline Schema');
NEWPUBLISH('users_insert', 'Users');
NEWPUBLISH('users_update', 'Users');
NEWPUBLISH('users_remove', 'Users');

NEWSUBSCRIBE('users_insert', 'Users');
NEWSUBSCRIBE('address_insert', 'city:String, zip:String(20), country:String');

Usage:

NEWSCHEMA('Users', function(schema) {

    schema.setInsert(function($, model) {

        // ...
        // ...

        PUBLISH('users_insert', model);

        // ...
        // ...

        $.success();

    });

});

SUBSCRIBE('users_insert', function(user) {
    EXEC('+Users --> insert', user, console.log);
});

We add step-by-step TMS integration to all Total.js open-source apps.

Improved FlowStream

FlowStream is one of the best features in the Total.js 4 framework, and it opens many possibilities for various implementations/cases/projects. It's advanced version of Total.js Flow and fully customizable. The FlowStream app moves the FlowStream to the super level, and each FlowStream runs in an independent worker thread.

Download FlowStream app

Added support for debugging of bundles

This feature allows you to debug source-code in the .src directory. In other words: The total.js application doesn't extract and rewrite bundles.

Usage:

create file bundles.debug in the root of app directory
restart app
and then you can modify each file in .src directory
watcher will monitor only changes in .src directory

Customizable Node-red alternative

Peter Širka — Wed, 07 Apr 2021 22:31:16 +0000

Total.js Flow is part of Total.js Platform and it's direct alternative to Node-red without any dependencies. Total.js Flow is fully open-source under MIT license.

Beautify UI

Total.js Flow offers a beautiful and slick user interface with nice features like:

Real-time traffic indicator
Real-time statistics
Visual error handling
Supports zooming
Dark/Light theme

No 3rd party dependencies and with power saving

The core of Total.js Flow is without any 3rd party dependencies, so the maintenance is effortless. You can provide Flow for several years without any problem on various devices. Total.js Flow doesn't limit you, and Flow components can contain any module from NPM. We create Total.js Flow from scratch, and we optimized it for saving CPU and memory consumption.

Stability

Total.js Flow is stable for several years, and the Total.js Flow is part of many great projects.

Works offline

Total.js Flow is fully optimized for working offline without any internet connection. So you can provide Total.js Flow directly for example in IoT devices.

Crash mode

Total.js Flow supports crash mode or pausing of the entire designed Flow just in time. The crash mode will ensure that after crashing, the instance will automatically pause the Flow due to analyses of all problems.

Launch modes

Total.js Flow supports three types of Flow modes:

bundle (default) launches UI designer and backend Flow services
client runs only UI designer, but you need to specify URL address for backend Flow services (UI designer will connect external server)
server runs only backend Flow services without UI designer

Amazing performance

Total.js Flow offers excellent performance that can handle hundreds of requests per second.

Many useful components

We have prepared a lot of functional components. You can easily install existing components or create your own. You can easily change the default behavior of Total.js Flow by adding your link to templates with the Flow components or templates with predefined Flow designs. You can change the default configuration anytime.

Creating components

GitHub repository: Flow components

We have prepared a tool for creating Flow components. You can create Flow components without Flow, our test tool simulates Flow, and you can quickly test component functionality. Clone the repository above and learn from existing Flow components, you can start with tutorial component.

Tutorials

Customization

We have prepared a particular version of Flow called Total.js FlowStream which can be fully customized/optimized for various cases. You can provide FlowStream in Cluster or Cloud, and it can be optimized for accessing of multiple users (with possibility to implement various permissions) and much more.

FlowStream example

Try Total.js Flow in Cloud

Start with Total.js Flow in Total.js Cloud in two minutes:

Great support

Join Total.js Telegram or write us on Total.js Messenger. We are ready to help you with the development or customizing of apps with the Total.js Flow. Our company offers professional support services for companies.

Open-source JavaScript platform

Peter Širka — Sat, 23 Jan 2021 19:36:17 +0000

Total.js Platform is a collection of libraries, packages, UI components, practices, and complete products written in pure JavaScript / Node.js. Most of our libraries and UI components are without any 3rd party dependencies. Total.js Platform is a proven and stable platform for various cases like web apps, REST services, E-commerce, intranet apps, hybrid mobile apps, and real-time apps.

Total.js Platform offers you:

Rapid and powerful development of web apps
High performance
Fully scalable
Node.js server-side framework called Total.js without dependencies and with significant functionality
Client-side library for creating SPA and reusable UI components
More than 230 free and reusable UI components
Clean and beautiful documentation
Live chat support with authors and contributors (or on Total.js Telegram)
Cloud development
Visual programming interface for the building of server-side apps
Visual programming interface for IoT
Attractive Node.js Process Manager Node.js Process Manager tool with monitoring and auto-generating of SSL
Cloud Code editor
Node.js CMS with an embedded database and zero configuration
Intranet platform
A lot of resources
Total.js Platform is a free and open-source
You won't need any external tools for web development

Website: https://www.totaljs.com
Do you have any questions? Join to community

Start to develop in two minutes

DEV Community: Peter Širka

Create UI parts visually with the power of Total.js UI Builder

Top features

Did you know about Total.js UI Builder?

What can I design with the UI Builder?

Total.js Integration

Total.js CMS

Total.js Flow

What next?

Build portals and intranets in Node.js

What is the OpenPlatform?

Ready for customization

Key features

Various implementation

OpenPlatform gallery

How to test it?

What's next?

The top 10 features of Total.js Flow

1. Low hardware requirements

2. Without third-party dependencies

3. Multithreading

4. Component's editor

5. Real-time traffic indicator

6. Bundling Flows to components

7. Beautiful user interface

8. Running

9. Fully integrated with Total.js OpenPlatform

10. Usability

What is the Total.js Platform?

Server-side

Client-side

Total.js Apps

Total.js Flow

Total.js OpenPlatform

How do we make money?

Total.js FlowStream v1

Differences between Flow and FlowStream

Try Total.js FlowStream today

Node.js Files app

Files app

Try Total.js Files today

New version of Total.js 4 framework (0.0.43)

Integrated LDAP search

Total.js framework supports TypeScript

JSON schemas

Total.js Message Service (TMS)

Improved FlowStream

Added support for debugging of bundles

Customizable Node-red alternative

Beautify UI

No 3rd party dependencies and with power saving

Stability

Works offline

Crash mode

Launch modes

Amazing performance

Many useful components

Creating components

Tutorials

Customization

Try Total.js Flow in Cloud

Great support

Open-source JavaScript platform

Sneak peek