preface

Topic and content introduction

  1. Now I am doing building system, what have I gained from this “Early Talk conference” with building as the theme?
  2. What was it like being on The Early Talk live?

Wanted to use “to” early chat convention is a what kind of experience “, “as the title, it’s a sharing of the assembly in the Internet of enduring the title, but this period is, after all, share will be in the form of an online live, if only to experience as the theme, hard to avoid some strength, more should build and harvest as the main melody.

background

For nearly six months, I have been involved in the development of the company’s internal business system visualization and automatic building platform, realizing the functions we need from 0 to 1, and using it to launch the internal systems such as traffic cluster, gateway, log and BFE. I am new to automated platform architecture, so I have been looking for information on this area.

As an Internet practitioner, I have to say that DIGGING gold is a community I must go to every day. Accidentally, I found a whole 7 projects with the theme of building a “Early Chat Conference”. Before signing up, I was always hesitant, should I pay to sign up to watch the live broadcast? Or subsequent free video and data, helplessly looking at early bird tickets didn’t, in the desire to understand how to implement the visualization builds a consortium with Scott, a great god created the chat conference early what is under the dual drive of an organization, I still buy tickets for the live and attend on time, the harvest is worth recalls the fare? Ha ha continue to read.

Listen to live broadcasts with questions

But as miao Jing, the little sister lecturer of this issue, said, such tools are nothing new. Each big factory has its own solution, and has been studying the relevant information of visual page generation tool (automatic platform building). Among them, there is a detailed implementation introduction of cloud Papilio generation tool in the column of Ant Financial Experience Technology of Zhihu. I participated in the online live broadcast of The Derivation and Implementation of Cloud Butterfly Visual Construction and Intelligent Visualization System AVA of the Third SEE Conf of Ant Financial, which benefited a lot but was really not satisfying. After all, there were only two projects with the theme of construction.

The day before the conference, I couldn’t wait to go into the live broadcast room to listen to Scott debug the equipment, and woke up the next morning to find that Scott had combined more than 200 pages of PPT that lecturers were going to use in the conference and prepared for the conference that day. So should we also prepare for the conference?

Before this, I have been conducting various twists and turns exploration and attempts on building tools, and I have also written some notes and experiences (sorted by time). It seems that the anticipation for this conference may be driven by the detour I have taken.

  • Write down table design specification and page visual generation tool development
  • And don’t have to write the query list page | reduce low-level repeated labor vue + iview
  • The development of a front-end system generation tool implementation ideas
  • React has no thresholds for drag-and-drop layouts and form designers
  • Putting sessions in the Node layer is something we’re happy to do

For a fledgling in the field of building systems, I have a lot of doubts and questions, can you find the answer from this share?

  1. Who are these tools for?
  2. What competencies are required?
  3. How is it structured and which modules are there?
  4. Is there a robust open source schema protocol?
  5. What is the future of scaffolding?

As an aside, I discussed with my leader before whether the page data exists in the form of data or in the form of code. How do these complex and trivial small problems big factory solve?

The first “how to implement the PC site set up | Schema”

Eat breakfast I went into the studio, host and Scott in busy preparing for the conference before the final, due to certain software for the use of screen problem, but our host little brother anxious that bad, finally solve all lecturer at first, and the original is a farce, but the host little brother a great sense of responsibility, always barefoot in the debug, didn’t wear socks, In addition to the organizers of the reliable image of the move, across the microphone felt a chill, hiss ~~.

Ok, let’s get down to business. Scott first gave a speech and introduced the purpose of the conference. Then Luo Chen, the first lecturer, started to share luban tools.

Introduction to the

Ruban can quickly build site application in system, page through component assembling online, learned that the team in share most of the projects are the same type, the function comparison, to build the tool also has a track record, to improve the efficiency of the repeated work, internal development system is very similar with us, we are just background business system, Luban is an application similar to CMS portal or mall, which is equipped with permission management and data statistics. Personally, I think building a platform based on applications is bound to consider the problems of users and permissions, while the biggest advantage of data statistics is that it can be completed with one hand.

How to implement component property configuration

Application => Page => Component => Properties, and finally the properties of the component, what are the properties? Props (JSON). How to make component properties configurable? It mainly relies on JSON Schema description, luo Chen described this part in detail, attribute configuration is to achieve a visual panel of JSON Schema specification, the more complex function point is the recursion of array and object type, see PPT for details.

