Summary of front-end technology development trends in 2022

Front-end bottle gentleman, pay attention to the public number

Reply algorithm, join the front-end programming interview algorithm daily question group

“The general trend of the world is vast, and those who follow it will prosper, and those who go against it will perish.”

The following is a summary of the 2021 summary of the front-end bigwigs. Hope to see some front-end industry trends and arrangements. Help your team and yourself plan for the future. The content is divided into four parts:

  1. Basic Framework/Engineering

  2. language

  3. Industry Trends

  4. Bottom evolution

1. Basic framework/engineering

As jQuery.js gradually fades out of people’s field of vision, the [front-end development] framework has become an indispensable tool for developers, and it has become the most concerned thing.

mv* framework

  • React(Next.js)

  • Vue(nuxt.js)

  • Svelte

  • Angular。

React is about to release version 18, vue3 has become the default version of vue, and Svelte has emerged.

packaging tool

  • Traditional: Webpack, Rollup, Parcel, Esbuild

  • ESM related: Snowpack, Vite;

    Implementation of ESM: When compiling in the development environment, using Server dynamic compilation + browser ESM basically realizes the function of “development environment 0 compilation”. When the production environment is compiled, other compilation tools will be called to complete (eg Vite uses Rollup).

Grammar specification

  • Babel

  • Prettier

  • ESLint

CSS

  • Tailwind CSS (atomic class)

web3D

  • Three.js

  • Oasis Engine

span

  • React Native

  • Flutter

  • Weex

  • uni-app

  • taro

desktop

  • Tauri(Webview + Rust/.Net/Go)

  • electron(Chromium + Nodejs)

micro frontend

  • qiankun

  • single-spa

  • micro-app

E2E testing

  • cypress (node ​​service, runs alongside the program)

  • puppeteer (headless browser)

shell

  • zx

2. Language

Language ranking 2.png

QQ language.jpg

Tencent 2020 R&D Big Data Report ↑ [2]

yuyan_TIOBE.png

TIOBE February programming language rankings↑ [3]

Atwood’s Law: Any application that can be written in JavaScript will eventually be written in JavaScript.

As front-end applications become larger and more complex, TypeScript will definitely become more and more popular. Will TypeScript be natively supported by browsers and Node.js in the future? Let’s look forward to it together.

For front-end students who want to learn other languages, we recommend the following:

  • Rust is the future of JS infrastructure – Lee Robinson

  • Full stack – Go

  • AI——Python

  • Flutter —— Dart

3. Industry trends

3.1 Front-end intelligence

Low Code (LowCode)

  • Among them, OutSystems, Mendix, Microsoft Salesforce, ServiceNow were rated as industry leaders.

  • Appian, Oracle and Pega were named challengers.

  • Creatio, Kintone, Newgen and Quickbase were named niche players.

  • No vendor was named a Visionary this year.

Gartner predicts: “By 2023, more than 70% of enterprises will adopt low-code (LCAP) as one of the key goals of their growth strategy”. By 2025, the overall LCAP (low-code development platform) market size will reach US$29 billion, with a compound annual growth rate of more than 20%; among them, the segment of LCAP is expected to grow from US$4.45 billion between 2020 and 2025. grew to $14.38 billion, a compound annual growth rate of 26.4%.

Automatic code generation

Sketch2Code, AI converts hand-drawn manuscripts into html code.

imgcook, Convert Sketch/PSD/images to React, Vue, Flutter, applet and other code.

3.2 Large front-end (pan front-end)

From the “stone age” of cutting images and writing HTML templates, to the “industrial age” of front-end and back-end separation and large front-end, to the current “electrical age” of cross-end technology and low-code. The responsibilities of front-end R&D have been changing, and the technologies that front-end R&D needs to master are also iteratively updated. – Byte front end

Serverless

Serverless is a simplified method based on cloud computing, which can be basically understood as FaaS (function as a service) + BaaS (backend as a service). Storage and computing are performed at the BaaS layer, and cloud functions are provided at the FaaS layer.

Under the power of serverless, front-end engineers can control page interaction, business logic, data processing, etc. in their own hands, realizing the possibility of a true full stack.

full stack

A “full stack developer” refers to a “developer who masters both front-end, back-end, and other web development-related skills.”

A “full stack developer” might use the following skill points:

Back end: Nodejs/Deno, Go, Java, Spring, Gin, Kafka, Hadoop.

Database: MySQL, mongoDB, redis, clickhouse.

Operation and maintenance: network protocol, CDN, Nginx, ZooKeeper, Docker, Kubernetes.

It is worth noting that a good engineer does not win by the number of “stacks”, but depends on what level of problem you solve.

DevOps

DevOps (a combination of Development and Operations) is a culture, movement, or practice that values ​​communication and collaboration between “software developers (Dev)” and “IT operations technicians (OPS).” By automating the process of “software delivery” and “architectural changes”, it makes building, testing, and releasing software faster, more frequent, and more reliable. Co-construction has been carried out in various fields such as development, testing, deployment, and operation and maintenance.

micro frontend

Microservice architecture: Microservice architecture can divide an application into several smaller services, which makes the entire development process highly agile and scalable.

I don’t think there is much trend in micro front end. First of all, micro-frontends are not for everyone. Micro front-ends have the light of micro-services, but micro-services basically require all back-ends to move up the architecture, which is obviously not the case with micro-frontends. It is more of a single-page application with multi-frame isolation requirements, and then makes a technical solution like a micro-frontend. I think to be honest, micro-frontends should not be so hot, including many students who will ask me about micro-frontends, and I ask you have you seen what kind of problems the micro-frontends solve? If you have to rely on this, it is equivalent to having no difficulty creating difficulties. For example, if the company has four or five front ends, it has to use a micro-front-end architecture. Four or five people can use different frameworks. Actually it is not necessary. – Cheng Shaofei (winter)

I agree with what the teacher said. I think all technologies are designed to solve a certain problem. The key is whether we have identified the key problem and whether we are solving this problem.

Applets

To solve the problem of cross-platform development of small programs, you can use framework conversion: uni-app (Vue), taro (React).

5G era

With the advent of the 5G era, 5G will be deeply integrated with ultra-high-definition video, VR, AR, consumer-grade cloud computing, smart home, smart city, Internet of Vehicles, Internet of Things, and intelligent manufacturing, all of which will bring new developments to the development of front-end technologies. growth and opportunities. Technologies such as WebGL and WebGPU will also usher in a wave of development opportunities.

  • Web 3D

    3D-type H5 games, online viewing, e-commerce, online education, etc., are undoubtedly fertile ground for technology. With the development of 5G technology, video loading speed will be very fast, and simple real-time rendering will be directly replaced by video. The complicated ones can be rendered by the server and sent back to the web page. As long as the transmission is fast enough, the performance of the mobile phone is no longer a problem.

    Some related libraries:

    Three.jsOasis EngineBabylon.jsPlayCanvas.js

  • WebRTC (Web Real-Time Communications)

    Traditional technologies include: XMLHttpRequest, WebSocket, and in the future: WebRTC will shine in the field of peer-to-peer private transmission, entertainment, metaverse, and low latency.

4. Bottom layer evolution

Front-end major events over the years

JavaScript

8.24: TypeScript new official website online

12.4: JavaScript turns 26

Node.js

2.2: npm 7.0 is officially available

3.29: Deno company established

4.21: Node.js 16 released

7.20: Node-RED 2.0 released, low-code programming tools

9.20: Node.js releases Corepack for managing npm, yarn, pnpm, cnpm

10.19: Node.js 17 released

Vue

8.3: Vue.js selected as Wikipedia’s front-end framework

8.5: Vue 3.2 released

11.24: Pinia officially becomes a member of vuejs

React

5.28: React 18 alpha released

10.5: New React Documentation Released

11.27: Next.js 12 released

12.14: Create React App 5.0 released

packaging tool

2021.1.6 Snowpack 3.0 released

2021.2.17 Vite 2.0 released

2021.10.13 Parcel v2 released

other

2021.3.6 jQuery 3.6.0 released

2021.3.17 Chrome V8 9.0 released

2021.10.7 jQuery Mobile deprecated

2021.11.4 Angular v13 released

browser

HTML6.0

Native mode support, single page applications without JavaScript, free image resizing, dedicated libraries, microformats, custom menus, enhanced authentication, integrated camera.

WebAssembly

WebAssembly, abbreviated as Wasm, is a brand-new language format that can run in the Web. It also has the characteristics of small size, high performance, and strong portability. It is similar to JavaScript in the Web at the bottom layer, and it is also recognized by W3C. 4th language.

It shines in the front-end games, music, video and other fields. At present, many desktop software have also been moved into the browser by compiling into Wasm.

In 2022, Wasm features will continue to improve, and more and more traditional PC software will be launched on the Web.

wasm.png

Source: ELab Team ↑ [5]

open source

It was included in the 14th Five-Year Plan for the first time. In 2021, Chinese enterprises will actively build open source platforms. According to GitHub statistics, Chinese developers have become the largest developer group in the world.

metaverse

Integration of concepts such as games, VR/AR, blockchain digital assets, etc.

web 3.0

web1.0: one-way information, read-only; web 2.0 logo: User Generated Content (user-generated content, such as Weibo, Facebook); web3.0: people and networks and the communication between networks and people.

5. Summary

In the context of Industry 4.0, with the continuous advancement of Internet trend technologies such as artificial intelligence, cloud computing, big data, Internet of Things, and blockchain, the Internet industry is moving towards industrialization and intelligence. With the normalization of the global epidemic, more and more companies choose or have to work from home (WFH), which will inevitably bring more opportunities to the front-end industry.

By the end of 2023, the global software developers will reach 27.7 million, China will account for 6% to 8%, the front-end is expected to be around 300,000, and JavaScript currently has about 14 million developers worldwide.

The front-end positions only appeared around 2005, and the changes are very fast. It is still in the development period (a good thing). Only by grasping the underlying changes and constantly thinking and learning can we control anxiety within a certain range.

In addition, when it comes to “roll”, it is still caused by self-motivation, right? If you really want to lie down, there are still many ways to lie down. If you want to enter the front-end field, from the perspective of learning, I recommend the hard way. That is to say, the road that seems to us the most difficult turns out to be the easiest, and the road that looks easy may turn out to be more winding. If you want to go to the top of the mountain, you must choose the steepest road, and if you want to go downhill, you must choose the farthest road. This principle is what I want to convey to you today. The reason is that I see too many students who want to take shortcuts, or want to take the easy way. The result is that they go farther and farther, and if they come back in the end, it will consume more. – Cheng Shaofei (winter)

Finally, what is the small factory front-end team betting on? It is betting on the implementation of technology, betting on Vue3.0, TS, Three.js, and betting on young people!

About this article

Source: Qing Dynasty

https://juejin.cn/post/7069903591351255054

at last

Welcome to [Front-end bottle gentleman]✿✿ヽ (°▽°) ノ✿

Reply to “algorithm”, join the front-end programming source code algorithm group, one interview question every day (working day), the next day, Mr. Bottle will answer it very seriously!

Reply to “communication”, blow water, chat about technology, and spit out!

Reply to “reading” and brush high-quality and good articles every day!

If this article is helpful to you, “watching” is the greatest support

“”The algorithm data that the interviewer is also looking at””

“Watching and forwarding” is the greatest support

Leave a Comment

Your email address will not be published. Required fields are marked *