An overview from God’s perspective

This is a document from the future, thanks for your continued interest in the field of front-end technology.

Programming language trends: Python over JavaScript

Source: Github

According to Github, JavaScript has been at the top for a long time, but Python has overtaken it in Q4 2021 (most likely because of the shift to TypeScript), while TypeScript continues to rise. As more front-end developers like TypeScript, we can imagine the future of TypeScript.

What do the front runners of 2021 prefer?

Data source bestofJS

• To everyone’s surprise, zX, Google’s command line tool, will be the number one Star added to the front end project in 2021. You can use it to write JS syntax freely on the command line, and even use familiar await and promise. As you can see, the free spirit of the front-end engineer has also entered the bash expression
• “Fast” is the core of vite, which mainly solves the pain point that the project starts slowly. If you have not tried Vite, why not try this device which does not need to do any compilation. Maybe it can save you time to have a cup of coffee in the afternoon
• SSR is nothing new, but perhaps Next. Js will help you develop and user experience better
• React, our old friend, the richness of the front-end ecosystem remains React > Vue > Angular in 2021
• If you want to try cross-end technology, Tauri might help you. Any application that can be written in JavaScript will eventually be written in JavaScript

Are the 2022 frontrunners more likely to want it?

What would you see if you were given the chance to stand on the shoulders of giants and take a god-like look at the front end of 2022?

The front people on the road to forge ahead, stepping on the new front standards, constantly climbing new peaks

Solid front-end infrastructure, engineering, and experience are what they need to survive

Intelligent front-end construction technology, so that the novice white can quickly catch up with the footsteps of predecessors

Armed with a unique skill and cross-platform technology, the warrior can also be respected in front of the martial arts

Proficient in the front of the god is a hexagonal warrior, on the moon can be picked up, the next star can be said to be versatile

5G scene, but also for the front martial arts warriors to build a new arena, to give more people the opportunity to realize their dreams

Look down. The fun is still to come

If you are interested in any of the techniques described above, be sure to read this article! Believe that our elaborate will bring you rich harvest, together into the ups and downs of the changeable front-end world!

“Many are picking up sixpence, some are looking up at the moon.”

Keep your feet on the ground and practice front-end standards

HTML6.0

On October 28, 2014, W3C officially released THE HTML5.0 recommendation to enable front-end technology to flourish. Although HTML6.0 is currently in the proposal stage, the community has started to talk about it sporadically, so maybe it’s not too far off.

HTML6.0 may add “enhanced authentication” and “integrated camera” 2 capabilities, you can continue to pay attention to the progress.

For a long time, Web applications have been weak in many scenarios due to browser authentication problems, especially at present, most apps are very “heavy” and have many functions. If these two capabilities are popularized, there may be more Web applications to replace the rapid version of previous APPS.

Due to the COVID-19 pandemic, more and more people are switching to WFH. It is foreseeable that telecommuting may become the choice of many people after the epidemic is completely eliminated. So the “integrated camera” capability is likely to play a bigger role in the context of people interacting online.

In 2022, HTML6 may not be out, but there may be more user-experience proposals.

Web3.0

When Facebook changed its name to Meta, the metasomes were hot, but suddenly, overnight, the conversation seemed to move from metasomes to Web3.0.

Google Trends search Trends for “Metaverse” keywords

Google Trends Search Trends for “Web 3.0” keywords

As you can see from Google Trends above, both Trends have increased significantly in recent months. So a lot of people are wondering, what is Web3.0? What can it bring us? Could it be the next explosion? The answer may not be the same in everyone’s mind. In 2022, there will be more and more discussions about Web3.0.

A lot of people are saying that Web3.0 may be decentralization, may be the Internet of things, may be artificial intelligence. We believe that at present, we are looking for a way out in chaos. After everyone expresses their opinions and expresses their opinions freely about the form, composition and application of Web3.0, after a series of precipitation, the results will make the outline of Web3.0 clearer. For example, what is the specific meaning of User Own Content? After discussion, some clear conclusions will be reached. As for the artificial drivers behind the discussion of possible directions, they will surely be weeded out, so 2022 really could be the first year of Web3.0, and worth every front-end developer’s attention.

