Home Web Front-end Front-end Q&A Do you know what the development trend of the big front-end will be in 2021 (detailed explanation)

Do you know what the development trend of the big front-end will be in 2021 (detailed explanation)

Jul 06, 2020 pm 01:08 PM
2021

Do you know what the development trend of the big front-end will be in 2021 (detailed explanation)

The rapid development of front-end development brings new keywords to developers every year. What will be the keywords for front-end development in 2021? What will be the direction of development? Referring to the development of the big front-end in 2019, it is no surprise that the front-end will still focus on several aspects such as small programs, super APPs, cross-end development, front-end engineering and the application of new technologies (you can refer to the depth of big front-end technology trends in 2019 interpretation).

小program

In the development of small programs, this year is still a year of rapid development for small programs. All major mainstream apps have launched small program functions, and various front-end The team also has a dedicated mini program development team to adapt to faster mini program development needs. At the same time, many key functions in Apps have been replaced by mini programs. Some apps have even become Native mini program shells, and the upper layers should all be mini programs.

Before the emergence of WeChat mini programs, everyone was talking about Hybird and ReactNative, but in the end it was just a carnival on the technical level, and there was never the injection of business attributes. The emergence of mini programs not only tells the industry that Webview on current devices is not that bad, but also tells the industry how to enable capable merchants to conduct private domain operations on super APPs.

On the other hand, from a technical perspective, under the strict restrictions of the upper-layer DSL, super APP can define Web standards that meet its own demands, make up for the shortcomings of current Web standards, and finally cooperate with the client and combine offline , preloading, and customizing Webview can produce various cool technical models similar to NSR, allowing the Web to achieve the Native version experience at low cost on the end, without being a little awkward like Weex outside the end.

However, due to the need to rely on super APPs (WeChat, Alipay, Baidu, Meituan, Toutiao, etc.), due to differences in the specific plans adopted by each platform, the current implementation plans of mini programs are also different. Sometimes Multiple sets of code need to be developed.

Cross-end development

Cross-end development, the RN state is very mature, or there is not much development prospect, because it is still stuck in version 0.61, it seems Version 1.0 is still far away. Therefore, many teams have switched to Flutter this year, especially the Release of Flutter for Web, which has rekindled hope and made the Web front-end eager to try.

At the same time, Apple has also released a new UI system-SwiftUI. At the same time, SwiftUI for Web is already on the road in the open source community. Can SwiftUI for Android be far behind?

Cross-end development, Flutter will still develop rapidly, and there will be more developers. Flutter on JS, SwiftUI for Web&Android will also be open source and worth looking forward to. After all, there is still no perfect solution for cross-end Plan.

Front-end engineering

In front-end engineering, the most important basic quality for developers is to improve efficiency through tools, and front-end developers will continue to do this. Iterate and optimize.

We used to talk about Yoman and a series of construction tools such as CLI, but after the team grew, we always felt that something was missing. On the other hand, Java students have never heard of Spring Boot configuration engineers.

This year many teams are building complete front-end DevOps process tools, and these teams have also begun to collaborate and build, whether it is Web or small programs, from new projects, development, joint debugging (tiao), deployment , testing, publishing, operation and maintenance to monitoring statistics, there are complete tools to ensure and improve efficiency. In the future, front-end projects will become more and more standardized.

Looking forward to the development of the front-end in 2020, the front-end engineering system will definitely be more closed-loop. It is no longer as simple as a scaffolding, but will be combined with IDE to open up business attributes, from project initialization, to writing code, to CI, To grayscale and to release form a complete closed loop.

Serverless

The popularity of Serverless can almost be attributed to the front end. Because Serverless can perfectly support Node.js, Serverless helps front-end developers solve many problems in the process of using Node.js.

Most of the current front-end engineers have a professional background. Although they cannot be compared with authentic server-side development students, they can also write a lot of business logic at the server-side layer. Currently, many companies are building BFF layers to meet these demands, but they still cannot get rid of the obstacles of operation and maintenance and machine allocation.

With the gradual implementation of Serverless, the code at the BFF layer will get rid of complex problems such as operation and maintenance, machine allocation, etc. At the same time, there is a high probability that front-end students will write this part of the code, and server-side students will focus on the middle-end system. accomplish. From a business perspective, the trial and error costs of business will also be significantly reduced.

As Node.js becomes an essential skill for front-end developers, the continued popularity of cloud computing will make Serverless within reach. When more and more developers taste the benefits of R&D, Serverless will definitely change the front-end R&D model.

At the same time, students who use Serverless will definitely use TS. This also means that if you don’t write TS in 2020, you may really be out.

WebAssembly

WebAssembly is a new bytecode format, and currently all mainstream browsers support WebAssembly. Unlike JS, which requires interpretation and execution, WebAssembly bytecode is very similar to the underlying machine code and can be quickly loaded and run. Therefore, the performance is greatly improved compared to JS interpretation and execution.

In other words, WebAssembly is not a programming language, but a bytecode standard. It requires a high-level programming language to compile the bytecode and put it into the WebAssembly virtual machine to run. What browser manufacturers need to do It is to implement a virtual machine according to the WebAssembly specification.

With WebAssembly, any language can be run on the browser. From Coffee to TypeScript to Babel, these all need to be translated into js before they can be executed, while WebAssembly embeds a vm in the browser and executes it directly without the need for translation, so the execution efficiency is naturally much higher.

For example, AutoCAD software is an automatic computer-aided design software produced by the American Autodesk Co., Ltd. (Autodesk), which can be used for two-dimensional drawing and basic three-dimensional design. When using it, you don't need to know programming to automatically draw. Therefore, it is widely used in many fields such as civil construction, decoration, industrial drawing, engineering drawing, electronic industry, and clothing processing around the world.

AutoCAD is a software written with a large amount of C code and has experienced many technological changes, from desktop to mobile to web. Previously, there was a speech at InfoQ titled "AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web". Through WebAssembly, many old C codes can be run on the Web and execution efficiency is guaranteed.

WebAssembly’s core JavaScript engine V8 now includes Liftoff, a new WebAssembly baseline compiler. Liftoff's simple and fast code generator greatly speeds up the launch of WebAssembly applications. In 2019, many companies began to invest manpower in learning and transforming WebAssembly. I believe that WebAssembly will experience an explosive period in 2020.

5G

An unavoidable topic in 2019 is 5G. First of all, the substantial increase in 5G bandwidth has brought about a further increase in the complexity of the traditional Web, just like the change from the plain text hyperlink era of WAP to the 4G full-image video era during the change from 2G to 4G. 5G will be a huge change, but it will certainly not happen overnight. Because the corresponding supporting facilities also need to be gradually improved, such as hardware performance and browser processing speed.

Server-side rendering (SSR) is definitely a shortcut, focusing on front-end and back-end. 5G is a bridge. Putting rendering in the back-end is not as simple as isomorphism. It requires attention and optimization of rendering performance. WebAssembly may develop rapidly under this opportunity, because it can seamlessly connect multiple background languages, and the optimization of background rendering will also bring about changes in the front-end R&D model and technical architecture.

Secondly, the interconnection of everything brought by 5G will bring diversified application scenarios that are different from smartphones and ordinary PCs, such as VR, wearable devices, car systems, smart projection, smart interaction, etc. They will bring the Web into various vertical fields, which also means that there will be more open space on the front end. I believe that with the large-scale commercialization of 5G, a number of new Internet giants will be born.

Thank you everyone for reading, I hope you will benefit a lot

This article is reproduced from: https://xiangzhihong.blog.csdn.net/article/details/103233487

More related For knowledge, please visit PHP中文网! !

The above is the detailed content of Do you know what the development trend of the big front-end will be in 2021 (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is useEffect? How do you use it to perform side effects? What is useEffect? How do you use it to perform side effects? Mar 19, 2025 pm 03:58 PM

The article discusses useEffect in React, a hook for managing side effects like data fetching and DOM manipulation in functional components. It explains usage, common side effects, and cleanup to prevent issues like memory leaks.

Explain the concept of lazy loading. Explain the concept of lazy loading. Mar 13, 2025 pm 07:47 PM

Lazy loading delays loading of content until needed, improving web performance and user experience by reducing initial load times and server load.

What are higher-order functions in JavaScript, and how can they be used to write more concise and reusable code? What are higher-order functions in JavaScript, and how can they be used to write more concise and reusable code? Mar 18, 2025 pm 01:44 PM

Higher-order functions in JavaScript enhance code conciseness, reusability, modularity, and performance through abstraction, common patterns, and optimization techniques.

How does currying work in JavaScript, and what are its benefits? How does currying work in JavaScript, and what are its benefits? Mar 18, 2025 pm 01:45 PM

The article discusses currying in JavaScript, a technique transforming multi-argument functions into single-argument function sequences. It explores currying's implementation, benefits like partial application, and practical uses, enhancing code read

How does the React reconciliation algorithm work? How does the React reconciliation algorithm work? Mar 18, 2025 pm 01:58 PM

The article explains React's reconciliation algorithm, which efficiently updates the DOM by comparing Virtual DOM trees. It discusses performance benefits, optimization techniques, and impacts on user experience.Character count: 159

What is useContext? How do you use it to share state between components? What is useContext? How do you use it to share state between components? Mar 19, 2025 pm 03:59 PM

The article explains useContext in React, which simplifies state management by avoiding prop drilling. It discusses benefits like centralized state and performance improvements through reduced re-renders.

How do you prevent default behavior in event handlers? How do you prevent default behavior in event handlers? Mar 19, 2025 pm 04:10 PM

Article discusses preventing default behavior in event handlers using preventDefault() method, its benefits like enhanced user experience, and potential issues like accessibility concerns.

What are the advantages and disadvantages of controlled and uncontrolled components? What are the advantages and disadvantages of controlled and uncontrolled components? Mar 19, 2025 pm 04:16 PM

The article discusses the advantages and disadvantages of controlled and uncontrolled components in React, focusing on aspects like predictability, performance, and use cases. It advises on factors to consider when choosing between them.

See all articles