The Future of Frontend

By Pingxia

Introduction

Recently, I learned a new term: Digital Twin. To put it simply, this technology establishes a digital image of real things, such as spacecraft, cities, real systems, electricity, and transportation, in the virtual world. This allows the digital world to better interact with the physical world. Digital dashboards are an application of this technology. The digital twin concept was proposed by Dr. Michael Grieves in 2002. With the rapid growth of IoT, AI, graphics technology, and Industry 4.0, this technology will be applied in an increasing range of applications. If you search for this term in Google, you will find that National Aeronautics and Space Administration (NASA), General Electric Co. (GE), Microsoft, System Applications and Products (SAP), IBM, and other giants are already using this technology. It is also listed as one of Gartner's Top 10 Strategic Technology Trends for 2019.

Figure source: How the visualization has changed by Digital Twin Technology

Frontend was born for applications. Human-machine interaction is a necessary part of our lives. It is our mission to connect users and the digital world using applications as the bridge. However, the frontend scope has long been limited to the web. Digital twin, as a new format, will open up a new world to us. Gartner's report includes two other technologies that are closely related to frontend:

Immersive technologies: These technologies include Augmented Reality (AR), Virtual Reality (VR), and Mixed Reality (MR).
Smart Spaces: These technologies include smart cities, smart cars, and smart stores.

It is exciting that three strategic technologies for the future are related to frontend. However, these are strategic technologies and may not see many practical results within three to five years. After detailed analysis, we found that the current frontend technologies still cannot provide needed capabilities in these fields. This is worrying. The distant goal is promising, but it will take a lot of work to get there. As we leave the 2010s and start the second half of the Internet age, it is worthwhile to consider Gartner's report. This will help us understand what we can expect in the frontend field over the next 10 years.

Looking Back

Learning from history, we can predict the future. If we look back at the development history of web technologies, we can find three key factors that drive revolutions.

Engines - There are four significant engines:

V8: improved the execution efficiency of JavaScript, promoted the implementation of ES specifications, and drove the emergence of Node.js.
Browser engines: These are represented by Webkit, Blink, and Chromium. The rapid development of browsers laid the foundation for the prosperity of the web ecosystem.
Node.js: This engine greatly expanded the scope of the frontend, ensuring that "any application that can be written in JavaScript, will eventually be written in JavaScript."
Hybrid containers: These provide a space for web development in the mobile Internet age, which is dominated by applications, such as mini programs.
Development kit: Development communications have driven the vigorous development of syntax, frameworks, tools, and class libraries. There are many excellent open-source projects, and the frontend ecosystem has become the most active in the technology field. Although the cost of using mainstream technology stacks built around React is still high, and developers cannot focus only on business logic, you cannot deny that application development is becoming simpler. Some types of applications can be developed on special visual construction platforms without the need for coding, such as web portals, marketing activities, and questionnaires.
Division of labor: Innovations in the division of labor, such as frontend and backend separation, Backend For Frontend (BFF), full-stack, end-to-end, and big frontend, not only improve the collaboration efficiency between frontend developers and other developers, but also allow the frontend developers to develop applications. An Experiential Technology Department, which combines frontend and design functions, has become standard for many businesses. Some frontend teams have even become application development teams with proprietary products. The influence of frontend has expanded from application development to user experience and product design. Experiential technology based on human-machine interaction is also coming into its own.

There are two main goals driving these changes:

Make R&D better: Mainly driven by development kits, this effort also involves innovative divisions of labor (such as frontend and backend separation.)
Open up new battlefields: Mainly driven by engines, this effort likewise involves new divisions of labor (such as full-stack.)

These revolutions are driven by a pressing need: The productivity of client software cannot meet the ever-increasing requirements of Internet applications, while frontend technologies can improve the productivity of application R&D. Although frontend initially lost out due to the rise of mobile Internet, it was revived by hybrid containers, which depend on super applications. In particular, mini programs returned frontend to the position it enjoyed in the PC era. Despite the wide variety of applications, their evolution is apparent. For clarity, we will only discuss the most important changes:

The primary media of user-generated content (UGC) has changed from text and images to short videos and livestreaming. In addition, it is now easier for users to create content.
The primary terminal interaction format has also changed. The PC with keyboard and mouse has given way to the mobile phone and tablet with touchscreens, cameras, and microphones, making interaction simpler and more natural.

The main information acquisition methods have changed as well, evolving from active acquisition and passive push to intelligent recommendations and from asynchronous to real-time acquisition. This is making information available anytime and anywhere.

By considering the urgent demand, the two main goals, and the three changes listed above, we can start to predict the outlines of the future.

New Technologies

Among useful technologies emerging today, frontend-related technologies include AI, Serverless and FaaS, Blockchain, IoT, AR, VR, MR, intelligent hardware, and visual application development. Undeniably, these technologies will drive revolutionary changes in some fields, but will they change the frontend? Let's consider them individually:

AI: This technology is built on cloud infrastructure. AI applications are typically engine-heavy and UI-light. Therefore, AI does not directly involve the frontend and can only be used in application development. Most AI applications on the market are simple extensions of big data technology. As the most advanced technology humans have invented, AI should be used to solve the most difficult problems we face, such as problems in language, health care, scientific research, education, and the environment. I am optimistic about machine translation because breaking the boundaries of languages will mark an epoch-making change in human civilization. As frontend developers, we should also pay attention to these basic fields and learn to use AI technologies.
Serverless and FaaS: These technologies are also built around the cloud. Frontend developers can use these technologies to optimize the runtime and maintenance methods of Node.js at the server-side to shield themselves from complex technical details. In this way, we can continue to implement Node.js at the server-side and store and fetch the data required by terminals simply and cost-effectively. Serverless and FaaS can also be used to optimize existing tool chains to simplify development.
Blockchain: Blockchain is also built around the cloud. The technologies most relevant to frontend are Decentralized Application (DApp) and InterPlanetary File System (IPFS). DApp is a new application format, while IPFS changes network protocols. These two technologies are in their early stages, so we do not know where they will lead us. We recommend waiting for the right time to use these technologies to develop applications.
IoT: This technology is built around terminals, and its key capabilities lie in hardware and embedded system. Therefore, IoT does not have much to do with the frontend and is only effective within a limited scope. In addition to developing applications based on IoT, there are two other paths we can take: :one: transplant Node.js and browser kernels to IoT devices to create a runtime environment that can run frontend code :two: build dedicated rendering engines based on graphics technology so certain devices can display data.
AR, VR, and MR: These technologies center on a change in hardware and interaction methods. Frontend developers can participate in the development of class libraries and applications. However, as they can only work on certain devices, AR, VR, and MR are not mainstream applications. To promote their applications, we must use them in appropriate business scenarios.
Intelligent hardware: This is cool technology. The most successful application of this technology is in smart speakers, but robots are the ultimate form of intelligent hardware. This technology is built on AI, automatic control, and hardware. It drives application format and interaction method upgrades at the frontend.
Visual application development: All frontend developers wish to develop applications without writing code or by writing less code. This is difficult to accomplish, but it can be done in specific scenarios. MFC, Dreamweaver, Flash, and Microsoft are pioneers in this field, while Wix, Webflow, Bubble, Node-RED, FrameX, and PowerApps have the most interesting results so far. In essence, these products aim to improve application productivity by providing better development kits. The biggest competing product type is finished SaaS products. After all, out-of-the-box capabilities are easier than development. This is why most people would rather buy a finished computer than build on their own.

In short, the key paths and core capabilities of these new technologies do not have much to do with the frontend. However, frontend developers can use these technologies to help with existing R&D and improve the interaction experience of applications. There are two other technologies closely related to frontend, which may create changes in the future:

Application runtime on IoT: This technology is supported by an engine, which enables frontend applications to run on more and more new terminals.
Visual application development: This technology aims to minimize the development costs of certain features and applications.

Looking to the Future

With constantly changing application formats and emerging technologies, the future looks confusing. As frontend developers, where should we direct our efforts? In order to construct a technology roadmap, in addition to the previous analysis, we must also consider what will remain constant. Once we identify these things, we can deal with changes and transform new technologies into productivity.

Although frontend technologies are changing rapidly, we can find two constants from the programming perspective. With constantly changing terminal formats and interaction methods, these two things remain essentially unchanged:

Data rendering: converts data in the digital world into sounds or images that can be perceived by humans. This capability is built on graphic technology, audio technology, and layout technology.
Data acquisition: transforms conditions in the physical world and knowledge in the human brain into data in the digital world. This capability depends on sensor technology and editor technology.

With constantly changing application types and interaction methods, application R&D can be divided into four parts:

Cloud: The cloud provides the data required for application operation, management resources, and executable code.
Terminal: The terminal provides UIs for end users based on an application runtime environment.
Special technology: Business is the foundation of technology. Without a business to serve, frontend would be rootless. Moreover, each business has its own special attributes and technologies.
Application development engine: This is a development kit, which can improve the productivity of work performed by ordinary engineers.

The following figure shows frontend technologies organized based on the above analysis and the characteristics of Yuque.

Each section in the figure shows a technical field. This article focuses on a few important fields.

App Development Engine

Currently, web application development is very difficult, with steep learning curves, new concepts, and rapid technological change. Although today's applications are not much more complex than those from ten years ago, we have to learn much more than we needed to learn before. In addition, we are not well equipped for product R&D and waste many efforts on irrelevant tasks. While productivity growth cannot match business growth, application development engines are especially significant as a key factor for improving productivity.

The application development engine field has witnessed a great deal of innovation. We can trace its evolution from its development history. Two concepts have been fundamental in engine evolution:

Less Coding: By using powerful SDKs, frameworks, and tools, engineers can improve their coding efficiency and focus on business implementation.
No Coding: By using visual integrated development environments (IDEs), engineers can develop applications by using a drag-and-drop interface and writing configuration files, instead of writing code.

Developers hope for three things from an engine:

High Productivity: The engine must be capable of improving productivity so engineers can efficiently write robust and easy-to-maintain code.
Keep It Simple, Stupid: Simpler development not only improves efficiency, but it can also change more people into frontend engineers.
Business Focus: R&D resources are valuable. Allowing engineers to focus on actual business is the key to improving performance.

This is the path of future evolution. Less coding and no coding are suitable for different scenarios, and we need to select between them based on business characteristics. However, I think coding will still be necessary for developing high-quality applications, even though the amount of coding will decrease. No coding is too much to hope for and only suitable for certain scenarios. In addition, SaaS is a better option. I prefer to implement main businesses by using less coding and implement mechanical, repetitive, and one-off development by using no coding. No coding has a branch called visual programming. This is a promising approach to programming education, which is represented by Scratch and Blockly. Programming education not only includes huge business opportunities, but it also can create steady streams of new talent.

Special Technologies for Business

Each business has its unique technologies, which are essential to the business and vital to its survival. This article uses Yuque as an example, as I was personally involved in its R&D. We approached this task as follows:

What can we do today: What is the essence of the business and what problems can terminal-related technologies solve?
What do we need for the future: What is the future of the business and what are the related technologies and products?

Yuque is committed to opening up a two-way channel between knowledge and the human brain based on two key technologies:

Editor: This is the key to converting knowledge from the human brain into the digital world. However, Yuque's text editor and directory editor are still in their infancy.
Knowledge visualization: This is the key that allows knowledge to be perceived and understood by the human brain. This technology presents knowledge in its optimal form, making it easier to understand and disseminate.

Digital visualization and digital twin are not yet highly relevant to Yuque at present, but will be in the future:

Data is not only the foundation of scientific research, but it also contains knowledge. Data visualization helps better present knowledge to human audiences.
There is a great deal of potential in the combination of digital twin and knowledge technology, such as digital museums, virtual planetariums, and simulation ecosystems.

App Runtime

Why is application runtime the new force for change? History tells us that engine innovation is the core driver in opening up new battlefields. At the core of application runtime we find an engine and its SDKs. For a long time, frontend technologies both benefited from and were limited by browser engines. At the time, frontend engineers could only work at the application development engine layer. However, with the increasing diversity of terminals and application forms, mobile Internet has broken the domination of browsers. We can see that browsers are not evolving fast enough to meet the needs of emerging terminals and application formats.

We can boldly predict that there will inevitably be a revolution in this field, which may be triggered by the evolution of browsers or the emergence of new engines. There are already some signs:

Office covers all terminals with amazing speed and UI consistency. There must be a cross-terminal UI solution behind it.
Super applications have broken the domination of browsers, and mini programs have emerged as a new runtime.
Flutter can be used to explore new methods of cross-terminal UI development.
Fuchsia is a major effort by Google, which will drive changes from the operating system level.