Look back at frameworks, engineering, and experiences

The front frame

In StackOverflow’s “Most Popular Web Frameworks” survey, there are 5 front-end frameworks on the list, excluding SSR rendering framework and jQuery:

From the analysis of NPM downloads, the observed phenomenon is as follows:

• The React family dominates, taking 70% of the market by itself
• Vue and Angular are neck-and-neck
• Preact is most popular with the niche as a “lightweight React”
• Svelte, as a VDOM-free MVVM framework, is struggling to climb even further than AngularJS, which has stopped updating

NPM download trends

Note 1: @ Angular /core is Angular (2.0+) and Angular is AngularJS (1.0).

Note 2: RN accounts for around 10% of React downloads, which is not very large, and considering that other front-end frameworks also have mixed development builds, no additional distinction is made.

However, analyzing the growth trend of Github Star number, we can find the opposite trend of NPM downloads:

• Vue already has more stars than React, but NPM downloads are less than a quarter of React’s
• Svelte has nearly doubled Preact’s Star count, but NPM downloads are the opposite

Presumably the authors of Vue and Svelte are well-known engineers in the front-end industry, so maybe everyone will come to pay a little bit of a Star, but in a production environment.

Despite the fact that Svelte had the best “likes vs. hates” ratio in Stack Overflow’s May 2021 survey, the reality is that in production (NPM downloads), Svelte has been flat this year and is not on the rise.

React, Vue, Angular are still the strong triangle going forward. In 2022, Vue3 will be the default version of Vue. React 18 will be released as well. Github star 27K + In terms of NPM downloads, the number of new versions is quite significant, so it is likely that more people will try and use them this year.

Packaging machine

Packers fall into two general categories:

• Traditional build: Webpack, Rollup, Parcel, Esbuild
• ESM mixed build: Snowpack, Vite

ESM hybrid compilation: When compiling in the development environment, the ESM using Server dynamic compilation + browser basically realizes the function of “development environment 0 compilation”. When the production environment compiles, other compilation tools are called to do so (for example, Vite uses Rollup).

NPM downloads

Webpack, Rollup, Esbuild:

• Webpack: our old acquaintance, the richest ecology, the most features. Eat 70% of the market on its own
• Rollup: ESM version of Webpack, a lot of historical baggage has been shed
• Esbuild: Webpack written by Go, performance has been improved tens of times

Since the ESM hybrid compiler class packer relies on other packagers, theoretically NPM downloads can never exceed that dependency. Meanwhile, ESM hybrid compilation has been flat overall this year.

<script type="module">

  import lodash from 'https://cdn.skypack.dev/lodash';

</script>
Copy the code

Early packaging tool white whoring browser ESM valuable code snippets

UI framework

NPM downloads

Due to the popularity of modular CSS, tree shaking, and MVVM, the choice of UI framework is not so important anymore. Just choose a UI that fits your project style. No dark horses and moves are expected this year.

E2E test

The selection of the single test framework is mostly in line with the front-end framework/scaffold template/platform support, which doesn’t really offer developers much choice, so here’s a look at E2E testing

In the second half of 2021, a new era of E2E testing has arrived!

Cypress has overtaken Puppeteer as the most popular E2E testing framework

The desktop

Trends in libraries that use HTML + CSS + JS to write desktop applications:

Github Star Number trend

There are only two things to watch:

• Electron: Our old acquaintance, Chromium + Nodejs, is loved by everyone
• Tauri: A rising star, Webview + Rust. Compared with Electron, because there is no need to pack Chromium and Nodejs to run, the product has small size and good performance
• Others: just replace the back end, such as.net, Go, etc

Some other popular gadgets

pnpm

Super enhanced version of NPM, or YARN PnP enhanced version. Its unique design of soft connection and hard link makes the installation rely on quickly, and some design modes also solve many current PROBLEMS of NPM.

However, this kind of NPM replacement tools, in fact, the position is not very stable. For example, when NPM didn’t support package-lock.json in the early days, everyone said “Yarn is so useful!” However, when NPM supports package-locke. json files, the difference is very small, there are no must-use scenarios, and its built-in support for Monorepo is hardly better than Lerna’s.