Property configuration is the embodiment of the visualization, of course, is a must in this field and foundation of the tip of the iceberg, such as ali AVA chart tool is through the algorithm after analyzing the data generated by attribute configuration chart, and the schemes to prop up a set of mature truly there are still many problems to solve, such as components, components rely on version management, Packaging of static resources, deployment of different branching environments, and so on.

Some friends asked how to deal with the dependency of NPM used in the component. Luo Chen answered very responsibly and honestly that we have not dealt with this yet.

The deployment of

Luban gives an instructive approach to the deployment part. Luban itself is just a generation tool, and it should not and does not need to differentiate environments, but Luban can directly publish generated projects to each environment.

conclusion

Lorchen also asked the question, do we make a tool that is powerful and necessarily complex, or do we make a tool that makes operations easier and easier to use?

Based on my experience in making visual building tools, I also strengthened and deepened my understanding of component management, such as component granularity, quality, communication mode, performance and so on.

The second “how to implement low code page set up system design | Paas services”

If the theme of the last sharing was deepening for me, then this one is enlightening for me.

Initial misgivings

Is the tool operational or R&D oriented? I think I have a clearer understanding that non-developers are more suitable for no-code, while developers are more suitable for low-code. Ps: A single section is just to deepen my understanding of the tool;

Regulation vs. ecology

If you put iceluna simply understand as a page building system that you are very wrong, ICELuna to do is a set of platform building protocols, unified page building platform specifications, incubation building products, ICELuna is not the beginning of such ambition, but also step by step exploration and accumulation, It has taken three and a half years. Admittedly, even a small platform needs at least half a year to build the infrastructure. Isn’t it better to form a standard alliance than to form a separate array like scattered sand?

For example, the Scheam protocol proposed by Iceluna should be valued as a valuable wealth of experience. We have been bogged down in frequent increase and modification of Scheam protocol. However, iceluna is not open source yet, and its editor architecture is very attractive. Let’s take a look at it.

Infrastructure spree

From my personal experience, an automated build tool depends on a lot of infrastructure, such as our internal development tool to really separate pack out hard, user login to access SSO system, rights management need to access the RBAC system, necessary OSS file management ability, git repository and branch management, rely on the ops automatic deployment, etc., Editor component drag layout, rendering engine, sandbox isolation, property/event configuration, multiplayer collaboration, project dimension management (domain name, log, etc.), component dimension version, dependencies, documentation, etc.

Each takes time and effort, the focus is on the work is not mature and normative, great may reconstruct or overthrown because caused by wrong design cannot maintain, if iceluna such a specification of metal products is committed to promoting automatic build tools and provide infrastructure services, that’s something to cheer. (ps: the architecture of the editor is reminiscent of VScode).

Halstead software complexity algorithm model

Big factory work is so reasonable, polite and disciplined, out of scientific guidance of the theoretical basis. Realistically speaking, simple and repetitive scenes can be improved by 10 times or even tens of times, and the method is not necessarily visual construction, such as copying templates can also be achieved; In other words, complex or customizable tasks are better suited for individual development.

conclusion

Immersed in iceluna’s inspiration and good expectations, if the establishment of the agreement committee, how hope to join such an organization to contribute their own little contribution.

The break

In a twinkling of an eye, it was already 12 o ‘clock at noon. The wonderful sharing of lecturers in the morning was really a spiritual feast, but MY pot of beer could not afford to support my hungry belly, so I quickly boiled a bag of rice noodles to fill my stomach.

In the past, listen to Lao Luo’s speech, the organizers always want to put a few provocative songs, but in the studio only put a static schedule picture, jokingly asked the next small assistant in the group, is not afraid of publishing rights fee? It turned out that in the short time at noon, when I was wolfing down food, the hosts and promoters had to restart the computer quickly, in order to make the afternoon more stable broadcast, really worried about it.

Third the | how to implement the H5 page design structures, system data model,

This is a 1.9W+ page generation tool, must be a very mature tool, MPM goal is very clear, operation personnel use, in the layout ability to simplify complexity, but not simple; MPM is amazing in terms of performance. What impressed me most about this sharing is the four words “data model” in the title. Personally, I think the theme of this sharing is also these four words. Let’s take a look.

Template, multiterminal, SSR

