01
What is UIOTOS
First of all, this is a 0-code programming tool that has original technology patents in the field of front-end application development.
Secondly, this is also an industrial configuration software that can build large configuration screens and data screens with rich interactions and business logic.
Finally, this is a WEB front-end building tool that can be used in back-end management systems to replace conventional code development such as vue (element-ui, iview).
0 code programming
Users do not need to understand programming languages. With unique wiring and nesting operations, combined with common drag and drop editing, they can realize the development of customized interactive interfaces and complex business logic, achieving effects comparable to code development such as vue and QT. It is suitable for Industrial configuration, large data screen, client tools, middle and background management, etc.
Example 1: The configuration monitoring screen of the fresh air system, including data simulation, fan blade rotation, click to switch start and stop, etc.
Example 2: A simple calculator-like program that compares values and outputs the results in specified text. The following are running and editing status respectively.
Other examples: Angle auto-increment to achieve fixed rotation, random color output to simulate status lights, numerical values within a specified range to increase and decrease back and forth, simulate data source curve overlay scrolling, extract the value of a specified index from any array, and functional modules are nested and packaged into components .
industrial configuration
It has common drag-and-drop and editing functions, supports vector drawing, and provides various real-time display and data analysis components such as instruments and curves, allowing you to quickly build cool display screens. Combined with 0-code-specific operations such as wiring, nesting, and attribute exposure, users can build configuration pages with complex functions, not just limited to data display.
Examples are as follows, including thermal station monitoring, water pump monitoring, generator smoke, pipe network monitoring, river monitoring, traffic monitoring. Basically any style of configuration monitoring and large-screen visual display can be built by dragging and editing. (3D direct editing design is not supported)
In addition, it provides an IoT middle platform (optional) that supports integrated access to various types of protocols or subsystem SDK APIs such as modbus, opc, Siemens plc, etc. The data is passed to the graphical UI through API components through MQTT, HTTP, WEBSOCKET and other channels. Component to achieve real-time display or historical analysis.
WEB front end
Configuration and large screens focus on drawing and data display, while business applications are not only display, but also interface interaction, business logic, interface calling, data analysis, etc.
These often involve a large number of logical judgments, and also require modular encapsulation, which facilitates the dismantling of complex business application functions layer by layer to form independent, universal and reusable modules. This is also the current popular trend of Vue. What the front-end development framework is doing.
UIOTOS's unique layer-by-layer nesting and attribute exposure mechanism solves the above problems from the perspective of zero code. It also realizes the disassembly of complex applications into modular and reusable units, and incrementally and progressively builds complex applications. WEB front-end, no code required for the whole process.
Example 1: 0 code front end of investment leasing system
Editing operations corresponding to Example 1:
Example 2: Building integration platform - personnel management such as visitors and employees
Editing operations corresponding to Example 2:
However, the positioning of UIOTOS is by no means to replace the existing WEB development framework (such as vue, jquery), but to combine with each other.
Existing web resources or frameworks, through a small amount of encapsulation work according to UIOTOS specifications, can become zero-code extension components for dragging, editing, wiring and nesting. For example, mathematical calculations, charts (such as echarts), map engines (such as leaflet), document editing (such as markdown), network requests (such as jquery ajax), etc.
On the other hand, application pages built with UIOTOS 0 code can be nested into the code framework, and provide js interfaces for accessing components or accepting operating events of components, becoming part of the front-end framework for code development.
02
How UIOTOS is implemented
product noun
technology stack
The UIOTOS front-end is based on canvas and the domestic graphics engine ht.js (ht for web), which naturally supports the seamless integration of 2D and 3D, graphics and UI. The backend adopts Tencent's open source ORM framework APIJSON and IOTOS IoT middle platform, which respectively provide business universal interfaces for CURD-type applications that deal with databases, as well as clients and IoT applications that deal with equipment and hardware.
Of course, as a front-end application 0-code tool, the front-end and back-end are completely separated.
Therefore, if you have an existing or self-built backend, you can only apply the front-end part. The generated front-end application includes UI, layout, interaction, interface calling, parsing logic, etc., and only needs to communicate with the interface provided by the backend through the API component. Yes, it is equivalent to realizing the front-end part usually developed with vue.
Technical principle
Compared with other low-code or no-code platforms, the design method of UIOTOS is relatively unique. It has similar ideas to object-oriented programming and can theoretically achieve the same effect as code development.
As shown in the table below, connection operations and container nesting are equivalent to assignment calls and inheritance and derivation in development. The specific functional attributes of each component are equivalent to the function methods of the class library. The form binding of embedded component primitives is equivalent to the base class. The default private attributes of members are switched to public attributes, etc.
03
Why do UIOTOS ?
Front-end technology updates quickly, and development and learning costs are high
In the field of software development, UI interface development technology updates and iterations are the fastest and emerge in endlessly. Taking the current popular WEB front-end as an example, development needs to understand npm, webpack, react/vue, ES6 syntax, ts, in addition to state management, routing, etc. Desktop client development has a higher threshold.
Traditional large-screen configuration is not suitable for building complex functions
Although there are configuration software in the industrial field to lower the development threshold for interface display, with the development of the industry, the requirements for customization of the interface are getting higher and higher. Complex interactive functions and business logic configuration software are difficult to handle, and must be expanded through script code. , or customize and develop upper-level management applications. The 2D data visualization large screen is similar.
Low-code has user thresholds, and customized extensions need to be developed.
Low-code has been a popular concept in recent years. Some platforms can automatically generate corresponding front-end code through back-end configuration, enabling basic functions such as permissions and organization to be used out of the box; others can realize the visual construction of most common pages through drag-and-drop and configuration. Combining certain code development to realize complex and customized requirements and reduce the workload of front-end page development.
These can indeed greatly improve the efficiency of building front-end UI interfaces. Complex business logic, as an important part of large front-end/client application functions, usually requires code customization, and the expansion of component functions also requires code development.
In addition, there is also a digital twin low-code, which will not be expanded for the time being. UIOTOS is currently not suitable for 3D scene 0 code
04
What's special about UIOTOS ?
VUE comparison
Both can realize incremental and progressive customization and development of front-end applications. In addition to not requiring writing code, UIOTOS can also realize vector drawing that is difficult to implement directly with Vue. In addition, for specific functions, vue/js code can be easily implemented, but when UIOTOS 0 code is difficult or impossible to implement, the vue js code can be encapsulated into UIOTOS 0 code components.
Configuration comparison
Both can realize vector drawing and large-screen visual display of data, but UIOTOS can also implement complex business logic through zero code, and can encapsulate components with zero code, without requiring secondary code development like other component software. In addition, the configuration pages built by UIOTOS can be nested into each other to facilitate the realization of complex display and interactive effects.
Low code comparison
Both provide a visual component library and generate pages by editing configurations to reduce the workload of front-end development. UIOTOS can be oriented to non-developers and does not require users to understand code, while common low-code platforms are oriented to programmers and require reprocessing of code to achieve complex customization requirements.
UIOTOS has an "object-oriented" idea in building pages through nesting, wiring, and attribute exposure, which is completely different from the idea of low-code generation of front-end middle-layer code.
In addition, low code usually integrates the front and back ends, and it is difficult to use the front part alone. UIOTOS is a design that completely separates the front and back ends. You can use the matching back-end 0 code, or you can use only the front-end part without forcing binding.
05
What scenarios is UIOTOS not suitable for?
The UIOTOS 1.0 version 0 code is more aimed at background management system-type applications, including large data screens with complex interactive functions, industrial configuration, etc. The following scenarios have limited support for the time being. For more reference, please refer to the UIOTOS document "Layout"
3D digital twin 0 code construction
The underlying graphics technology of UIOTOS uses canvas and ht.js, which naturally supports seamless integration of vector graphics and 2D/3D. However, it does not support 0-code construction of 3D scenes, and requires code writing to achieve animation, interaction and various customized cool effects.
The biggest advantage of UIOTOS lies in business applications. Through zero code maximization, it can achieve the same effect as code development of front-end development technologies such as vue/reac.
Mobile APP, small program
UIOTOS has no size restrictions in the design of UI interactive layout. The page supports long page sliding and can also build mobile WEB APP style page applications. But the current version 1.0 is mainly designed for the complex PC WEB side, the basic components and layout support are more flexible, and there is no version for the mobile side.
Therefore, it will be cumbersome to build mobile page applications at the moment, such as fonts, pop-up windows, etc. are not friendly enough. It is necessary to provide mobile-specific basic components and layout support in subsequent versions.
06
What skill requirements does UIOTOS have for users?
The design goal of UIOTOS is to make front-end application development a daily office skill.
Whether users can write js code (it is not required to know front-end development frameworks such as vue/react/webpack) is divided into ordinary users and advanced users .
general user
Use ready-made components to build customized front-end applications through wiring, nesting and attribute configuration. You don’t need to know the development language. You can get started by learning and training as a tool software. Users can be product managers, UI designers, project managers, and implementation engineers.
VIP
You can use code block components and are compatible with js code logic. Process by writing js code. The component graphics or pages formed after processing can be used by ordinary users through collection or nesting in containers and then collection.
In addition, you can use existing web resources to develop and expand jquery, vue, react or native js, and encapsulate ui components or functional logic into basic components in UIOTOS, such as gis maps, text editing, etc., which require a professional web front-end Development Technology.
07
UIOTOS deployment method
online trial
Address: http://ui.aiotos.net/
Account: develop Password: iotos123456
Install offline
To obtain the offline installation package, please contact the service support below!
Authorization method:
Free for individual users
For enterprise authorization, please contact us for consultation
Cooperation support: 4001188502