Frontend future-Alibaba Cloud Developer Community

Author | Ping Xia


recently, I learned a word: Digital Twin (Digital Twin), which is simply to build Digital images for objects (Spacecraft/city) and systems (electricity/Transportation) in the real world in the computer world, to enable better interaction between the digital world and the physical world, the digital screen can also be regarded as an application scenario of this technology. This concept was put forward by Dr.Michael Grieves in 2002. With the rapid development of IOT, AI, Graphics Technology and Industry 4.0, the application prospect is increasingly broad. Google will find that: NASA, GE, Microsoft, SAP, IBM and other giants have already laid out and applied this Technology, and it is still one of the Gartner Top 10 Strategic Technology Trends for 2019.

Image from: How the visualization has changed by Digital Twin Technology

the front end is created for applications. Human-computer interaction technology is the foundation of our survival. It is our mission to connect users and the digital world with applications as bridges. However, the front-end living space has been compressed in the Web field for a long time, Digital Twin this new form will undoubtedly open a new world for us. Gartner, there are two other technologies closely related to the front end in this report:

1, Immersive technologies: Augmented Reality(AR), Virtual Reality(VR), Mixed Reality(MR), etc.

2, Smart Spaces: smart cities, smart cars, smart stores, etc.

See in the future, there will be three strategic technologies related to frontend , it's really exciting. But don't worry, since it is a strategy, it means that it may not blossom or bear fruit in three to five years. After careful analysis, you will find that: the front-end technology is far from competent in these fields , I can't help worrying. The scenery in the distance is very beautiful, but if you want to arrive successfully, you need to prepare early. Standing 201X at the end of, the beginning of the second half of the Internet, we might as well analyze it together with Gartner report: where is the reform of front-end technology in the next 10 years and what directions are worth investing in?

Looking back

"Learning from history, we can know the prosperity and replacement". If history is a group of waves, the trajectory formed by its past phase is enough to foresee the future. Looking back on the development of Web technology, we can clearly see three key factors that contribute to the reform:

engine: it is particularly important to have four engines:

1. V8: it not only improves the execution efficiency of JS and helps implement ES specifications, but also promotes Node.js.

1. Browser engine: represented by Webkit, Blink, and Chromium, the rapid development of browsers has laid the foundation for Web prosperity.

1. Node.js: it greatly expands the front-end living space, so that "Any application that can be written in JavaScript, will eventually be written in JavaScript."

1. Hybrid container: the mobile Internet era dominated by App has also left a place for Web development. Mini programs are typical representatives.

Development Kit: syntax, frameworks, tools, and class libraries have been booming driven by the community. Excellent open-source projects have become the most active in the technology circle. Although the cost of using the mainstream technology stacks with React as the core is still relatively high and developers cannot only focus on the business logic, it is undeniable that application development is becoming simpler. Some types of applications can even be completed without Coding through specialized visual building platforms, such as portal websites, marketing activities, questionnaires, etc.

Division of Labor mode: the innovation of division modes, such as front-end separation, BFF(Backend For Frontend), full stack, full-end, and large front-end, not only improves the collaboration efficiency between front-end and other types of work, it also gives the frontend the opportunity to undertake application research and development. The "experience Technology Department" formed by the combination of "front-end + design" has also become the standard for many businesses. Some front-end teams have even developed into application research and development teams and have self-developed products. The influence circle of the front end has extended from application development to user experience and even product design, and experience technology based on human-computer interaction has also begun to emerge.

Behind these reform factors are two main lines:

1. Make the existing research and development work better: the development suite is the main driver, and the innovation of some division of labor modes (such as front-end and back-end separation) also belongs to this line.

1. Open up new battlefields: the engine is the main driver, and the innovation of some division modes (such as full stack) also belongs to this line.

The reason why these changes happen is that there are A rigid demand: the productivity level of client software cannot meet the rapidly growing demands of Internet applications, while front-end technology can just improve the productivity level of application research and development. Although the rise of mobile Internet once made the front-end lack of power, the Hybrid container parasitic on the super App made the front-end full of vitality, mini Programs even push them to the same important position as PC era. Although the application is full of various kinds of things, its morphological evolution also has traces to follow. To make it clear, we need to write a special document, which is not much to be expanded here. I would like to briefly introduce some of the most important things in my opinion:

the mainstream carrier of UGC content is changing: text-> image-> short video/live streaming. The cost of creating content becomes lower and lower.

The mainstream interaction modes of terminals are changing: PC (keyboard/mouse) -> mobile phone/PAD (touch screen/Camera/Voice), interaction becomes more and more natural and simple

