Visual Construction System for Front-end Engineering Practice (1)

Original is not easy, I hope you can pay attention to us, and then conveniently click a like ~~

This article was first published on the blog of zhengcai Cloud Front-end Team: Visual Construction System for Front-end Engineering Practice (1)

background

With the continuous development of the company’s business, the demand for marketing activities, advertising, page revision is increasing, relying on pure manual code has been unable to keep up with the growth rate of demand. Work overtime? Hiring? It’s not smart enough, it’s not forward-thinking enough, and efficiency becomes the key. How to improve effectiveness? Where to start? That has to mention is the front-end efficiency artifact – building system, the following will be from many aspects, to you a brief introduction to the zhengcai cloud front-end team ZooTeam visual building system – Lu Ban.

What is Lu Ban?

Luban is a building system for fast page generation based on business components.

Business pain points

A large number of modules are developed repeatedly.
The configuration is complex and scattered, the development work is fragmented and the maintenance cost is high.
The demand scheduling time is long and the communication cost is high: a small demand in operation or even a page data change needs to wait for the scheduling, development and design, coding, testing, online deployment and other processes.
Jenkins projects take a long time to compile and deploy.

The advantage of Lu Ban

Improved user experience: The page is static, rendering and access faster.
Improved stability: The Nginx direct forwarding solution provides better page routing availability and response performance. In addition, the Nginx direct forwarding solution supports more robust DISASTER recovery (Dr) solutions, rapid version release and rollback.
Rapid response to business requirements: Through componentized reuse, it can quickly respond to business requirements and improve r&d personnel efficiency.
Better business empowerment: enable product and operation students to participate in the construction of the page, and improve the efficiency of business iteration and data availability.
Better systematic capability: Based on the system construction, it is easy to connect the horizontal performance detection system, stability guarantee system, operation and maintenance deployment system and online monitoring system, forming system-level resultant force and compound interest.

The cause of lu Ban

This is a story that has to be told, that winter…… Anyway, when I first came to the company, there was actually a program called Lunatone, how do you pronounce it: Luna Tom, something like that. The project also had an old build system based on a grid layout, configurable with a bit of data, and components that could be dragged and nested, which was pretty cool, but it had its share of problems:

The technology is old, it’s a template language for a small audience (I don’t, I don’t) and few people can maintain it anyway.
Grid layout? Component nesting? For operations, products, grid layout, nested operations are too complex!
Business components upgrade, the system needs to recompile and release, compile for 20 minutes, life is passing!!
Set up the page environment: test the environment of the page, I have to pre-send, online again, a page set up 3 times? Life goes by!!
No release control, online directly modify the page can be released, has produced NNN times online P1 fault! Don’t get paid ！！！！

Based on the above reasons, and in our “hall Lord” adults “egged” resolutely began the journey of Lu Ban, never to return.

Lu Ban’s friends

Material store (Basic)
Since the research point
Performance testing
Put in the system
Application management

Lu Ban’s “initiators”

Lu Ban from the front-end architecture > back-end architecture > database design > deployment scheme design > DISASTER recovery scheme design, are designed and coded by front-end developers.

Luban system overview

Luban usage process

The following figure shows the steps of using luban’s building page

From the front desk management system, from the user’s point of view, how to build a page.

Management system

Site management
Page management
Component management
Template management
Schema validation tool
Data Kanban (as mentioned in “Value of Lu Ban”)

Site management

Page management

Added: Added pages.
Edit: Jump to “Visual build platform”.
Configuration: Modify page data.
Copy: Copy the page.
Address: Open the page corresponding to different environments.
Performance: Performance detection (Best Policy system).
Publish: Publish pages to different environments.
Log: Online publishing logs.
Rollback: Roll back to the previous version online.
Online/Offline: Whether the page is accessible.

Component management

Components, which we also call materials, need to be properly managed as the foundation of luban’s system. The component comes from the Git repository, synchronizes the information from Git to the database, and pulls the source code to the server for management. The component management page requires only three operations:

Pull the new component/version: compare the database with the Git repository, save the components not recorded in the database to the database, and pull the source code from the Git repository to the server.
Update: Updates the component information (version, name, category, etc.) to the database and pulls the latest Tag source code to the server.
Preview: The component preview page is displayed.

Template management

Schema validation tool

