The Core Concepts of Front-end UI Components
This article is the first in a series, primarily explaining several basic concepts and the subjects we aim to explore. The purpose is to establish a unified “context” of understanding to minimize comprehension barriers caused by information asymmetry.
This series of articles focuses on front-end UI components, and I hope to take the time to delve into the related content through this series.
Each term is a concept, like a “data packet”, and depending on the amount of information it “compresses”, truly understanding a word may require a substantial knowledge base.
Basic Concepts
What we are discussing is “front-end UI components”, which can be further broken down into the three words “front-end”, “UI”, and “components”. To understand what “front-end UI components” are, we must first grasp the meanings of these three words.
UI? GUI?
When discussing the visual aspects of software, we often use the abbreviation “UI”, and sometimes “GUI”. Although they have different meanings, in most cases, we equate these two terms. Here, I attempt to help differentiate between them, even if the usage remains the same, at least to be aware of their differences.
The way humans interact with machines, or more precisely, with artificial systems, and how to better facilitate this interaction, is something people have always been exploring—this is what the term “human-computer interaction” represents. “Artificial systems” can be a variety of physical machines, as well as computer systems and software.
The essence of “interaction” is the exchange of information between people/objects, that is, information is output from one person/object and input into another. Therefore, the two people/objects, the output method, and the input method are the basic elements of interaction.
In the context of human-computer interaction, the objects of interaction are humans and artificial systems. Humans output information through actions like typing, touching, and speaking, and input information through senses like sight, hearing, and touch; artificial systems output information through text, graphics, sound, etc., and input information by converting the information generated by humans in various ways into electrical signals.
The space that facilitates the exchange of information in human-computer interaction is called the “human-computer interaction interface”, also known as the “user interface”, which “UI” is the abbreviation for.
Different interaction methods and levels produce different “user interfaces”, such as the text-based “Command-line Interface”, the graphics-based “Graphical User Interface”, the voice-based “Natural-language User Interface”, and so on.
Among them, the “Graphical User Interface” is currently widely used, and its English abbreviation is “GUI”.
Front-end Development
So-called “front-end development” involves using web front-end technologies for GUI-related development work, and those who specialize in this type of work are called “front-end developers”.
In the past, “front-end developers” referred to “page reconstruction engineers” and “front-end development engineers”; as businesses and technologies have evolved, “page reconstruction engineers” have gradually faded into history, and “front-end developers” have essentially become synonymous with “front-end development engineers”, with the title becoming more concise—“front-end engineers”.
As the profession has changed, the expectations from enterprises and the industry for a “front-end developer”, a “front-end engineer”, have increased, and the responsibilities have become heavier—this is a career upgrade, as well as an industry cleansing—those who adapt become stronger, while those who do not are eliminated.
To this day, the meaning of “front-end development” is not just about writing pages and building websites; it also includes front-end engineering-related CLI tools, mobile and desktop client applications, and parts of the server side that are closer to the front end, and so on—this is essentially the work of a “client-side engineer”—yes! “Front-end development” is essentially a branch of “client-side development”, only this point is increasingly being emphasized, and “client-side development” is increasingly trending towards unification, which can be called “pan-client development”.
Regardless of how the work content and professional responsibilities change, the core problem that needs to be solved in this field remains the same—how to better facilitate interaction between humans and artificial systems.
Components? Controls?
In software engineering, a “component” generally refers to a reusable block of software, akin to the “parts” used in manufacturing. This is a broad concept; it can be a software package, a web service, or a module, etc.
However, in the front-end perspective, a “component” usually refers to a view unit on a page, that is, a “UI component”. It can be said that a “UI component” is a subset of a “component”. You might also often hear the term “control”. Don’t worry, don’t scratch your head; it’s just another name for a “UI component”.
Ordinary components have poor universality, meaning they can basically only be used in a specific system and cannot be replaced. There is a type of component that is developed based on standardized interface specifications and can be used in any system that connects to that interface, and can also be replaced by any component that meets the interface specifications—it is a “replaceable component”, just like the “standard parts” used in manufacturing.
Replaceable UI components are the key to the transition of front-end GUI development from a cottage industry to automated assembly.
Related Concepts
The above has explained what “front-end UI components” are through three basic concepts; now let’s discuss a few concepts that have a significant impact on them—
Design System
The so-called “design system”, or “Design System”, is a concept closely related to UI components. It can be considered the theoretical basis for the appearance and interaction of UI components, while UI components are the concrete realization of the design system.
The existence of a design system is to assist in the design and development of digital products such as websites and applications. It serves as the sole reference, allowing different teams (such as product managers, designers, and developers) to participate together in the construction of digital products.
Products designed and developed based on a design system can maintain a certain consistency in both appearance and experience, establishing a product image and disseminating brand value.
The content covered by a design system includes, but is not limited to, design language, style guides, pattern libraries, UI components, brand language, and related usage documentation—while the design system itself is not a deliverable, it is composed of some deliverables and will continue to evolve with the updates of products, tools, and technologies.
From the list of content covered by the design system, it can be seen that the elements that make it up include tangible ones, such as patterns, UI components, guidelines, and tools used by designers and developers; there are also intangible ones, such as brand values, collaboration methods, ways of thinking, and common beliefs.
Style guides and pattern libraries are two relatively important deliverables: style guides focus on the use of graphic styles, such as colors, fonts, images, etc.; pattern libraries integrate functional UI components and their usage.
Data and Its Forms
The information exchanged in human-computer interaction is “data”, which is the carrier of information and the core of human-computer interaction. Here, the term “data” tends to refer to the basic data types provided by programming languages that are friendly to humans, as well as data structures constructed based on them, rather than binary encoding that is friendly to machines.
“Data” is a description of objective things in the real world, and every type of data in computer programs should have its correct semantics, such as using the boolean type for binary logic like “yes” and “no”; using numerical types for counting; using string types for explanations; using object types for entities; and using list types for entity collections.
The above mentioned “entity” is a concept that can represent something concrete or abstract, natural or artificial, actually existing or virtually created… “Human” is an entity, “dog” is an entity, “wind” is an entity, “language” is an entity, “matter” is an entity, and “spirit” is also an entity. Even so, when we talk about “entities”, we mostly refer to those that are visible and tangible. In addition, an “entity” is a collection of attributes that describe its characteristics.
In an application, the data types involved in user operations are roughly: boolean, integer, floating-point number, date, amount, string, long text, enumeration, object, list, etc. Except for objects and lists, which are considered complex data types, the rest are simple data types. In the digital world constructed by computer programs, each entity is represented by an object, lists are entity collections, and entity attributes can be either simple or complex data types—entities and entity collections are collectively referred to as “views”, and entity attributes are called “fields”.
When the value of a field is a simple data type, it is a “regular field”, also known as a “simple field”; when the value is a complex data type, it is a “relationship field”, also known as a “complex field”. Based on the relationship with the associated entity, relationship fields can be further divided into “one-to-one”, “one-to-many”, “many-to-one”, and “many-to-many”. Among them, “one-to-many” and “many-to-one” are mirror relationships.
By further generalizing “entities” based on their characteristics, they can be abstracted into “models”, meaning that a “model” is a category of “entities”. In discussions and communications, the terms “entity” and “model” can be used interchangeably to a certain extent, but attention should be paid to their semantic differences. If a model is mapped to a database table, each record in the table is an entity.
Take the “human” model as an example:
| Model Field | Data Type | Associated Model | Relationship |
|---|---|---|---|
| Name | String | - | - |
| Date of Birth | Date | - | - |
| Age | Integer | - | - |
| Gender | Enumeration | - | - |
| Monthly Income | Amount | - | - |
| Married | Boolean | - | - |
| Spouse | Object | Human | One-to-One |
| Children | List | Human | Many-to-Many |
| Parents | List | Human | Many-to-Many |
| Dogs | List | Dog | One-to-Many |
As described above, the data form in an application is a recursion from list-type data to simple-type data. If a field is a relationship field, then it embeds a view:
Although some UI components are unrelated to data, many are closely related to data, such as lists, tables, forms, input boxes, etc.
Summary
This article explains the concepts contained in the three words that “front-end UI components” are broken down into—“front-end”, “UI”, and “components”—to popularize some knowledge, trying to clarify what “front-end UI components” are, and to set the scope for the subsequent articles in this series—discussing some matters related to UI components developed using web front-end technologies.
Why is there this series of articles? On the one hand, it is because the methodology and abstraction related to front-end engineering are not yet sufficient and lack a systematic approach; on the other hand, the domestic front-end environment and atmosphere are too restless, and those who understand will naturally understand.