When I heard that Tencent’s new product “Cloud Development low code” was about to be tested, I was very excited. Yu PI immediately applied to the official website and successfully obtained the test qualification. Then, he used it to develop a small program and deepened his understanding of this technology through the 2020 Techo Park Developers Conference.

And on the afternoon of the last day of 2020, the public beta was officially launched!

Is the first net cloud development low code actual combat evaluation should not be excessive!

If you want to make an app or mobile website easily and quickly, be sure to spend 5 minutes reading this article!

Below the fishskin with everyone to eat crab. First understand what is the cloud development low code, and then through the actual combat development of “memorandum” small program to experience the cloud development low code platform, finally share personal experience, and give opinions and evaluation.

What is cloud development low code?

Before you can understand cloud development low code, it is important to understand “cloud development” and “low code”.

1. What is cloud development?

CloudBase is a cloud integrated back-end cloud service. It adopts the Serverless architecture, eliminating the need to build the back-end by itself and eliminating the tedious server construction, operation and maintenance in traditional development and construction. Meanwhile, static hosting, command line tools, Flutter SDK and other capabilities provided by cloud development reduce the threshold of application development, and front-end students can easily develop a complete mini program, mini game, H5, Web, mobile App and other applications.

With cloud database, cloud storage, cloud functions and other functions provided by cloud development, developers no longer need to care about complex back-end architecture and service operation and maintenance, but only need to focus on business logic development, which greatly improves development efficiency.

2. What is low code?

Low code means Low code, but in this case, Low code means little or no code (zero code) in development.

How do you write little or no code to implement features? We can think about ways we can reduce code duplication in our programming.

Suppose we want to develop a form-filling web site with input boxes, checkboxes, and checkboxes.

When you first develop a form, you might copy the component library code or write it all yourself. But when we develop similar pages later, will we write them again from scratch? Just copy and paste the code from the previous page and modify it a few times.

The more you copy and paste, the lazier you get. Can a tool automatically generate duplicate code? Of course you can, and implementing a simple code generator isn’t complicated, as simple as creating a file that contains a particular string.

If such a code generator is too crude and inflexible, we can also develop a visual interface that selects any component we need and dynamically generates different code. This is essentially a low-code application.

The essence of low code is an extremely abstract and templated process for application scenarios. Many well-known Internet companies have long launched their own low-code construction software. With the development of cloud computing and cloud native technology in recent years, these platforms are gradually on the cloud, and developers can develop a system without even downloading any software.

3. What is cloud development low code?

On November 29, 2020, Tencent officially launched the cloud development low-code platform to help more and more xiaobai become “developers”.

LowCode is an efficient and high-performance drag-and-drop LowCode development platform provided by Tencent cloud, which connects the front-end industry business upward and the massive cloud computing capacity downward to help enterprises vertically go to the cloud.

Low cloud development code will be tedious underlying architecture and infrastructure abstracted into a graphical interface, through from the template, drag-and-drop components and full visual configuration to quickly build applications (not just WeChat small programs, also support the H5, Web application, etc., the future will also support the App and so on, more development it only once and can automatically deploy multiterminal), It eliminates coding and allows developers to focus entirely on the business scenario.

Low code cloud development takes cloud development as the bottom support. The cloud native ability opens up the whole link of the application, provides a highly open development environment, and escorts the application all the time. The overall structure is as follows:

Cloud development low code has great significance.

On the one hand, the development threshold is greatly reduced. Through the cloud development low-code platform, even if you only know the front-end or back-end, and even if you have no technical background in products and operations, you can also make applications independently. Everyone can be a full-stack developer!

On the other hand, cloud development with low code can improve productivity and avoid repetitive work, allowing developers to focus more on business logic innovation, architecture and algorithm design.

Take an example provided by the government, Guangdong Provincial Small program to develop a “poverty certification” function, low code platform can directly reuse the basic components and existing business logic abstraction, code lines from more than 2000 lines reduced to 61 lines, the number of files reduced from 42 to 1, the delivery efficiency increased by at least 5 times!

Said so much, or through a real combat to take you feel the advantages of cloud development low code.

Actual combat “memo” small procedures

The purpose of the development of small program is mainly to experience the cloud development of low code platform, and hope to take you quickly start. So the little program is very simple, just a todoList, to record and view your to-do list.

The final effect is as follows:

The following hand in hand to take you to develop this small program, and in the process of development familiar with the cloud development low code platform basic usage. Don’t worry if you haven’t learned the front end or back end, because in the low-code world of cloud development, everything is so simple!

1. Create an application

Enter Tencent cloud development low code console to create a blank application. An application corresponds to a small program or website.

2. Create a data source

Cloud development gives us the ability to create a data source on the console, corresponding to a table of a database, with a cloud database and a back-end interface.

Click New Data Source to fill in the data table name and field, and configure the operation permission of the table (add, delete, change, search, etc.).

The preliminary work is ready to complete, the following interface development.

3. Develop the interface

Overturning the traditional way of writing front-end code to develop small program interface, cloud development low-code platform supports visual drag-and-drop development.

Enter the app edit screen first:

First, we will have a general understanding of the application editing interface, which can be roughly divided into the following areas. Later, we will understand the role of these areas in development.

First create a new interface, we need two pages, “home” and “Add to Do” page.

After creating a new page, we developed the home page, which displays the to-do list and provides a button to jump to the “Add To-do” page.

Click on the desired component directly to see the changes in the component tree, preview area and edit area in real time:

Each component has some default text, you can edit the content of the component, click the corresponding component in the edit area to modify:

The content structure of the home page is complete, and the whole process should take less than two minutes. If you write code to develop, copying code and modifying it, even if you already have components, can take a lot of extra time.

4. Embellish your style

The current interface looks very ugly, we need to beautify the page style, also do not need to write code, directly click on the “style” input value can be.

Modify the text color and background color of the navigation bar:

Modify the “Not yet to Do” text style, such as spacing, size, alignment:

Of course, there is also the flexibility to customize the style code:

The styling work is done, and you can do the same for the Add To-do page.

One caveat, however, is that the key of the form entry must be the same as the data table field names we originally defined, otherwise it will add a lot of extra work.

5. Connect the front and rear ends

Although the content and styling of the page are already there, the site is now a static site, and the to-do list data we see is fake and doesn’t change at all. In fact, we need to fetch the data from the database through the back end and present it.

How do you associate the data fetched from the back end with the front page?

If you do it in code, the first thing that comes to mind is Ajax, which stands for asynchronous JavaScript and XML, a web development technique for creating interactive, fast, dynamic web applications.

And the use of cloud development low code, only need to move the finger configuration, can be automatically associated.

Click “Data Source Variables” on the top action bar to create a ToDOS global variable (valid throughout the application) and associate it with the toDO data source you configured earlier. The data source action is specified as “query list” so that the TODOS variable holds all the data in the data table TODO. You don’t have to write your own code to query the data and then assign!

So how do you show the todos variable in the todos list on the home page?

This can be done easily using configuration. Since it’s a list, you’re adding individual components repeatedly, and you can configure the for loop to do that. Start by adding a for loop to the outer View component View.

Then dynamically bind the title and description to the Cell component in the view component. Multiple cells are generated through the outer for loop. Therefore, only one piece of data needs to be considered when configuring the inner component.

After configuration, the system generated some string type false data for us, which is convenient for us to view the effect.

If you already have todo data, the word “not yet todo” will appear to be an eyesore, should be hidden automatically, how to implement?

Create a conditional expression that displays if the todo data is empty:

After the configuration is complete, “Nothing to do” disappears.

6. Implement interactive logic

Today’s applets are nothing but eye candy with content and style. Clicking a button on a page doesn’t respond, and you can’t add a to-do list at all.

Let’s get the applet going by configuring events to interact.

First configure the click event for the “Add To Do” button on the home page. When the user clicks the button, the page will be redirected. Cloud development low code platform built-in material library, provides a large number of commonly used events and perform actions, without writing their own code.

Configure which page to jump to:

Configuring Forward Details

Similarly, we will add an event to the button on the “Add To-do” page to insert a list of items into the database when the user clicks. When we couldn’t find the right action from the stock, we had to write our own interactive logic.