the mainstream methods of obtaining information are changing: active acquisition-> passive push-> intelligent recommendation, asynchronous-> Real-time, information available

This one rigid demand, two main lines, and three types of factors it is also an important basis for us to predict the future.

Based on the present

in the present can practice among the new technologies, front-end related technologies include AI, Serverless/FaaS, Blockchain, IOT, AR/VR/MR, intelligent hardware, and visual application development. Undeniably, they are all technologies that can bring about subversive revolutions in some fields, but will they bring changes to the front end? Let's analyze it in detail:

AI: the core is the cloud, and the typical feature of AI applications is "focusing on engines rather than UI", so the front end is not in the main track, and can only be used in application development. At present, most AI applications on the market are extensions of big data technology, which is far from Intelligence. As the pinnacle of human technology, AI should play its value in the most difficult problems for human beings, such as language, medical treatment, scientific research, education and environment. Personally, I am optimistic about machine translation. Breaking the language boundary will be an epoch-making change in human civilization. As a frontend, we should also pay attention to these basic fields and learn and master AI technology.

Serverless/FaaS: the core is the cloud. What the frontend can do is to optimize the Node based on this technology. The Runtime and O & M methods of js on the server block the complex technical details of the server, allowing Node. The server battlefield developed by js can be continued, allowing the data needed on the server to be stored and obtained in a simple and low-cost way. Of course, the existing tool system can also be optimized based on it to make development simpler and simpler.

Blockchain: the core is cloud, and the frontend is most related to Decentralized Application(DApp) and IPFS(the InterPlanetary File System). However, DApp is a new application form. IPFS changes the network protocol. The two are still in a very early stage, and the development situation is still unclear. It is better to wait and see the changes, and develop applications based on them at the right time.

IOT: the core is the terminal, but the key technology is the hardware and embedded system, which has less intersection with the front end and has limited playing space. In addition to developing applications, you can see two potential directions. js and browser kernels are migrated to IOT devices to create a Runtime that can run front-end code. Some devices need to display data and can create exclusive rendering engines based on graphics technology.

AR/VR/MR: the core is the changes in hardware and interaction methods. The frontend can participate in the development of class libraries and applications. However, due to device limitations, it is not the mainstream of applications at present, and the entry point needs to be found based on business characteristics.

Intelligent hardware: A very cool technology. Smart speaker is the most successful application at present, and robots are the ultimate form of this technology. Its core is AI, automation control and hardware, which brings more upgrades to application forms and interaction modes to the front end.

Visual application development: the development can be completed without writing or writing less code, which is a long-cherished wish of the frontend. It cannot be achieved completely, but it can be achieved in specific scenarios. MFC, Dreamweaver, Flash, and Microsoft are pioneers in this field. Wix, Webflow, Bubble, Node-RED, FrameX, and PowerApps are worthy of attention. In essence, it still improves application production efficiency through better development kits. The biggest competitive product is the finished SaaS product. After all, it is easier to use it than to build it, this is just like when a computer is needed, most people will choose to buy finished products instead of accessories for assembly.

To sum up, most of the key paths and core technologies of these new technologies are not at the front end, but we can participate as users and practice them in combination with business characteristics to make the existing research and development work better, provides better interactive experience for applications. However, there are still two front-end strongly related technologies that are expected to bring about changes:

1. App Runtime on IOT: behind it is an engine that enables front-end applications to run on more and more new terminals.

2. Visual application development: it is expected to minimize the development cost of some functions and applications.

A glimpse of the future

the application forms are changing with each passing day, new technologies are surging, and the future is uncertain. As the front end, which direction should we go on Earth to reserve technology? In order to find a instructive technical roadmap, in addition to the analysis above, we have to go back to the essence of the front-end to explore the unchanging things behind the reform. Only they can make us adapt to all changes with the unchanging, transform technology into productivity.

Although front-end technology has developed rapidly, from the perspective of programs, there are two things that have not changed:

the form and interaction mode of the terminal have been changing, and its essence has not changed:

rendering data: to convert the data of the digital world into sounds or images that can be perceived by people, graphics technology, audio technology and typesetting technology are the core.

Data collection: sensor technology and editor technology are the core of transforming data from the physical world and knowledge from the human brain into the digital world.

Application Types and interaction modes are changing, but application R & D can always be divided into four parts:

1. Cloud: provides data, managed resources, and executable code required for application running.

2. Terminal: provide UI to end users based on a App Runtime

3. Special technologies: business is the foundation of technology. Without business, the front end will be the root-free one, and each business has its own professional attributes and special technologies.

4, App Development Engine: also known as the "development suite", to improve productivity within the scope of independent control of ordinary engineers

based on the above analysis and the characteristics of yuque, which I participated in the research and development, I sorted out this big front-end technology map to attract valuable contributions:

each area in the picture is a small technical field, which needs to be fully explained and specially written. In addition, I only know a little about many fields, but I just expand more, I will only briefly introduce a few directions that I think are more important.

App Development Engine

The current Web application development is really worrying. The learning curve is very steep, new concepts emerge one after another, and technologies are updated too quickly. The application complexity is not much higher than that of ten years ago, but what we need to learn and master is many times as much as before. In the frontline of product research and development, our equipment is not excellent at all, and we spend a lot of energy on places unrelated to the battle. Although productivity is improving, it cannot catch up with the growth rate of business. App Developement Engine, the key factor to improve productivity, is particularly important at present.

This field is the most active place for innovation. From the past development process, we can see some evolution:

from the perspective of Engine, there are two concepts behind the evolution:

1, Coding Less: with powerful SDKs, frameworks, and tools, engineers can better code and focus on business implementation.

2, No Coding: you can use the visual IDE to develop applications without writing code, drag and drop, and write configuration files.

From the perspective of developers, there are three expectations for the Engine:

1, Productivity: productivity must be improved so that engineers can write robust and easy-to-maintain code efficiently.

2. Simple & Stupid: the core of the KISS principle, making development simple can not only improve efficiency, but also make more people become front-end engineers.

3, Business More: R & D resources are very valuable. It is the key to improve efficiency to let engineers focus on their business.

Future evolution will also follow these contexts. Coding Less and No Coding have their own application scenarios. You need to select a focus based on business characteristics. However, I think one thing is inevitable: to develop high-quality applications, we have to rely on Coding, but we will write fewer and fewer code. The No Coding is too perfect, the application scenarios are limited, and the finished SaaS is used as a better substitute. I prefer to use the Coding Less mode to realize the main business line, and put some mechanical, repetitive, one-time development is done through No Coding mode. However, a branch No Coding of Visual Programming is very worthy of attention. Its application prospect in the field of Programming education is very good. Scratch and Blockly are typical representatives, while Programming education not only contains huge business opportunities, and it will bring us a steady stream of new forces.

Special Technology

special Technologies will vary depending on the business. Here, we will take yuque as an example.

Yuque is committed to connecting the two-way channel between knowledge and brain, there are two key technologies behind:

  1. editor: the key to knowledge from the brain to the digital world, yuque's current text editor and Directory editor are still very Elementary
  2. knowledge visualization: knowledge is the key to be perceived and understood by the human brain, and giving the best presentation form of knowledge is conducive to the understanding and dissemination of knowledge.

Data visualization and digital twins are not closely related to yuque at present, but will be closely related to yuque in the future:

1. Data is not only the basis of scientific research, but also contains knowledge behind it. Data visualization can better present this knowledge to people.

2. The combination of digital twins and knowledge is quite imaginative, such as: digital museum, Virtual Planetarium, simulation ecosystem

App Runtime

why would App Rutime be the new force of reform? Because history tells us that engine innovation is the core driving force for opening up new battlefields, and the core of App Rutime is exactly the engine and its SDKs. For a long time, front-end technology gains and is limited by browser engines, so many front-end engineers can only work at the App Development Engine layer. However, up to now, the diversity of terminals and application forms has become stronger and stronger. Mobile internet has broken the situation that browsers dominate the world. It is not difficult to see that the evolution speed of browser technology can no longer meet more and more new terminals and application forms. .

It can be boldly predicted that there will be a change in this field. The change may be produced by browser evolution or some new engines. We can see some signs:

1. Office has covered all terminals with amazing speed and UI consistency. Guess there is a cross-terminal UI solution behind it

2. Super App breaks the pattern that browsers dominate the world, and mini programs have become new Runtime.

3. Flutter are exploring a new cross-end UI development method.

4. Fuchsia is a bigger game that Google is exploring, promoting changes from the OS level.

More importantly: front-end engineers have the opportunity to participate in this change. , because the core technology of the engine-graphics technology has become a technology that many teams can skillfully use driven by data visualization and H5 Game. The diversity of application types will also leave some vertical market App Runtime living space. There have been some successful cases, such as Cocos engine and egret engine in the game field, there should be more Electron in the field of desktop software development in the future.

