Since Angular/React/Vue changed the development model of front-end developers, new front-end frameworks are still emerging. This article will explore the possible direction of next-generation front-end engineering/frameworks in the traditional front-end space, starting with lowcode/ micro fronds, which have become increasingly popular in the past two years.

The full text is 3166 words, and the reading time is 6 minutes.

A, lowcode

Lowcode is by no means new. Instead of writing code by hand, it uses a GUI and configuration approach. From SQL statements to Dreamweaver, model-driven visual programming tools are cropping up.

The rise of Lowcode in the past two years is mainly attributed to the following reasons:

1. The front-end technology system and engineering system are mature, and many ambitious engineers are eager to use new wheels to pursue revolutionary breakthroughs in production efficiency; 2. Front-end developers are still scarce; 3. With the rise of b-end business, the big factory arranges in advance, hoping to profit from commercialization in the future;

The biggest difference with the rise of the front-end Lowcode platform is that most platforms are designed to solve the programming problems of ordinary people, not developers’ programming efficiency.

1.1 Domestic Lowcode platform

Currently widely used: Yiqixiu, Taobao Tianma based on page template construction, developer development template (or developer development module and template), operating personnel configuration page; Ali Cloud Fengdee, Baidu love speed build such component configuration platform (can be configured through components to achieve template function). These platforms all meet users’ needs for rapid site construction to a certain extent, especially when time is tight and there is no development manpower.

1.2 Does Lowcode solve all problems?

The Lowcode platform is designed to improve the efficiency of some interactive and simple front-end development scenarios, which means that the biggest problem for users is the use of scenarios and timing:

  • Who decides which Lowcode platform to use, r&d or product manager?

  • Once the platform is found, who decides which businesses can be built using the platform?

  • Who will build it?

  • What happens when the platform only meets 99% of your needs?

So a lot of times, we find the platform, configure the page, and end up with a requirement that can’t be fulfilled. Of course, many platforms allow developers to develop custom templates or custom components, but when you have custom component requirements, is it still more efficient to develop platform-based than to develop your own?

1.3 Scenario Examples

We incubated a new APP, hoping to configure a simple promotional page, the page content is a background picture, a download button. We have used the platform to configure the page and the download link of the button. At this time, PM put forward new requirements. When the user has installed the APP, he will not download it but directly open it.

1.4 serverless

Of course, the Lowcode platform also provides some serverless functionality, but the question remains, who evaluates whether to use Serverless? Who will use it? What should I do if I encounter an unsupported problem?

Second, what problems should the micro front end solve

The microfront-end is an architectural approach borrowed from the back-end microservices. There are endless microfront-end solutions on the market, so I will not list them. We just need to clarify what problems the microfront-end and front-end microservices are to solve: using the concepts of servitization and microservices, effectively splitting applications, realizing agile development and deployment, and solving the management problems of large projects.

2.1 Scenario Example

The services of two different teams need to be combined into one: e-commerce platform and video PC publishing platform, which need to be unified on the same site so that users can release videos and connect products in one path.

When the business is simple, two teams can work together, but as the business becomes more complex, more and more problems arise:

  • The technology stack must be unified

  • Develop and deploy coupling

  • A business BUG at run time can bring down the entire system

2.2 Why the micro front end

The rise of micro front-end shows that front-end engineering complexity increases, and more and more people encounter similar architectural problems. It shows that we need a higher-level application framework to help us solve architectural problems such as application separation and isolation.

Three, front-end framework and front-end engineering

3.1 Front-end Framework

JQuery /React/Vue are all designed to solve the problem of the view layer.

It is not difficult to understand that the core of the traditional front-end is the view. How to help the front-end developers to complete the view development work more quickly is the core problem to be solved by most front-end frameworks.

JQuery simplifies the DOM API for view-level development, while React/Vue bypasses the API and overturns the page development model. In this process, with the development of front-end technology, engineering plays an increasingly important role in framework applications. Most vUE users create projects through the VUE CLI.