swc

A Babel written in Rust. The difference between SWC and Babel is the difference between Esbuild and Webpack. It is very fast, but the function is not as good as the original. The ecological construction of SWC is also worth our attention.

Smart build is the right time

The rise of low code

The low-code Development Platform (LCDP) is a kind of Platform software that facilitates the generation of applications. The software Development environment allows users to write programs with graphical interfaces and configurations instead of traditional programming practices. The platform is designed for certain kinds of applications, such as databases, business processes, and user interfaces (such as web applications). Such platforms can generally produce complete and working applications, with some special cases requiring programming.

The concept of low code first appeared in the book “Application Development without Programmers” in 1982. The research and practice process of low code products in the United States is long, and rich experience has been accumulated. China first appeared low code platform is probably in 2014, delivery, product form from the original database to the structure of the data set is set up gradually evolved abstract the various process engine, visual interface products such as ability, application ability and extend from the BPM to large, complex applications such as ERP, CRM, lower the threshold of the code platform in gradually reduce, Users of low-code platforms are gradually shifting from technical professionals to business people, but China’s low-code industry is still relatively fragmented relative to the global market.

Low code development history

Gartner has released the magic Quadrant of Enterprise Low-code Application Platforms 2021. In this study, the world’s well-known manufacturers were strictly selected from multiple dimensions including product operation, service, market feedback, user influence, customer experience and marketing execution. (Domestic low code manufacturers are not included)

• OutSystems, Mendix, Microsoft, Salesforce, And ServiceNow were named industry leaders
• Appian, Oracle and Pega were named challengers
• Creatio, Kintone, Newgen and Quickbase are rated as niche players
• No manufacturer was named visionary this year

Since the beginning of 2021, the low code industry has been constantly concerned, and also triggered a hot discussion and research of many enterprises.

Gartner predicts that “by 2023, more than 70 percent of enterprises will adopt low code (LCAP) as one of the key goals of their growth strategies.”

Gartner also predicts that the overall LCAP (low code development platform) market will reach $29 billion by 2025, with a cagR of over 20%. The LCAP segment is expected to grow from $4.45 billion to $14.38 billion between 2020 and 2025, with a CAGR of 26.4%.

In the early stage of low code development, the types of manufacturers are diversified. Traditional software manufacturers and Large Internet manufacturers are involved in the field of low code. Compared with vertical manufacturers, the application scenarios of general manufacturers are more extensive, so the number of manufacturers is more. However, as the market matures and competition intensifies among generic manufacturers, vertical manufacturers will have obvious advantages in subdivided fields, which can further explore user scenarios and improve product capabilities and user satisfaction. Early layout of low code industry ecology, multi-dimensional expansion of the advantages of manufacturers, to occupy the high ground in the future.

AI and graphical exploration

As a cross-era technology, artificial intelligence shines brilliantly in various fields. In recent years, the attempt and application of AI capability in the front-end field bring a new round of technological revolution.

The front-end can rely on D3.js, ECharts, WebGL and other data visualization display

We can also use visual means to explain the model and assist the algorithm to adjust the parameters. The simplest front end of an application is certainly very familiar to students. Let’s look at the following figure:

At present, when it comes to artificial intelligence, several JS class libraries are closely related to the front end:

• Tensorflow. Js: based ontensorflow.js Node 的 tvnetAlgorithm that can extract dense optical flow from video
• deeplearning.js
• kera.js

High-performance computing:

• asm.js
• WebAssembly
• GPU
• Opencv, front-end CV algorithm, object tracking, image processing, feature detection and so on

One problem you may have noticed is that the typical TensorFlow model is hundreds of megabytes. How does it run in the front end? This brings us to MobileNet, a neural network architecture for mobile models that dramatically reduces the number of model parameters and can be used in browsers as well.

