I have been researching technologies and products related to low-code visualization before, and I have also led many visualization construction projects. The main purpose is to reduce enterprise R&D costs and shorten product delivery cycles . With the development of Internet technology, there are many excellent technologies one after another. The product came out, and then I will share with you several very valuable visualization construction projects to help enterprises digitally transform.
1. Formily——Alibaba's unified front-end form solution
2. Amis - Baidu front-end low-code framework
3. H5-Dooring——H5 page building artifact (everyone can make pages like a fool)
4. mometa - a low-code meta-programming editor for R&D
5. V6.Dooring——Visual large-screen production tool
6. form-generator - based on Element UI form design and code generator
1. Formily——Alibaba's unified front-end form solution
What we see above is the screenshot of Formily 's editor. It is developed by Ali's technical team and is completely open source. We can use it to create forms with natural flow layouts to build applications. If you are a technician, you can also customize what you want Components, currently Formily already supports multiple component libraries and frameworks, as follows:
-
antd
-
element
-
vant
-
next
-
semi
So whether you are reacta framework developer or vuea framework developer, you can use it to build your own form making platform.
But the only disadvantage is that it is not friendly enough for non-technical personnel. For example, its drag and drop is a natural flow layout, and the position of elements cannot be completely moved freely, so it is not suitable for some customized or high-degree-of-freedom scenarios. The following is its architecture diagram:
Project link: https://github.com/alibaba/designable
Anyone who is interested can learn from it.
2. Amis - Baidu front-end low-code framework
amis It is a low-code front-end framework that uses JSON configuration to generate pages, which can reduce the workload of page development and greatly improve efficiency.
Front-end development is becoming more and more complicated, and the learning threshold is getting higher and higher. To use the current popular UI component libraries, we must understand npm, yarn, webpack, react/vueetc. We must be familiar with ES6 syntax, and it is best to understand state management. For example Redux, if I have never been exposed to functional programming, and it is very difficult to get started, but after getting started, I will find that it still has a huge ecology. There is a related library 2347 , many functions are similar, and the selection cost is high.
In order to generate most of the pages in the simplest way, amis the solution is based JSON on configuration. Its unique benefits are:
-
You don’t need to understand the front-end : Inside Baidu, most
amisusers have never written front-end pages before, and they don’t know JavaScript, but they can make professional and complex back-end interfaces, which isUIimpossible for all other front-end libraries; -
Not affected by front-end technology updates : The oldest
amispages in Baidu were created more than 6 years ago and are still in use today.Angular/Vue/ReactThe versions of that year are now obsolete, and the popular onesGulphave beenWebpackreplaced. If these pages are not usedamis, The current maintenance cost will be high; -
You can use the visual page editor to make pages completely : Generally, the front-end visual editor can only be used to make static prototypes, and
amisthe pages made by the visual editor can be directly launched
Project link: https://github.com/baidu/amis
If you are interested, you can also learn from it.
.
3. H5-Dooring——H5 page building artifact (everyone can make pages like a fool)
H5-Dooring is a professional-level visual low-code project developed by domestic technology giants. Making H5 pages can be as simple as building blocks, and it is easy to build H5 pages, H5 websites, PC-side websites, and platforms LowCode.
At the same time, the editor supports multiple languages and multiple rendering modes, such as smart grid layout and free layout, which are very suitable for non-technical personnel. It takes 10 minutes to build a beautiful page. The technical structure is as follows:
It is worth noting that the pages we built through visualization on H5-Dooring can go online with one click, and support downloading page codes , so that people who do not understand technology can easily deploy the pages to their own servers, which is simply non-technical Good news for people. The platform is still iterating to create a better user experience.
Project link: https://github.com/MrXujiang/h5-Dooring
4. mometa - a low-code meta-programming editor for R&D
mometa It is not a traditional mainstream low-code platform (such as amis/h5-dooring), mometa but a research and development-oriented, code visual design and editing platform; it is more like dreamweavervisual gui editing for programmers.
The problems it solves are:
-
No dependence on the low-code platform, secondary development can seamlessly enter the code development mode
-
At the same time, it supports WYSIWYG visual editing to improve efficiency and development experience
-
Provide material ecology, customize materials, improve material use experience, and increase reuse rate
mometa The positioning is more based on the programmer's local development model, and the ability to visualize coding is added (the local code file itself is also modified); it is more like an auxiliary coding tool, rather than a (amis/h5-dooring) platform No-Code solution .
Project link: https://github.com/imcuttle/mometa
More feature introduction:
5. V6.Dooring——Visual large-screen production tool
When it comes to data visualization, everyone must have been in contact with it more or less. From a technical perspective, the most intuitive one is the front-end visualization framework, such as:
-
kick you out
-
quiz
-
Chart.js
-
D3. js
-
Vega
These libraries can help us easily create visual charts. V6.Dooring Provides a design scheme that can integrate different visual charts into a large digital screen by dragging and dropping, which greatly reduces development costs and cycles, and accelerates the digital transformation of enterprises. Its technical architecture is as follows:
In order to realize the ease of use of the product, V6.Dooringthe following core modules are designed:
-
Drag and drop implementation
-
Material Center Design
-
Dynamic Renderer Implementation
-
Configure panel design
-
control center
-
Functional Aided Design
Here is its editor:
It is worth noting that it V6.Dooring is also H5-Dooring developed by the author, if you are interested, you can study it.
6. form-generator - based on Element UI form design and code generator
Element UIThe form design and code generator can directly run the generated code in the project based on it Element; vueit can also export JSONthe form and use the supporting parser to JSONparse it into a real form.
I think it Formily is a bit similar to and, both are technical side construction projects.
Project link: https://github.com/JakHuang/form-generator
Summarize
Alright, that's all for today's sharing. Later, we will continue to share high-value use projects and technical combat sharing. If you have good suggestions, please feel free to give feedback.
The above is the whole content of this sharing, I hope it will be helpful to you ^_^