“What will be hot and what to learn in 2022? This article is participating in the” Talk about 2022 Technology Trends “essay campaign.

preface

2021 is an extraordinary year, because the epidemic is still spreading, the work and life of many programmers have been affected, but this does not stop the advance of front-end technology; Looking back on the front-end process of 2021, it is a year of making progress in stability as a whole. The mainstream technology frameworks are constantly optimizing their structures. The rapid development of large front-end fields such as Flutter and Serverless is beyond expectation. In 2021, the front-end technology is in the deep water exploration stage, and there are not many breakthrough content or frameworks. There are still a lot of libraries and components, but compared to the rapid development of frameworks in the past few years, it is still a little thin. So looking ahead to 2022, what are the new trends in front-end technology? As front-runners, what can we learn in 2022 so that we can take advantage of the opportunity to achieve a small revenue goal?

Front-end technology trends and knowledge in 2022

1. Essential front-end knowledge for 2022: Basics

The ancients said: the folded wood, born in the tail; A platform of nine stories begins with soil. Lao tzu

The foundation of front-end technology: HTML+CSS+Javascript; What are they? How do you understand them?

HTML

HTMLReferred to asHypertext Markup Language. Since 1990, the markup language has undergone many changes, among whichHTML5Is one of the most popular versions of HTML, recognized as the next generation Web language, it supports smart forms, graphics canvas, multimedia, geolocation, data storage and other new features. As theHTML5The popularity of it helps develop better organized page content; It has greatly enhanced the ability of the Web in rich media, rich content and rich applications. It has been hailed as a key factor that will eventually change the mobile web as browsers become more friendly to the new standards. And HTML doesn’t stop there. It’s still iterating and looking to the future, 2022 or soHTML6It will make more websites simple, efficient, convenient and intelligent.

CSS

CSS is called cascading style sheets and is used to control the style of a web page. CSS3 is the upgraded version of CSS technology, including box model, list module, hyperlink mode, language module, background and border, text effects, multi-column layout and other modules. The new features of CSS3 include rounded corners, shadows, gradients, animations, multi-background images, text or image deformations (rotation, scaling, tilting, moving), multi-column layouts and elastic box model layouts, media queries, etc. Although there are so many features, but CSS is just a simple attribute description, for complex or important projects, CSS has no variables, conditional statements, functions and scopes, the development of web pages need to write a lot of complex, inconvenient to reuse the code, it is difficult to write well organized and easy to maintain THE CSS code, Hence Sass and Less.

Sass and Less are actually the same thing, both are compiled to generate browser-recognized CSS files, can be regarded as an extension of CSS basic functions and the extension of the two dynamic style languages. The difference between the two is as follows:

1. Sass is Ruby based and is processed on the server side; Less is based on Javascript and is processed on the client side;
2. Less is easier to use than Sass. Less adds the features of procedural language on the basis of the existing SYNTAX of CSS without cutting the original features of CSS.
3. Sass is more powerful than Less. Sass includes variables and scopes, function concepts, data structures, and process control.
4. Lessuse@Declare variables, andSassuse$Declare variables.

Although Less will have performance and time loss when compiling, but Less is relatively clear, easy to use, and the compilation environment is relatively loose, so I choose Less for development in actual development. In other words, both Sass and Less are designed to make CSS development more flexible and powerful, and both should be able to understand and master the style effects that make them more comfortable in 2022.

Javascript

JavaScript is a function-first, lightweight, interpreted or just-in-time compiled programming language. According to theGithubThe official release of the 2021 annual report andStack OverflowAs can be seen from the statistical analysis of Javascript, Javascript continues to dominate the list and is still the most popular development language in the world, deeply loved and pursued by the majority of developers.What to know about Javascript in 2022:

1. Let and const 2. Destruct assignment 3. Includes (), startsWith(), endsWith(), repeat(), padStart(), padEnd(), trimStart(), and replaceAll() 4. Methods: isNaN(), parseInt(), parseFloat(), isFinite() 5. Array methods: findIndex(), find(), entries(), keys(), values(), includes(), flat(), array.from (), sort() 6. Object methods: Object.is(), Object.assign(), keys(), values(), entries() 7. Arrow functions 8. async and await functions 9. Class classes and modularity 10. Set and Map data structuresCopy the code