The basic and essential functions of a building tool are not described here. The difference between other building platforms is automatic testing, speed measurement, and reliable disaster recovery. In addition, the concept of templates is not quite the same, split in turn, page => component => template + attributes, and templates and themes are very similar, a component has multiple templates, equal to multiple topics, and MPM is multi-end oriented, including small program, static H5, SSR ability.

The data model

But the point is, back to the question, what does a data model mean? ** For the display page of component assembly, the maximum probability will make the request repeated, scattered, ** and for the marketing page is more demanding, how to ensure the multi-end adaptation, fast building, SSR ability on the basis of interface aggregation?

MPM is very delicate in this point, from the data source specification of components, page data, SSR initial state function and a series of details processing, after listening to Mu Tong’s share, I think as far as MPM is concerned, there may be no word more appropriate than the “data model” defined by the lecturer himself.

conclusion

A student asked: How to aggregate two requests on the same page and interface with different parameters? The lecturer immediately answered: join in and return 2 results for a request; That’s probably the difference between being done and not being done.

Of course, this is a very demanding performance requirements of the solution, targeted, not necessarily suitable for all page building platform; But we do need to do some thinking in network optimization, how to properly handle network requests in the platform.

Game 4 of the how to generate code for intelligent building materials | automatic coding”

First of all, we should thank the little sister lecturer, listen to the wonderful net cold is serious, but still insist on sharing with us, moved.

ImgCook is a tool for PSD To HTML + CSS code. After hearing myoclear’s sharing, I realized I was wrong. It’s a real ai project.

Starting from the history of code generation tools, the lecturer leads us into a higher dimension of thinking: intelligent revolution, artificial intelligence is not only happening in other fields, but also in our own programming field. This helps us understand artificial intelligence beyond the level of pure code generation tools, and illustrates the scenarios of Nocode/Autocode and Lowcode, and more importantly the concept of Procode, how human intervention generates results, full link monitoring, reverse training model, Keep imgCook’s sustainable positive growth. Besides, iceluna and most of Ali’s build tools have been plugged into imgCook, and imgCookS are used to generate components.

ImgCook’s goal is not just To train more mature algorithms To generate PSD To HTML + CSS, but To generate business code directly based on PRD and PSD. I see the future, but also feel anxious.

conclusion

I was holding my chin to prevent it from falling to the ground because of shock. Personally, THIS sharing was the climax of the conference. I pulled the students’ thinking from code tools to artificial intelligence, redefined our relationship with code, and seized everyone’s spirit.

At the end of the lecture, the lecturer also encouraged us to have the courage to contact and enter the field of artificial intelligence, which was not so scary. There were many front-end engineers in the lecturer’s team who were slowly shifting to artificial intelligence positions, which also made me have a strong desire to learn Python. But before that, I think I should have a better understanding of openCV, Tensorflow. js and other artificial intelligence-related knowledge. Finally, I hope pipcook can appear in our work as soon as possible, so that we can turn to higher-level programming work.

conclusion

I was immersed in a imgCook trend of artificial intelligence, forget all about the job of the tickets already, if you have been in the first four games to attend the notes I shallow appetizing appetite, then you should be like before I register, unbearable hot heart, desperately waiting for the assembly of recorded video and PPT, the only difference may be that I can sign up 😜 at the time, If you’re in the field of visual scaffolding, I’m sure this is a technical dish to look forward to.

On the next

In order to share my harvest and joy as soon as possible, I have to split this note into two parts. I don’t know which comes first, “the next part” or the conference recording, but I will definitely finish the next part according to my own way, so what is the content of the next part?

As can be seen from the poster, in addition to my parroting lecturers’ technical hard goods in seconds, cross-terminal and mass deployment, I will think more and summarize my understanding of building tools after knowing the structure of dACHang’s building products.

At the same time, I reviewed my experience of attending the conference. When “Front-end Early Chat Conference” was in full swing, I had no choice but to make a modest contribution in the way of suggestions, typing out some small and harsh questions and suggestions on the keyboard. But I believe it was Scott’s original intention to make the participants have a better user experience.

Finally give a person a praise, hand have lingering fragrance, ha ha 😸.

3) | the early chat to build to build my harvest? (the next)


About the conference: front-end early chat conference goal to become useful, understand, copy to go front conference, plan to do 12 in 2020, jointly held by the front-end early chat and nuggets, the future front-end early chat conference schedule dynamic, data download please scan the code below the public number to follow: