What Does Frontend Low-Code Mean?

I. What is Low-Code?

A low-code development platform (LCDP) is software that provides a development environment used to create application software through graphical user interfaces and configuration instead of traditional hand-coded computer programming. A low-code model enables developers of varied experience levels to create applications using a visual user interface in combination with model-driven logic.

Replace traditional hand-coded programming with GUI and configuration methods, allowing developers with different experience backgrounds to create applications on low-code development platforms based on visual UI and model-driven logic

Use low-code platforms to create entire Apps, or only require manual coding in some specific scenarios, reducing the amount of manual code needed. On one hand, it can improve business delivery speed, on the other hand, it can allow a wide range of non-professional developers to participate in application development, lowering development barriers and labor costs

Technically, the key elements to implement low-code platforms are model-driven design, automatic code generation, and visual programming, hiding lower-level code details through these means

Low-Code vs No-Code

The most low degree of low-code is no-code, that is, the biggest difference is that no-code requires no coding:

No-code development platforms are similar to low-code development platforms but require no coding at all.

Specifically, main differences are:

Platform users: Any business personnel can use no-code platforms, while low-code platforms only face developers (although professional requirements are not so high)
Core design: No-code platforms tend to adopt declarative model-driven mechanisms, letting users manipulate and complete application design through drag-and-drop or simple expressions, while low-code platforms tend to specify core structure of applications through manual coding
User interface: To simplify application design, no-code platforms generally only support built-in UI libraries, while low-code platforms may provide more flexible UI options, but at the cost of requiring additional coding, increasing usage complexity

II. What's the Difference from Dreamweaver 20 Years Ago?

Sounds like there's no difference from Dreamweaver in the web three musketeers era:

[caption id="attachment_2251" align="alignnone" width="625"] Dreamweaver[/caption]

Compared with modern frontend low-code development platforms, looking at the surface alone, visually automatically generating some code indeed has no big difference, the internal substantive differences are:

Target scenarios differ: Dreamweaver more focuses on frontend development scenarios, while in low-code development platforms, frontend is only part of complete applications, server-side data, routing, logic flows, etc. all need to be considered
Visual operation granularity differs: Modern low-code platforms usually have multi-level reuse abstractions like components, blocks, pages, templates, Dreamweaver only faces HTML native tags
Engineering chain completeness differs: Dreamweaver only covers development, preview, deployment (FTP upload) stages, while modern low-code platforms mostly cover complete lifecycle, including debugging, testing before release, monitoring, operations and other stages after release

With the evolution of frontend engineering systems, modern low-code platforms fully consider important factors like module reuse, ecosystem connection, frontend-backend linkage, engineering management, etc., having qualitative leaps in maturity and development efficiency compared to Dreamweaver

III. Why Does Frontend Need Low-Code?

In recent years, low-code concepts have gradually become popular in frontend field, mainly for these reasons:

Frontend developers being resource-ized: Large workload, but technical requirements mostly not high, production efficiency has become a problem that must be solved
Open frontend technology system: Low-code type code generation tools easily combine with frontend technology system
Maturing frontend engineering system: Only under premise of mature stability, will转而 pursue transformative production efficiency breakthroughs

Frontend Developers Being Resource-ized

Facing large amounts of low-technical-content requirements, frontend developers become easily replaceable resources (like low-value consumable assets), frontend labor then becomes bottleneck of product requirement iteration

At this time, the best solution is to improve production efficiency through tooling and automation, breaking through frontend resource bottlenecks, naturally leading to low-code direction exploration and practice, such as form generators in jQuery era, H5 page production tools in mobile era

Open Frontend Technology System

Compared with mobile Native clients, server-side and other technologies, frontend technology system is most open (even all source code is public), reflected in:

Third-party module introduction cost is extremely low: Whether layout containers, style themes, logic modules, or even entire sites, one line of tag directly imports and can be used, even can dynamically import at any time
Has open ecosystem based on Web standards: Entire frontend ecosystem is built on unified standard layer, any innovation is easy to accumulate, and can always stand on giants' shoulders for further innovation

Therefore, low-code platforms can move forward standing on giants' shoulders, further exploring on basis of component libraries, build tools, even visual design, automatic code generation. On the other hand, frontend low-code products can all be applied to any existing frontend applications, whether generated React/Vue components, jQuery forms, or SPA (Single Page App), MPA (Multiple Page App)

Maturing Frontend Engineering System

Not ten-plus years ago, nor in farther future, but now, why?

Most important point, low-code platform development is under background of frontend engineering system maturing. After all, only when warmth and food problems are mostly solved, can转而 pursue higher production efficiency

From technology evolution perspective, frontend low-code exploration is closely related to frontend engineering development history:

Frontend engineering has gone through these stages:

CLI tools: Scaffolding, build tools, debugging services, etc.

GUI clients: GUI-ized CLI tools, not much difference except interaction method

Customized end IDE: Based on IDE extend scaffolding, build, debug, release, monitoring and other engineering chain capabilities

Cloud IDE: Based on Web IDE extend series of engineering chain capabilities, entering cloud R&D era

(Extracted from [Core Value of Customized IDE](/articles/定制化 ide 的核心价值/))

In CLI/GUI tool era, efficiency improvement at coding level mainly reflects in automatically generating template code through scaffolding, reducing boilerplate code writing, letting developers code less

In following end/cloud IDE era, API hints, auto-completion, code snippets and other practical functions are all integrated in, letting developers code very fast

After IDE era, efficiency improvement at coding level has reached extreme, further production efficiency improvement needs transformative breakthrough. Thus, welcoming low-code era, letting non-professional developers also "code" well and fast

From frontend engineering perspective, low-code is important direction for engineering efficiency improvement (also necessary path), not hard to discover low-code evolution traces:

Model-driven design: From directly manipulating DOM to data-driven views, improving code predictability
Automatic code generation: From templates to code snippets to building, continuously reducing manual code amount
Visual programming: From component assembly to drag-and-drop generation, reducing inefficient repetitive work

P.S. Actually, low-code platform development is not limited to frontend field, mobile Native clients, server-side also have many low-code explorations, such as Xcode SwiftUI:

VS Server Explorer:

And Aliyun Logic Orchestration:

Furthermore, according to research institution Forrester estimates, low-code development platforms have extremely broad market, can be subdivided into database, request handling, mobile, process and general purpose low-code platforms:

Segments in the market include database, request handling, mobile, process and general purpose low-code platforms.

(Extracted from Low-code development platform)

IV. Low-Code Exploration in Frontend Field

Examine traditional frontend workflow:

Business requirements -> Design drafts -> Application/page/component development (restore design) -> Business logic code -> Build -> Release

Specifically, restoring design divides into 3 ways:

Develop single component: Visual effect restoration and module function development
Develop pages based on components: Component assembly, inter-component interaction and page overall logic connection
Develop applications based on pages: Route configuration

Many of these stages can improve efficiency through code generation tools:

Design drafts -> Component code: That is automated design restoration, such as imgcook
Component code -> Design materials: Reverse conversion, enriching design materials
Components -> Pages: Simplify component assembly through visual building, automatically generate page code
Pages -> Applications: Visual configuration generates SPA or MPA
Business requirements -> Business logic code: Generate boilerplate business logic code through visually editing conditions, binding data, specifying data flows, etc.

On basis of design restoration automation (and reverse conversion), boundaries between UI materials and frontend components almost no longer exist, UI materials and frontend components can interoperate (UI materials are frontend components, frontend components are UI materials), not only improving production efficiency for both sides, but also greatly reducing collaboration costs

V. New Possibilities in Low-Code Mode

Visual R&D mode: Complexity transfers to tools, professional requirements lower
Low-code combined with intelligence: Materials/components intelligent batch generation, combined with client intelligence, personalized recommendation and other technologies, letting users unable to stop
Low-code enters professional development tools: Provide some visual auxiliary tools in IDEs facing professional developers, such as Alipay mini-program IDE
Frontend-backend integrated low-code solution: Go further on basis of end-cloud integrated development, automatically generate, deploy corresponding BFF/SFF code

Like cloud computing products transferring professional operations work to cloud suppliers, low-code mode transfers professional component development work, even BFF interface development work to visual R&D tool side, empowering professional frontend technology to more non-professional developers in inclusive way, meanwhile visual auxiliary tools combined with professional IDEs, also letting professional developers more efficient

On the other hand, after frontend productivity and production efficiency improve, professional requirements lower, things previously unable to implement due to development cost limitations can all start exploration, such as personalized UI for massive segmented user groups (so-called thousand people thousand faces), personal site building in self-media era (even smallest individual can have own platform), highly time-sensitive varied operations (not just sending push messages)...