Earlier, in 2017, a Pix2Code paper on image-to-code generated a lot of discussion in the industry about how to generate source code directly from a design prototype. In 2018, Microsoft AI Lab opened an open source sketch-to-code tool Sketch2Code. At the end of the same year, Yotako, a rookie who generates front-end code intelligently from design draft, also emerged. For the first time, machine learning has officially entered the vision of front-end developers with a significant attitude.

	The target	The control number	Results the status quo	Essential ability
Pix2Code	Bootstrap Base control	11	Experimental data accuracy is close to 80%, support less controls	Middle and background basic component identification
Screenshot2Code	HTML base tag	HTML base tag	Low accuracy	End-to-end image generation code
Sketch2Code	Freehand draft to control	9	Hand-sketching lowers the barriers to entry.	Component identification based on hand-drawn draft
shots	Non intelligent recognition, all manual labeling	The unknown	With Showcase, the new design draft cannot be tried out. With closed source and unknown accuracy, 6000 design draft cases were collected manually	The layout algorithm capability of the code generated by the design draft, including rich high-quality control type annotations in various scenarios
Yotako	HTML base tag	The unknown	PSD generates front-end code, has Showcase, membership fees are required to use, the design draft is very high requirements (almost every layer has naming requirements), just started	Design draft generation code, the current rules of the larger proportion

Microsoft’s Sketch2Code is a Web-based solution that uses AI to transform hand-drawn user interface sketches into usable HTML code. Sketch2Code was developed by Microsoft in collaboration with Kabel and Spike Techniques.

Sketch2Code architecture

Imgcook of Alibaba can intelligently generate different kinds of codes like React, Vue, Flutter and small programs by recognizing design drafts (Sketch/PSD/picture), and automatically generated 79.34% of front-end codes in the Double 11 promotion of the same year. Intelligent code generation is no longer just an offline experimental product, but a real value generator.

Imgcook code generation process

At present, 31,913 users have uploaded 92,333 pages on Imgcook’s official website, generating 67,787,814 lines of code in total, and the code availability rate of Ali Double 11 reaches 79%. The data is considerable. According to the current status analysis, Imgcook capabilities performed better in terms of page production for marketing campaigns.

In 2022, with the gradual improvement of low code and graphical technology, the two will improve and achieve each other. Users restore the page through AI and then adjust the page through the low code platform. The whole process basically does not write any code to complete the construction of the whole page. The construction of the page really becomes very simple.

Cross-platform technologies open the door to a multi-terminal world

With the evolution from the PC era to the mobile Internet era, native clients are increasingly moving towards cross-platform solutions due to their own ceiling, thanks to the obvious advantages of cross-platform solutions. For developers, multi-terminal reuse can be achieved once, which to a large extent can reduce the cost of research and development, improve product efficiency. However, cross-platform technology on mobile is not only about the ability of a set of code to run in different scenarios, but also needs to solve the problems of performance, dynamics, development efficiency and consistency. Let’s take a look at the advantages and disadvantages of mainstream WebView, React Native, and Flutter multi-platform solutions.

React Native VS Flutter

React Native is a typical framework for developing Native applications using Web technologies. But compared to many htML-based cross-platform frameworks, Flutter is the one that has the best experience, performance and build ideas that are almost as close to native development.

According to StackOverflow statistics, Flutter scored 68.8% and React Native 57.9%.

According to Statista, a cross-platform development framework, Flutter will be on par with React Native in 2021. In 2020-2021, 42% of developers developed with React Native, with no growth in a year; For Flutter, the figure rose to 42% from 39% in 2020.

Flutter has grown rapidly in recent years, based on an analysis of the number of Stars on Github’s open source project.

Flutter and React Native star graphs on Github

According to Google trends, Flutter search trends are also significantly higher than React Native.

Finally, based on the statistics of various communities and the above analysis, it can be found that Flutter currently has the best cross-end performance and experience, but the number of followers is similar to React Native. Due to the first-mover advantage and the influence of React Native, many apps have entered the stock stage and few new apps appear. Therefore, most apps will not make technical changes without sufficient revenue. So in 2022, if there are no major technical changes for either of them, there will probably not be much of a shift between them, except that there will be a gradual increase in interest in Flutter.

Small program