In the low-code editor that pops up, add an event handler to the specified page.

Then we need to write the code for the processor, which looks like a lot of code here, but in fact the platform provides us with an example application. Just copy the code here and replace the data source name. It’s Ctrl C + Ctrl V that you like.

Then save the code, specify the action to execute, and you’re done. So far, this is the only place we need to write code. However, the applets have already been developed!

7. Preview and publish

After the development of the small program, click on the top of the “preview release”, you can see the effect!

Here because my small program hole is full, I will use the form of webpage H5 to browse. Wait a few minutes, and a link will pop up that you can visit, and you’ll see your work, and you can scan it on your phone.

Million point evaluation

After experiencing the low-code platform of Tencent cloud development, I seemed to find the pleasure of developing Windows desktop programs with VS and Qt Creator dragging and dragging. But the cloud development low code platform is a bit better, get through and combine the powerful ability of low code and cloud development, before and after the end do not have to write their own code to develop, do not need to care about the purchase and deployment of the server! This one-stop development experience is really great!

And the use of cloud low code platform developed applications naturally support cross-end, do an application, can support small programs and H5, or even other applications.

Although other cloud service vendors have similar low code platform, but considering WeChat small program itself is belong to product of tencent’s own, use tencent cloud cloud development low bit most on relative stable platform, and WeChat ecological connection closer, can be used directly WeChat open platform features, problems were also more likely to locate and solve.

Here are five simple ways to evaluate it.

Ease of use

There is no doubt that the purpose of the cloud development low-code platform itself is to simplify development and lower the barriers to application development, so ease of use is an important metric.

The ease of use is good. The whole editing interface is simple and clear, you can easily adjust the order of components, set the content of components, style, interaction behavior.

The cloud low code platform provides some ready-made application templates that can be applied directly to greatly reduce the workload. Even without using a template, it’s easy. Aside from some custom business logic, developing a complete application requires almost no code at all, and there are mostly friendly hints where to write code. Therefore, as a programmer with some experience in front and back end development, I was able to do it without reading the documentation.

Of course, I think there are a lot of areas that could be improved, such as the style of the component displayed when hovering over the preview area, event information, etc.

richness

At present, although the cloud development low-code platform is still in the public beta stage, it has provided a lot of common components, such as forms, media, data display, canvas, wechat open ability, etc., which can basically meet the needs of development. There are also some page templates for enterprise applications, right out of the box!

Expect more ready-made page templates and better encapsulated business components for specific business scenarios in the future.

flexibility

I was worried that a low-code platform would compromise development flexibility with a lot of simplification and encapsulation. But after experiencing it, I realized I was overthinking it. You can customize everything from the application and page information to the CSS styles and JavaScript code of each component. You even have the flexibility to control the page life cycle!

Of course, it’s hard to be 100% flexible. Custom components and page templates do not appear to be supported at this time, but look forward to opening up this capability in the future.

maturity

Tencent’s cloud development technology and cross-end development framework have been developed for several years and are relatively mature. However, as a new product born from integration, whether it can withstand the test of major projects is still unknown. We are looking forward to more practices and data in the future.

ecological

Cloud development low code very well through Tencent cloud development of the integrity of the ecology, with the help of cloud development strong technical ability to thrive, can be described as the epitome. From the classic cloud database, cloud function, cloud storage, to cloud hosting, content management CMS, the symbiosis and connection of these technologies make 1 + 1 > 2, which is also the most surprising part of cloud development.

For example, in data source management and application management interface, we can see the figure of data management background, namely Tencent cloud CMS. It can be used to easily manage the data sources we define, without building their own management background, directly save the cost of building a system!

In general, cloud development low code platform is a product that conforms to the fast pace of development era, which really solves the problems of traditional development such as low efficiency and repetition. The future can be expected!

Finally, if you want to learn more about Tencent cloud development low code platform, you can click below to read the original text to see Tencent official “Fast development of a cloud development low code application” tutorial.

If you have a classmate who wants to make a small program or mobile website, be sure to share this article with him, I believe we can feel the development and use of their own small program happiness!

By the way, as a heavy user of cloud development, I am getting lazier and lazier