Node.js

The three swordsmen mentioned above are not a problem as basic knowledge before 2020, but the speed of progress is too fast. In my opinion, in 2021 and after, the scope of basic knowledge may not be only three swordsmen. Through the major recruitment platforms and the job requirements of big factories,NodeAdmittedly, it has been used as a necessary skill for screening talent, rather than a high skill, plusGithubAs can be seen from the statistics ofNodeThe heat is only increasing. Node.jsIs a JavaScript runtime environment based on the Chrome V8 engine, using aEvent-driven, non-blocking I/O model, a development platform scripting language that lets JavaScript run on the server.

The concept is not easy to understand, right? What exactly does Node bring? Look at the picture below and you’ll seeNodeThe role of:All in all,NodeChanged the front end and introduced the concept of a big front end; In engineering application, unified standards, the introduction of componentization, automation, reduce the threshold of development; The application on the server side bringsFull stack development, server-side rendering, Serverless, clusteringAnd other advantages; All of this is about improving development efficiency and performance so that the user experience can reach the maximum, so 2022NodeThe relevant knowledge and development must be integrated, must also be integrated!

2. Essential front-end knowledge for 2022: Frameworks

In the realm of low-level front-end frameworks, Jquery dominated at first, but the rise of the MVVM framework has made it the dominant type framework. The existing Vue, React and Angular frameworks are neck and neck. It can be said that these three frameworks are the most widely used underlying frameworks by front-end developers. Angular has a higher threshold of entry than the other two frameworks, so I won’t go into details here.

According to theGithubStatistics, as you can seeVueandReactNumber of starsAccording to theNPMAs you can see from the weekly downloads ofReactandVueThe number of downloads is staggering:

It is not hard to find that Vue and React have become the two most popular front-end frameworks in the world, and React has topped the list for three consecutive years.

Vue.js

Vue is a set of progressive frameworks for building user interfaces. Designed with bottom-up incremental development, Vue provides A MVVM data binding and composable component system with a simple, flexible API that enables responsive data binding and composable view components.

Main features:

1) Lightweight

Vue automatically tracks dependent template expressions and evaluates attributes, and has a flexible API that makes it easy for developers to understand and get started faster.

2) Two-way data binding

Vue adopts a combination of data hijacking and publiser-subscriber mode, using Object.defineProperty() to hijack the setter and getter of each attribute, publish messages to subscribers when data changes, and trigger corresponding listener callbacks to render the view.

3) instructions

The Vue interacts with the page through built-in instructions. The purpose of the directive is to apply the interaction to the DOM when the value of the expression changes.

4) Componentization

Component extends HTML elements and encapsulates reusable code; Parent component communication the parent component communicates unidirectionally from the parent to the child via props, and the child and parent components notify the parent component to change data by triggering the event $emit. Sibling component communication includes Bus and Vuex. Inter-level component communication includes Bus, Vuex, provide/inject, and $listeners /$listeners

5) routing

Vue-router is a routing plug-in of Vue used to build single-page applications. Routing is used to set access paths and map paths to components, whereas traditionally pages are switched and jumped to via hyperlinks.

6) State management

Vuex is a state management mode developed specifically for Vue applications. In fact, it is a one-way data flow. The State drives the rendering of the View, and the user operates on the View to generate Action, which causes the State to change, thus making the View render again, forming a separate component.

Advantage:

• Vue component development, reduce the amount of code, easy to understand;
• Vue does not refresh the page using routing, partially refresh;
• MVVM development mode, two-way data binding;
• Virtual DOM is used for server-side rendering

React.js

React is a JavaScript library for building user interfaces. React is a UI engine, an abstraction layer for the DOM, and not a complete solution for Web applications. It follows the concepts of component design pattern, declarative programming paradigm and functional programming, uses virtual DOM to effectively manipulate DOM, and follows one-way data flow from high-order components to low-order components, so as to make front-end applications efficient.

Main features:

1) Declarative design

Declarative programming is about what you do, not how you do it. We need to declare the components to be displayed according to the logical calculation, rather than explicitly defining the steps, it does not describe the steps of the control flow, that is, it can easily describe the application.