At the beginning of 2017, wechat took the lead in launching small programs, and other Internet companies have developed their own small programs. After four years of development, the total number of online small programs has exceeded 7 million, and the DAU of wechat small programs has exceeded 450 million.

The above image is from Aladdin’s white Paper on the Development of Small Program Internet in 2021.

At present, there are more than 10 mainstream small program platforms, including Tencent’s wechat small program, QQ small program; Ali’s Alipay small program, Taobao light shop; Bytedance toutiao small program, tiktok small program; Baidu small program, etc.; The implementation standards of different platforms are different, so developers need to learn the development specifications of different platforms to customize development.

Therefore, on September 12, 2019, Alibaba initiated and jointly drafted MiniApp Standardization White Paper with W3C China and manufacturers at home and abroad, aiming at developing common standards to reduce platform differences. And set up a relevant working group (as the veteran of small programs, Tencent did not participate in, after all, if standardization is implemented, it means that the existing wechat small programs can be migrated to other platforms at a very low cost, for Tencent, which has nearly half of the small programs in the whole network, is undoubtedly a loss). Lifecycle, MANIFEST, packaging and other documents have been produced so far. However, from the perspective of platforms, the implementation of these standards is still very low and has not been unified, so there is still a long way to go for standardization.

The solution to cross-platform development today is framework transformation.

Throughout the history of the front-end, whether it is the popularity of CSS preprocessors, the popularity of various templates, or the birth of CoffeeScript and TypeScript, all confirm this statement, wechat small program here is no exception. Therefore, a variety of small program development frameworks such as a hundred flowers bloom, emerge in endlessly.

Star number of Github open source projects (some libraries with similar implementations are not compared)

Baidu Search Trend

In terms of the syntax of the framework, it can be roughly divided into React and Vue:

• Taro: Represents the React camp by implementing a setDOM/BOMThe Taro DOM Tree API dynamically generates page structures at runtime using the Template Taro DOM Tree. React, Vue, Preact, etc. It implements its own event mechanism independent of a particular platform. At the same time, the disadvantages are obvious: the deeply nested template structure leads to a slightly larger package size and more redundant nodes in the actual generated page

• Uni-app: Vue camp representative, provides IDE, development process complete and easy to use, has the most users. In the compilation stage, the code written by Vue SFC is compiled into small program code files (JS, WXML, WXSS, JSON). In the running stage, the binding between Vue and page instance is carried out, and the DOM operation in the patch stage is replaced by setData. The advantage is that the generated page structure is close to native without redundant nodes. The main drawback is that the available framework is relatively limited, basically fork a specific version of vUE for customized development, can not support other versions and frameworks

At present, according to some community feedback and test results, UNIApp is relatively leading in the development tool chain and multi-terminal consistent experience. Taro relies on jingdong to use many small programs of its own (jingdong shopping ranked TOP10 in Aladdin small program index). It has been updated frequently in the past year, and the latest version has been adapted to hongmeng application. There is no obvious gap between frameworks, and the actual selection may mainly depend on the team’s own technology stack preference.

In addition to using frameworks for development, converters can be used during development to help convert single-platform applets to versions for other platforms. The mainstream conversion tools include the following:

• Antmove: a popular multi-terminal converter, which can convert Alipay/wechat applets into multi-terminal applets, supporting incremental compilation. Transformation support overview
• Wx2swan: wechat applet to Baidu applet
• Qihoo /wx2qh: wechat mini program to 360 mini program
• Miniprogram-to-uniapp: A conversion tool provided by Uniapp, which can convert the native wechat applets into Uniapp projects for multi-terminal adaptation
• Tarojs /cli: The conversion tool provided by Tarojs can only convert native wechat applet applications into Taro projects

NPM downloads (excluded because @tarojs/cli contains some framework initialization commands that are not comparable)

As you can see, the number of downloads of the above NPM packages is low, indicating that the current usage scenario of the method is too small, and many packages have not been updated for a long time, so no major changes are expected this year.

With the emergence of some cross-end frameworks (Uniapp, Taro), some cross-end converters are no longer maintained. Let’s take a look at some cross-end converters:

• Together: wechat small program real-time running tool, currently supporting Web and iOS operating environment
• Hera-cli: a framework for writing cross-platform applications in applets, packaged as Android, iOS, and H5 applications
• Weweb-cli: compatible with small program syntax front-end framework, you can use small program writing method, to write web applications

NPM downloads

The cross-end technique is not intended to completely replace native development, which allows us to write the best performing code for every scenario. However, it is too much work to do this, and the actual project development needs to master the balance between efficiency and optimization. The use scenarios of cross-terminal are not necessarily project-level, but business-level or even page-level.

The advantage of cross-side is that it allows us to write more efficient code and have a richer ecosystem while still delivering good performance.

Build the pan-front of the all-powerful hexagon warrior

The history of “front-end development” seems to have been finding its niche; From the “Stone Age” of cutting graphics and writing HTML templates, to the “industrial age” of front and back end separation and large front end, and now the “electrical age” of cross-end technology and low code. The responsibilities of front-end development are changing all the time, and the technologies that front-end development needs to master are constantly being updated.

The old jQuery “expert”, IE browser expert is gone. The popular Vue and React frameworks are almost mandatory skills. The rapid pace of change at the front end tells us that adapting to change is the core skill.

Serverless

Semantically, serverless means no service architecture, but the term serverless is merely a conceptual emphasis. A serverless architecture still has servers somewhere, but developers no longer need to focus on the infrastructure like traditional development, but more on the actual logical code of the business.

In the UC Berkeley paper Cloud Programming Simplified: A Berkeley View on Serverless Computing accurately defines the concept of Severless: Serverless is a simplified way to use cloud, which can be basically understood as FaaS BaaS. Storage and computation are carried out in the BaaS layer, and cloud functions are provided in the FaaS layer.

Compared with the traditional server hosting mode, using serverless architecture development, developers do not need to pay more attention to availability, capacity expansion, alarm monitoring and security vulnerabilities and other problems, only need to be responsible for Faas layer code to deal with business logic.

Also, UC Berkeley identifies three key features that Severless needs to meet:

• The server concept is hidden. Although the server still exists, developers are not aware of it, and there is no need for tedious development and operation and maintenance of the server
• Provides a pay-as-you-go billing model that does not charge when resources are idle
• Provide the ultimate flexibility to scale, so that the provision of resources perfectly match the business needs

The birth of Serverless is more of a further abstraction of resource management and operation and maintenance at the cloud computing level. However, from the concepts mentioned above, it can be seen that for technical developers, front-end developers will benefit the most under Severless system. It is especially important for front-end developers to expand their business scope and touch more of the core processing logic of the business. As a result, full stack engineers have been mentioned a lot in front end circles in recent years. Ideal is very good, but really want to let the front end to completely take care of the back-end technical details and data storage and other good post-maintenance, it is very difficult for the vast majority of front-end practitioners, is the so-called expertise industry. With the empowerment of Serverless, front-end engineers can control page interaction, business logic, data processing and so on in their own hands, realizing the real possibility of full stack.

The whole stack

“Full-stack developer” is defined as “a developer who has a combination of front-end, back-end, and other web development skills.” Full-stack developers can be competent in the whole process of product development, from front end to back end, from architecture design to code implementation, from automated testing to operation and maintenance. For the company, full-stack engineers can reduce the company’s labor costs and project communication costs; For individuals, having full link technology is beneficial to the closed loop of technology, expanding global thinking, and enhancing personal ability and value.

Different industries and directions require slightly different capabilities for the full stack. In order to build a web application independently, a “full stack developer” will have the following skills:

• Front end: JavaScript, H5, CSS3, Sass, less, React, Vue, Webpack, Jest
• Backend: Nodejs, Go, Java, Spring, Gin, Kafka, Hadoop
• Databases: MySQL, mongoDB, Redis, Clickhouse
• Operation and maintenance: Network protocol, CDN, Nginx, ZooKeeper, Docker, Kubernetes