Domain Services

domain Services" it may be unfamiliar to the frontend. Behind it is the famous Domain-Driven Design (DDD:Domain-Driven Design), which is a highly abstract part of applications in the cloud and a stable part of the system, this is why the frontend is always revised while the server interface can remain unchanged. Server R & D has a main evolution line: solving programming language problems-> solving development framework and class library problems-> focusing on solving business problems, java-> Spring -> DDD & Sofaware Architecure is a typical case. The reason why the server has such a strong anti-change capability is that it focuses on the abstraction of domain models and the design of system architectures.

Why is domain services so important to the frontend at present, because:

1. Domain models and domain services are the abstraction of the business and the intuitive reflection of understanding the business. A good domain model can greatly reduce the frontend development costs.

2. Relevant ideas and concepts of domain design can be used for reference in the front end, bringing new ideas to the front end to solve problems.

3. The front end is at the crossroad of research and development, with the widest information range. It has great potential to coordinate products, designs, servers and other types of work to sort out domain models and business links.

For DDD, you can get started with these three classic architectures that are easy to understand and master:

  1. Hexagonal Architecture(Ports and Adapters)
  2. CQRS - Command Query Responsibility Segregation
  3. The Clean Architecture

full-featured team

the front-end is the closest group among engineers. Many front-end engineers have a product dream. This product may be a technical product or a user product. For a long time, we were tired of living, so we had to sneak around a gadget or take part in the Hackathon. However, with the evolution of technology, many teams have already possessed the full stack capability and have undertaken the independent research and Development of some platforms in the App Development Engine, bringing this dream closer. However, to achieve the full stack capability, it is far from enough. A full-featured team including technology, products, design, and operation is also required to achieve this. This team can not only improve collaboration efficiency, to ensure the quality of delivery, commercial products may also be generated. Many companies are developing in the direction of large middle-end + small front-end, and the full-function team is exactly the one supporting the small front-end. Therefore, when the time is ripe, a full-functional team can be established to gradually undertake the R & D work of human-computer interaction in the business, so that the "user experience" can be implemented.

Forge ahead

there is no standard big picture for the future of front-end technology, which is contained in every business , more need to be down-to-earth to build the future, industry trend, new technology, new product form are all factors that can be used. If you already have a business that you are willing to strive for and grow with, you can use the business to regularly deduce the technology map suitable for its different development stages. If not, don't worry. Lay a good technical foundation, do a good job in each project at hand, and combine business exploration and practice in the field of Appliaction Development Engine to gradually find the business that you really want to do and the users who want to serve.

Software development is a technology that pays equal attention to both theory and practice, and practice is especially important, because in the end, we need to write robust code for users to use. No matter what the future is, strengthening the understanding of programming, technology and business in continuous learning and practice is the foundation. In addition to learning and practicing the most business-related technologies, it is recommended to focus on these areas according to your expertise and interests:

  1. domain-driven design: strengthen the ability of field modeling and system design, and strive to understand business and become a field expert.
  2. Software architecture design and software design philosophy: they inject soul into the system, framework, and class library, making the code alive.
  3. Graphic technology: there are broad scenarios in both applications and engines. The most important thing is that graphic applications will take up a higher proportion in the future.
  4. AI: you don't have to go deep into the bottom layer, but you need to master its use. You may as well start from the TensorFlow.

Programming is a practice , the product of application practice is also the way we communicate with the world. It doesn't matter where the future is, what matters is to continue learning and practicing with an empty cup mentality, write down each line of code carefully .

Related links: Digital Twin - The Machines' Mind

Origins of the Digital Twin Concept

Top 10 Strategic Technology Trends for 2019

Gartner Releases Top 10 strategic technology trends in 2019 - Learn Everything About Decentralized Apps

The General Theory of Decentralized Applications, Dapps

IPFS is the Distributed Web

You Do Not Need Blockchain: Eight Popular Use Cases And Why They Do Not Work

Cloud Programming Simplified: A Berkeley View on Serverless Computing

Knowledge Visualization

Google Fuchsia release date, news and rumors

The Kiss Principle

Basics of the Unix Philosophy

Principles Wiki

Demystifying the Hexagon

Software Architecture Design

front-end development roaming guide

experience Technology and a good society

attention the Alibaba F2Egrasp Alibaba front-end New

Selected, One-Stop Store for Enterprise Applications
Support various scenarios to meet companies' needs at different stages of development

Start Building Today with a Free Trial to 50+ Products

Learn and experience the power of Alibaba Cloud.

Sign Up Now