2) Efficiency

Virtual DOM, not always manipulating DOM directly; Minimize page redrawing using DOM Diff algorithm.

3) Flexibility

In React, you can interpret everything as JS, so that operations are less constrained; And you can use it with other libraries and frameworks, so you can write whatever you want.

4) components

React everything is a component. The entire logic of an application can be broken down into small, individual components that can then be reused in other projects and applications.

5) One-way data flow

React is a one-way data flow, and data is passed mainly from parent to child nodes (via props). If one of the parent props changes, React will re-render all of the child nodes.

Advantage:

• Virtual DOM plus Diff algorithm reduces DOM manipulation and improves rendering performance.
• Redefine view development with declarative syntax JSX;
• More modular code, high reuse rate;
• Unidirectional data flow, predictable and controllable;
• Abstract DOM operations as state changes.

So far, both Vue and React have taken a brief look, and both are excellent tools for building interactive user interfaces. Choosing which project to apply to depends on business needs, environment, developer, budget, and work hours. As front-end personnel, both should learn and understand, so that they will not be passive in the future work, so they will not learn Vue or React by 2022.

TypeScript

Insert into the frameTypeScriptTo illustrate its importance, let’s start with the picture above:

The first chart shows Stack Overflow’s favorite technologies, and the second chart shows NPM downloads, which shows TypeScript’s explosive growth.

TypeScript is a superset of Javascript types that can be compiled into pure Javascript. TypeScript runs on any browser, any computer, and any operating system, and is open source.

Why learn TypeScript?

The figure above shows us that TypeScript is important enough to learn and use. We need TypeScript because Javascript can’t merge types and lacks type-error checking at compile time, and because it’s messy, hard to tease out, and difficult to debug in large, complex Web projects, it’s not suitable as server-side code in enterprises and large code bases. TypeScript is one of the most popular technologies because of its reliability, ease of refactoring, and its ability to write clean code in large, complex applications that is easier to read and understand. Front-end development in 2022 must understand TypeScript and use it in real projects.

3. Essential front-end knowledge for 2022: clients

In the stage of diversified development of various platforms, front-end development needs to face the development of a variety of front-end versions, the client also from the original browser, mobile terminal, increased to the public number, small programs, so we have to understand the front-end development in a variety of client solutions and implementation.

PC

First of all, PC is the browser of the computer. The large official website, background management system and OA management system we developed are basically designed and developed based on PC browser. In the development, the PC side is mainly considered the compatibility of the browser, the general use of browsers are WebKit kernel, and the most recommended browser or Chrome (Google Browser).

Schematic of the main parts of the browser:

Main browser kernel:

The browser	The kernel	JS engine
Chrome	Its kernel	V8
IE	Trident kernel	Chakra
Edge	Trident kernel	Chakra
FireFox	Gecko kernel	SpiderMonkey
Safari	Its kernel	Javascriptcore
Opera	Presto kernel	Carakan

For browser compatibility, see this article: Browser Compatibility Summary.

The mobile terminal

The main consideration in mobile terminal development is mobile phone compatibility, that is, the adaptation of mobile phone resolution and the slight differences between different operating systems. Different brands of phones have different screen sizes, and to create a page that doesn’t mess up on different phones, you need to be adaptive and responsive. What is adaptive and responsive?

Responsive: Responsive layout detects viewport resolution and performs code processing on the client side for different clients.

Adaptive: The adaptive layout mainly detects the viewport resolution to determine which device is currently visited, so as to further request the service layer and return different target pages. Adaptive is just a subset of reactive.

The design of the mobile terminal is based on the device resolution of the iphone6d, i.e. the design is 750 × 1334px.

In the actual project, the solution to adaptation should be known as the following:

1) Media query using @media media query can be designed for different screen sizes, multiple styles, so as to achieve adaptive effect. The disadvantage is that multiple sets of style code once the change needs to change too much style, appears cumbersome.