There is much debate in the industry about whether being a “full-stack developer” is a good career path. The argument against “full stack” is that human energy is limited, “full stack” will distract developers, and most likely only superficial, know something about everything, but master nothing. There are also a lot of people and companies that support “full stack”, Google’s recruitment is basically “Software Engineer”. The argument in favor of “full stack” is that full stack developers are better able to see the collaboration between each “stack” of an application as a whole.

It’s hard to reach a conclusion about this debate, but let’s go beyond code and application and look at the ranks of engineers from a marketing perspective. The ultimate criterion for engineers to realize their self-value is products (no matter technical products or commercial products). “full stack” or “expert” is only the process state of realizing the goal. In his letter from Silicon Valley, Wu Jun divided engineers into five levels:

From the point of view of the engineer’s ability model, the first level requires the combination of “favorable conditions, favorable conditions and favorable people”, which is the highest honor of engineers. Ordinary people may be able to focus on the second and third levels. An excellent engineer is not based on the number of stacks, but more importantly, with product view, global thinking, communication skills, learning skills, problem-solving skills and so on.

DevOps

DevOps (a portmanteal of Development and Operations) is a culture, movement, or practice that values communication and cooperation between “software developers” and “IT Operations technicians”. Build, test, and release software faster, more frequently, and more reliably by automating the software delivery and architecture change processes. DevOps can be thought of as an umbrella term for processes, methods, and systems.

The role of DevOps is evident in the rapid iteration and continuous interaction of the business. Thanks to its seductive advantages, DevOps has become an integral part of software development today. According to the investigation report on the status of DevOps in China (2021) jointly released by Ict and Huawei Cloud DevCloud, enterprises pay increasing attention to the capability maturity assessment of R&D operation integration (DevOps). The survey also showed that 63.64 percent of respondents were interested in DevOps capability Maturity assessment, an increase of nearly 10 percent from 2020. So there are a few things to watch for DevOps in 2022.

• Microservices Architecture: Microservices architecture can break down an application into smaller services, making the development process highly agile and extensible
• Combine it with Kubernetes: Kubernetes is an open source container choreography system, and the growing popularity of container technology is one of the factors behind DevOps. Using Kubernetes DevOps, software developers and operations teams can quickly exchange large numbers of applications with each other in real time, greatly increasing productivity
• DevSecOps (DevOps + Security) : Security has always been a top priority for companies, so it will be taken seriously. If security can be integrated with CI/CD tools to continuously monitor and fix security vulnerabilities during development, the speed and quality of delivery can be greatly improved

New trends in the 5G scenario

5G era arrives

The arrival of 5G means a lot to us who work in technology research and development. His presence is a giant leap in data speed, responsiveness and connectivity. Like a new highway, it facilitates the flow of large volumes of data faster and more smoothly than ever before. With the upgrade of communication technology, the performance of hardware equipment is also improving.

What are some of the breakthroughs on the front end that will result from network and hardware advances?

5G will be deeply integrated with ultra HD video, VR, AR, consumer cloud computing, smart home, smart city, Internet of vehicles, Internet of Things, and intelligent manufacturing, all of which will bring new growth and opportunities for the development of front-end technologies.

WebAR & WebVR

In October 2021, Facebook announced that it was changing its name to Meta and defining the metasomes as the next evolution of social. The metasomes quickly became popular around the world, and at this early stage of the metasomes’ foreseeable future, Will front-end WebAR and WebVR be able to hitch a ride to improve the tepid status quo in recent years?

It seems that the current WebAR and WebVR technologies are still far from realizing the vision of the metasomes. However, with the advantage of spreading in the FORMAT of URL and promoting through social media sharing, WebAR and WebVR are undoubtedly the most convenient way for users to reach the threshold of the metasomes. You don’t need to buy expensive VR equipment or install an APP. You can experience it through the mobile web. With the gradual popularization of 5G technology, some existing experience problems, such as large 3D model size and long initial resource loading time, can also be alleviated.

What can the front end person do in this area? Technically, we need to by machine learning algorithms, real-time virtual image overlay to the user’s screen, and alignment and position in the real world, combines the technique of WebRTC web browser real-time acquisition and display video streaming, the ability to reuse WebGL, 3 d model load characters, rendering and animation.