3.2 What is Front-end engineering?

Engineering is an idea, the main purpose is to improve efficiency, that is, to improve development efficiency, reduce unnecessary duplication of work. The common direction of engineering is modularization, componentization, standardization and automation.

Reviewing the development of front-end frameworks, it can be found that the development of front-end frameworks and engineering development actually complement each other. Avoiding DOM API and achieving lower start-up cost through engineering is the root of the success of VUE/React, and Vue/React has solved enough problems on the running side of the code. The focus of the future development of the front-end framework needs to be more engineering.

= = =

Fourth, the next generation front-end application framework

Use highly engineered application frameworks to further drive componentization and reshape the development model again, which is what I think the next generation of front-end application frameworks need to do!

In other words, it needs to make it easier for developers to solve engineering problems such as componentization, automation and standardization. It can quickly enable developers to implement a lowcode, Procode, micro front-end and other platforms or architectures.

5. What we’re doing

Lowcode and microfront-end are highly engineering architectural practices. We separated the architectural ideas from them, developed a front-end framework for developers, and developed an internal LowCode platform based on the framework:

Its implementation has two parts

  • Data-driven front-end application framework that lets developers organize pages based on JSON configuration

  • Lowcode platform (visual configuration platform) maps configuration JSON to configuration items available to ordinary people

Component data:

The bottom layer is implemented based on the mature UI layer framework, and the top layer transforms the page into write configuration through engineering practice, so that developers only need to write a JSON configuration when writing pages.

The front-end work becomes two parts:

  • Generic component development

  • Page configuration development

In a nutshell, what this framework does is let developers organize pages based on JSON configuration.

5.1 Some framework details

5.1.1 specification

We have given a naming convention for component property names. For most components (business/generic), they have the same or similar property names, such as data/children/label.

  • Like useState, you can check and test specific attribute names, and easily implement precompilation optimization;

  • Reduce the difficulty of getting started, for most components, only need to know the component name can easily get started, conducive to component promotion.

5.1.2 How Do I Solve the Problem of User-defined Development

We divide custom development into two categories:

  • Custom components: mainly a build layer that allows custom components to be deployed online independently;

  • Custom actions: Similar to publish and subscribe, specify the trigger type (click) and trigger event name (dispatch(type)). All actions are managed at the top level.

5.1.3 How can I Quickly Contact the Backend

The framework recommends the following ways to interact with data: 1. Write actions (you can quickly getData using generic action: getData) 2. The component triggers action (init/click/scroll) 3. 4. Component subscribes to data and updates

5.2 What are his strengths

  • According to the concept of microservices, styles, custom components, custom methods can be third-party NPM, online link injection => better achieve modularity and module isolation;

  • Development page into development components and write page configuration => more convenient to achieve automation and standardization;

  • The development of components has a common and extensible specification => better realize componentization and standardization;

  • Automatic testing of JSON configuration, online deployment of JSON configuration, hot update and so on will be more conducive to engineering;

Six, vision

We wanted to find a balance between the Lowcode platform and common front-end development that would both improve the efficiency of traditional front-end development and empower Lowcode’s growth.

We hope to incubate the next generation of application frameworks to solve more architectural problems encountered in development and engineering practice.

Job Information:

The R&D department of Baidu Live is recruiting for r&d positions, including client-Android /iOS direction, server-side Go/PHP direction. We are responsible for baidu live broadcasting business. If you are interested in live broadcasting business, welcome to join us.

Resume mailing address: [email protected] (Delivery remarks [Live BROADCAST R&D Department])

Recommended reading:

Short video go research and development framework practice

Hundreds of billions of models in offline consistency assurance scheme details

How to quickly locate the program Core?

———- END ———-

Baidu said Geek

Baidu official technology public number online!

Technical dry goods, industry information, online salon, industry conference

Recruitment information · Internal push information · technical books · Baidu surrounding

Welcome to your attention