@media screen and (max-width: 375px){ body{ background-color:#f5f5f5 } } @media screen and (max-width: 320px){ body{ background-color:#fff; }}Copy the code

2) Percentage

Percentage units allow the width and height of the page components to change with the viewport to achieve a responsive effect. The disadvantage is that the calculation is difficult, and the code needs to be written according to the conversion percentage of the design draft, so it is not recommended to use the percentage to do the adaptive requirements.

3) the vw/vh

Vw/VH is a new unit introduced by CSS3. Vw represents the width relative to the view window and vh represents the width relative to the view window. For any level element, 1vw/1vh is equal to 1/100th of the width or height of the view when using two units.

4) rem

Rem units are the font size relative to the root element of the HTML tag. By default, if the FONT size of the HTML element is 16px, then 1rem = 16px.

> Adaptive method 1 in Vue project: > install: NPM I lib-flexible > import lib-flexible: import 'lib-flexible' > add meta tags: <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > Vue program adaptive method 2: Var cssLoader = {loader: 'css-loader', options: {minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } } function generateLoaders(loader, loaderOptions) { var loaders = [cssLoader, px2remLoader] }Copy the code

Install yarn add lib-flexible postcss-px2rem. Add lib-flexible to main.js or index.tsx. Import 'lib-flexible' > webpack.config.js const px2rem = require('postcss-px2rem') {loader: require.resolve('postcss-loader'), options: { plugins: () => [ px2rem({ remUnit: 75})]}} or config-overrides.  const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile', style: true, }), addLessLoader({ javascriptEnabled: true, modifyVars: {"primary-color": "#409EFF"},}), addPostcssPlugins([require(" postCSs-px2REM ")({remUnit: 37.5})]), munit (),); > Comment out the template index.html: <! --<meta name="viewport" content="width=device-width, initial-scale=1" />-->Copy the code

Small program

With the saturation of the APP market, most users have formed a habit of using it, and it is difficult to develop new apps to survive in the market. In addition, APP development and promotion costs are also indisputable facts. So the rise of applets is a product of The Times. What is a mini-program? Applet is a kind of application that can be used without downloading and installing. It realizes the dream of application “at your fingertips”. Users can open the application by scanning or searching it. It also embodies the concept of “use it and go”, so users don’t have to worry about installing too many apps. Applications will be everywhere, ready to use, but not installed or uninstalled.

According to theAlighting: White Paper on the Development of small Program Internet in the first half of 2021We can see the need for applets from the report:

As front-end development, applets will definitely be a must-have skill in 2022. Because small program is the general trend of The Times, irreversible; Furthermore, the small program is the magic tool of low-cost drainage promotion, through friends, public number sharing transmission, flow fission to achieve the purpose of low-cost drainage; Finally, applets have a great user experience and user analytics, comparable to native apps. Mobile changes life, and then change society, the Internet era of small programs has arrived, so in the development of all kinds of small programs, should master at least any platform small program development skills in 2022, first wechat small programs, after all, wechat daily activity rate is very high.

4. Essential front-end knowledge for 2022: Data visualization

Data visualization is a very hot field. If you search chart on Github, you will find 10.8W results, which is enough to see that data visualization plays a pivotal role in the technical direction. Countless developers are making contributions to data visualization, so what is data visualization?

Meaning of data visualization

Data visualization refers to the presentation of data as a statistical graph.

Data visualization has a purpose, which is to deliver information and knowledge accurately, efficiently, and comprehensively. Visualization is to transform invisible data phenomena into visible graphic symbols. Make connections and associations, discover filters and features, and gain insights into business value from complex, unexplainable and correlated data. By using appropriate charts, the data can be presented directly, clearly and intuitively to achieve the purpose of self-interpretation and expression of data. Efficient and successful data visualization delivers the most accurate information in an accurate and simple way and saves people’s time of thinking. Because the speed of the right brain to memorize images is one million times faster than that of the left brain to memorize abstract words, data visualization plays a crucial role for people to get data and make decisions.

Data visualization scenarios and tools

1) General report requirements: more than 80% of the requirements in the development process are general report requirements, and a general chart library can be used to meet the daily development requirements. Commonly used chart libraries in the industry are as follows:

Highcharts: Highcharts is a chart library written in pure JavaScript that makes it easy to add interactive charts to web sites or web applications and is free to use for personal learning, personal websites and non-commercial use.