This function is used to facilitate Schema verification during development. Enter the compliant Schema data on the left, and the configuration items are displayed on the right.

Visual building platform

Visualized building platforms is the soul of Lu Ban. As can be seen from the figure, the left side is all the components that can be built. At present, we have classified the components into functions, and in the future, we will open more dimensional classifications for users to facilitate component search.

The middle part is the building area, where the user can see the real-time effect of the page and click on the component to configure the component data.

On the right is all components that are in use on the page. You can upgrade components or delete unwanted components. You can also drag components up or down to change the order of components on the page.

On this platform, users can not only set up the page, configure data, but also preview the page in real time in real environment.

For the page, the platform provides automatic buried point, configuration data error correction functions.

For components, the platform provides component update and abnormal component alarm functions.

Finally, click Save to submit the page data to the database. When it comes to turning data into static HTML as a “homework assignment,” remember the cardinal motto: the way is better than the hard. ╭ (low ` ∀ ´ low) ╯ ╰ ╮ (low ◡ ‘low’)

Component Data Configuration

Component data configuration supports configuration field types such as String, Number, Boolean, Array, Object, Color, Select, Upload, and two-dimensional Array.

Examples of simple types:

Example of a two-dimensional array:

Through the above steps, we can build a page, click to publish to different environments can be.

Routing module

Let’s take the vue-router as an example: different urls are used to access different pages.

Luban dynamic routing

Enter the Nginx layer, jump to the Luban server through the Nginx wildcard rules, and then on the Luban server through the site, zoning, URL, page status from the database search page, if the page exists, according to the page identifier returned from the local, if not local, try to get from OSS; If the page does not exist, the 404 page is returned.

Technology stack

Front end: Vue. The company’s front end page is realized based on Vue. Luban, as a front end page building tool, also adopts Vue.
Back-end: Node (egg.js)
Database: MySQL, like MongoDB classmates don’t spray me ε=ε=ε=ε=ε=ε= ε=ε=ε=ε= chrysene (; ￣◇￣) our r company.

The core code of Luban system

Here, I will take the one billion yuan worth of the code secretly told you (hope not to be dissuade /, everyone is not a key point of praise, comment, double click 666, iron juice people!!

That’s right! This is the core code of Luban system, based on the “is” feature of Vue. For everyone attached Vue official document: cn.vuejs.org/v2/api/#is

The value of Lu Ban

Set up the page is the core function of Luban, improve efficiency is the core value of Luban system, from the middle of June online has been more than 3 months, Luban has been highly recognized by the company, and has been applied to various key business lines, from the point of view of the data, the future is bright. ง ง, ̀ _, (́)

To be continued

Luban system is an indispensable part of the front-end system construction and the only way to improve the efficiency of the front-end. It not only avoids the repeated development of components, converges the simple configuration background, but also enables the operation role: the operation can directly build the page on the platform, and release the version at any time after passing the test.

The process design of Luban system follows the PMO project management process of the company, but is not confined to it. It has made necessary breakthroughs and simplified the complexity, which is widely recognized by both business and users.

Luban system and Web performance optimization analysis system (Best system) through, can be on-line, view page performance score, fail can not be published oh, if you want to understand the best system, please click on our another original article automated Web performance optimization analysis scheme

In the following, I will explain luban’s system architecture, technical key points, database design, deployment scheme, disaster recovery strategy, etc. Welcome to first pay attention to the wechat public number “Zhengcai Cloud front end team”, or on the mining “Zhengcai cloud front end team”, in order to get the latest information in the first time.

, recruiting

Recruitment, front end, belonging to ZooTeam, more than 50 partners are waiting for you to join the wave ~ if you want to change the things you have been doing, I hope to start doing things; If you want to change, you’ve been told you need to think more, but you can’t change; If you want to change, you have the power to achieve that result, but you are not needed; If you want to change what you want to accomplish, you need a team to support you, but there is no place for you to bring people; If you want to change “3 years of experience out of 5 years”; If you want to change the original savvy is good, but there is always a layer of fuzzy window paper… If you believe in the power of belief, that ordinary people can achieve extraordinary things, that you can meet a better version of yourself. If you want to get involved in the growth of a front end team with a deep understanding of the business, a sound technology system, technology that creates value, and spillover impact as the business takes off, I think we should talk about it. Any time, waiting for you to write something, to [email protected]

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.