Web 3D

We are not unfamiliar with Web 3D, which has rich business application scenarios: 3D H5 games, online house viewing, e-commerce, online education, etc., which is undoubtedly a fertile ground for technology.

The most well-known Web 3D rendering engine, Three.js, may have been used to draw cubes, but many people were rejected because of its high threshold.

Lottie is probably the first solution that comes to mind for the implementation of complex animations, and the cost of using Web 3D can be much higher than expected, which is a great challenge for the skill requirements of the design and development teams.

With the development of 5G technology, video loading speed will be very fast, and simple real-time rendering will be directly replaced by video. Complex ones can be rendered by a server, sending images back to a web page, and as long as the transmission is fast enough, the phone’s performance is no longer an issue.

Reducing the cost of web 3D research and development should be an important development path in the future. With the lowering of the technical threshold, it will attract more interested people to join and promote its positive development. So Web 3D is likely to become more platform-based, providing simple and efficient tools will be a core competency.

WebRTC ( Web Real-Time Communications )

WebRTC is a real-time communication technology that opens the door to a new world of information passing on the front end. For most front-end developers, information passing is limited to XMLHttpRequest. Upgrading to full duplex requires WebSocket. WebRTC is definitely breaking the Truman world.

What we see now: Based on point-to-point transmission, the front end has broken through some of the original bottlenecks and achieved previously unreachable capabilities

• Audio and video P2P technology scheme
• Instant messaging solution similar to wechat video
• Information messaging
• Live classroom

The dilemma: WebRTC’s high encapsulation makes it almost impossible for front-end developers to get involved in the two major areas of transmission extension and streaming media processing.

Future: WebRTC will shine in peer-to-peer private transmission, entertainment, metasverse and low latency

• WebRTC gameplay, based on machine learning, audio and video algorithms, may become a new outlet
• End-to-end encrypted transmission is a new approach in sensitive and other scenarios
• Low latency in China will continue to shine in IOT areas such as cameras in addition to live classes

Maybe there’s something else?

Wasm

WebAssembly, referred to as Wasm, is a new language format that can run in the Web. It has the characteristics of small size, high performance and strong portability. It is similar to JavaScript in the Web at the bottom, and it is also the fourth language recognized by W3C in the Web. Designed as a compilation target for platforms with high-level languages like C/C++/Rust, Wasm was originally designed to address JavaScript performance issues.

In 2020 and 2021, Wasm will shine in front-end games, music, video and other fields because of its performance advantages that JS does not have. At present, many desktop software have been compiled into the form of Wasm into the browser, and many Web applications developed based on Wasm have also mushroomed. Various Web video editors, some online VR games, etc. In addition to good cross-platform solutions, the user experience of opening a web page and using it is easy for novice users to accept.

Technology development and technology usage are mutually reinforcing, so Wasm features will continue to improve in 2022, while more and more traditional PC software will be available on the Web. Rust has also taken off in the front-end space, with most front-end developers trying to get to know Rust, a combination that has been a hot topic for the past year, according to Googlo Trends for the “Rust Wasm” keyword.

(Googlo Trends about “Rust Wasm” keyword Trends)

So in 2022 we can expect a new spark to emerge as more front-end developers learn and use Wasm + Rust at the same time. My guess is that something like edge-side infrastructure is likely to be built in a Node environment, such as a lightweight sandbox built using Rust + Wasm.

The last

Welcome to join us! , contact email: [email protected].

“Data – TnS – FE” department of globalization product content security business for the company to provide all kinds of ability, its target user/business perspective, combining technology can assign to the business, make more universal and convenient business China, infrastructure, solutions, etc., for all business operations team’s ability to provide stable, efficient and easy to use.

Refer to the link

• Comparing the New Generation of Build Tools
• Insights.stackoverflow.com/survey/2021…
• Explore the future of low code. PDF
• Low code platform communication at home and abroad
• 2021 China low code Market research report
• Small programThe underlying framework
• The render tree
• Taro comparison of native, cross-end frame comparison
• Taro, uniapp