Smart PG (pgting), a drag-and-drop smart page building system

Wisdom PG (pgting) icon-default.png?t=N4P3https://www.pgting.com

Table of contents

foreword

1. Introduction

2. Design concept

1. Resource integration, out of the box

2. Reduce system granularity

3. Component sharing

4. Simplified configuration

3. System functions

1. Visual large screen construction:

4. Technical Architecture

1. Technology stack

2. Overall structure

5. How to use


foreword

Low-code has always been a key technology developed by major manufacturers, and there are currently many good products. In contrast, there are certain pain points in the process of use, such as the inability of small and medium-sized enterprises to deploy system source code, the high cost of custom components, the limitation of access technology stack, and the inability to perform secondary development, etc. So can there be a small and beautiful system platform?

Through technical research and past experience, our technical team designed and developed a page building system, Smart PG (pgting) .

Next, we will introduce smart PG (pgting) from the following five aspects.

  1. General introduction

  2. design concept

  3. System functions

  4. Technology Architecture

  5. How to use

1. Introduction

Wisdom PG , taken from page generating, English abbreviation pgting, means that the page is being generated.

Smart PG (pgting) is mainly aimed at small and medium-sized enterprises and individual groups. It adopts drag-and-drop construction, and the design supports large-screen construction for data visualization, mid-stage construction, and h5 page construction. It adopts an online sandbox rendering architecture and supports multi-frame integration. The system The design concept is resource integration, out-of-the-box use, reduced system granularity, component sharing, and simplified configuration. pgting makes the system into components, and can integrate existing resources in the components, or use components shared by others to reduce development costs and improve efficiency. Pgting has built-in a large number of self-developed algorithms, self-developed form engine forake (open source) and browser sandbox compilation engine, with strong scalability.

pgting provides components, middle-stage account ownership, users can build their own system on pgting, and can also privatize pgting as a whole for deployment and secondary development.

2. Design concept

Smart PG design concept has the following points:

1. Resource integration, out of the box

At present, there are many open source component libraries. The traditional method is to build a development environment, introduce resources, develop your own products, and then release them online. If these resources can be used directly and are not limited by the technology stack, it will greatly improve efficiency and reduce technical barriers.

Wisdom PG provides an integrated development environment. If you need to develop business components, you can directly use the cases of these open source libraries. For example, in pgting, directly use the echarts chart, use the bizcharts chart, just copy the code and modify the configuration. There is no need to build a development environment, no need to publish and go online, Smart PG provides one-stop integration, and supports the integration and use of different resources.

2. Reduce system granularity

Smart PG disassembles the middle platform and pages, and finally converts them into components. Users can directly drag and drop components to build, or develop characteristic components to complete building block construction.

3. Component sharing

Different business scenarios will have different components. Except for some common components, the development of business components will increase the cost. In a large number of businesses, some components can be common or similar. Smart PG provides a component sharing mechanism. Users can use Self-developed components are set as public components, and public components can also be used to build a system, which is mutually beneficial and win-win.

Users can also create characteristic components for paid use by business parties, and business parties can also publish component requirements. Smart PG provides resource docking services to make system development tasks.

4. Simplified configuration

The low-code platform reduces R&D costs to a certain extent, but what is bothersome is the large number and complex configuration files, and the configuration files with a lot of operations. Our technical team has a deep understanding of this point in previous work, such as defining a configuration panel for a component, and the json configuration is particularly cumbersome.

Wisdom PG has considered this at the beginning of the product, weakening the specific meaning of the configuration file as much as possible, retaining the general meaning, and providing visual editing configuration files. Smart PG provides drag-and-drop configuration of the form structure, and open-sources the form engine formake to provide better services.

3. System functions

The smart PG design supports the construction of large visual screens, mid-stage construction, and h5 construction. The operation is simple and users can get started quickly. For operating documents, see: Smart PG Manual

1. Visual large screen construction:

Smart PG provides a visual large-screen editor. Users only need to select the required components, drag and drop to build, and fill in the data interface to get a large screen.

2. Middle platform construction

Middle stage steps: create a new form page => create a new middle stage list page, specify a form page => create a new middle stage navigation, specify a list page

Wisdom PG provides a middle-end editor (not open yet), which can build a list page by dragging and dropping, and specify a detailed form.

Smart PG provides a form editor, drag and drop to build forms

3, h5 construction

Users can quickly build h5 pages through the h5 editor. For some event pages, marketing pages are very helpful.

4. Technical Architecture

1. Technology stack

Smart PG uses the more popular React + TypeScript for the front-end, and Nest + TypeScript + Mysql + Redis for the server. The front-end and back-end development languages ​​are unified, the cost of getting started is low, and the scalability is strong.

2. Overall structure

The overall design of Smart PG consists of two parts: dynamic rendering and online compilation. Online compilation supports multiple frameworks, and users can choose by themselves. If there is no technology stack to use, you can apply to join it, and you can use it after passing the review.

The online component also provides a local development environment, and users can directly develop locally and publish it.

The built-in components of local component smart PG are loaded by dynamic rendering.


5. How to use

Smart PG provides two usage methods, one is sass mode, and the other is privatized deployment.

Users can build it directly on Smart PG, and if they want to customize their own system, they can also deploy it privately for secondary research and development.

Wisdom PG free experience, basic membership building is free, go try it.

Guess you like

Origin blog.csdn.net/qdmoment/article/details/130893434