Echarts is a Javascript based data visualization chart library that provides intuitive, vivid, interactive, and customizable data visualization charts.

G2: A set of high interactive graphics syntax for data-driven visualization for general statistical charts, with high ease of use and scalability. Without paying attention to the tedious implementation details of charts, a single statement can be used to build a variety of interactive statistical charts using Canvas or SVG

2) Mobile visualizations: If the scene requires compatibility on both PC and mobile, use G2 and adapt to the mobile screen, but if you are using H5 or applets on mobile apps, choose F2.

F2: It is a visualization engine that focuses on mobile, and is oriented to general statistics and charts, out of the box. It perfectly supports THE H5 environment and is compatible with various environments (Node, small program), complete graph syntax theory, meets various visualization needs, and professional mobile design guidance brings the best mobile graphics experience.

The actual project uses Echarts to write data visualization components because Echarts is free, Chinese documentation is easy to develop and read, and charts are rich and suitable for our needs. Echarts examples not enough? Head over to MAKEAPIE for more examples. The development renderings are as follows:

Therefore, the 2022 data visualization related tool plug-ins should learn to increase the enrichment of their front-end skills is necessary!

5. Essential front-end knowledge for 2022: Medium platform and micro services

China

Speaking of zhongtai, the first thing that comes to mind is alibaba’s “big zhongtai, small front desk” strategy. The value of this strategy is: the front desk can quickly adapt to the rapidly changing market, zhongtai group’s technology and data capabilities, strong support for the front desk. The middle stage refers to the construction of a flexible and fast structure that should be compared with that, quickly realize the requirements of the front end, avoid repeated construction, and achieve the purpose of improving work efficiency.

The emergence of the most significant point is thatAvoid reinventing the wheel. Traditional project architecture, the various projects are relatively independent, many projects were invented in repeating the same wheels, which let the project become bloated, development efficiency also gradually inefficient, so he need China to organize and provide public resources for all projects for each project, so as to improve the development efficiency, save time cost, that can force on business.

Micro service

The introduction of the Middle stage also led to another concept,Micro service.Microservice architecture usually adopts the method of front and back end separation. According to certain rules, it is divided into multiple microservices that can be independently run, independently developed, independently deployed, and independently operated and maintained, so as to meet the requirements of rapid business change and distributed multi-team parallel development. Medium platform architecture is to solve the enterprise capability reuse, and this capability reuse must be multi-front, cross-department. The distinction between the two:ChinaIs a kind of enterprise governance thought and methodology, andMicro serviceTechnical architecture, of courseMicro serviceThere are reuse issues, but this reuse generally refers to component level reuse, not enterprise level reuse. For front-end development, microservices are closer to work, after all, component level reuse should be a commonplace.Microservices ArchitectureAs shown below:

Micro front-end

The micro front end is a kind of technical means and method strategy that multiple teams jointly build modern Web applications by releasing functions independently.

Features of the micro front end:

> 1) Small code base, higher maintainability; > 2) separate services deployed separately > 3) teams iterating and updating themselves > 4) Separate teams organized around business units and productsCopy the code

Qiankun is a single-SPa-based micro-front-end implementation library, which aims to help people build a production-usable micro-front-end architecture system more easily and painlessly.

In my work, I do the construction of micro-front-end without using the framework, and I use the traditionaliframeWay, thoughiframeThere are URL issues out of sync, internal and external communication, browser context, etc., but the essence of the framework comes fromiframeIn order to solve the above problem, we usepostMessageTo solve theiframePart of the problem was to meet our needs, so we chose resolutely when we builtiframe. And our front end is to do the following implementation:

So in 2022, zhongtai, micro service and micro front end are all knowledge that we need to understand. If we can master relevant skills and apply them to practical work, we will definitely be further away from a small goal! How to use iframe to achieve the front end of the platform mentioned above will be explained in a later article, here is a preview.

The last

Ask canal which get so clear, to have a source of living water – Zhu Xi

The front-end world is changing fast. New technologies are constantly evolving, but they don’t change much per se, just more and more ways to solve problems. How to let oneself stand in the front circle, but also from their own constant desire for knowledge and new, as long as according to the established route and goal, will harvest their own happiness and return.