More importantly, frontend engineers can participate in these changes because many teams are highly skilled at graphics technology, a core engine technology that is driven by data visualization and HTML5 gaming. The diversity of application types will create openings for application runtimes in certain vertical markets. There have already been some successful cases, such as the Cocos engine and the Egret engine in the gaming field and Electron in the desktop software development field. There will be more such cases in the future.

Domain Services

Frontend developers may not be familiar with domain services. However, the technology behind them is the famous domain-driven design (DDD), which is a high-level abstraction of an application in the cloud and the stable part of a system. This is why server-side interfaces can remain unchanged despite frequent changes at the frontend. Server-side R&D has evolved along the following path: solving problems in programming languages :arrow_right: solving problems in development frameworks and class libraries :arrow_right: solving business problems. A typical example is Java :arrow_right: Spring :arrow_right: DDD & Software Architecture. The server-side can remain unchanged because it focuses on domain model abstraction and system architecture design.

Currently, domain services are also important to the frontend for the following reasons:

Domain models and domain services are the abstractions of businesses and the intuitive representation used to understand businesses. Good domain models can significantly reduce the cost of frontend development.
Frontend developers can use the thinking and concepts behind domain design to solve frontend problems.
The frontend team sits at the crossroads of R&D and has the widest range of information. Therefore, we have the potential to coordinate product, design, and server-side developers as we lay out domain models and business links.

To get started with DDD, you can use the following three typical architectures, which are easy to understand and learn:

Fully Functional Team

Frontend engineers are positioned nearest to users. Many frontend engineers dream of creating a product, which may involve a technical product or a user-facing product. For a long time, we were too busy trying to survive to pursue what really interested us. However, as technology has evolved, many teams have developed full-stack abilities and have undertaken independent R&D for some platforms in application development engines. Therefore, we are moving closer to our dreams. Still, full-stack abilities are far from enough to achieve our dreams. A fully functional team must also include technology, product, design, and operation engineers. Such a team can improve collaboration efficiency, ensure delivery quality, and also produce commercial products. Many companies are moving toward a large mid-end and small frontend structure. Here, a fully functional team is needed to achieve a small frontend. Therefore, a fully functional team can be formed to gradually undertake the R&D of human-machine interaction to improve the user experience.

Forging Ahead

There is no standard map for the future of frontend technologies. Such a map must be developed for each business individually. We must build our future with our own efforts and by leveraging industry trends, new technologies, and new product formats. If you already have a business that you are willing to struggle and grow with, you can draw up technology maps for its different stages of development. If you don't have such a business, don't worry. At first, lay a good technical foundation and do a good job on the projects that come your way. Meanwhile, explore and practice with application development engines to gradually find a business you want to work at and users you want to serve.

Software R&D is a field where both theory and practice matter. Practice is especially important because we need to eventually write a robust runtime code for users. No matter what happens, we must strengthen our understanding of programming, technology, and business through continuous learning and practice. In addition to learning about and practicing the technologies that are most relevant to your business, we recommend that you focus on the following areas according to your expertise and interests:

DDD: Strengthen your capabilities in domain modeling and system design, and strive to become a domain expert that understands business.
Software architecture design and software design philosophy: This is what gives a soul to systems, frameworks, and class libraries and brings code to life.
Graphics technology: This technology is used in a wide range of scenarios at the application and engine layers. In the future, we expect graphics applications to play an increasingly prominent role.
AI: You do not have to understand the underlying layer, but you must know how to use AI. We recommend that you start with TensorFlow.

Programming is a practice and the product of application practice. It is also the way that we communicate with the world. It does not matter what the future looks like, what matters is that we continuously learn with an open mind and write each line of code with our hearts.

References:

The views expressed herein are for reference only and don't necessarily represent the official views of Alibaba Cloud.

Community

The Future of Frontend

Introduction

Looking Back

New Technologies

Looking to the Future

App Development Engine

Special Technologies for Business

App Runtime

Domain Services

Fully Functional Team

Forging Ahead

References:

Read previous post:

Read next post:

Alibaba Clouder

You may also like

Comments

Alibaba Clouder

Related Products

AIRec

Artificial Intelligence Service for Conversational Chatbots Solution

LedgerDB

Alibaba Cloud Model Studio