2023年中高级前端养成指南-需要关注和学习的13大类80余个前端技术栈与前端趋势-看这篇就够了系列

今天是兔年开工的第一个星期一，我们又要投入到忙碌的工作了。

以下是imqdcn研究整理的2023年中高级前端养成指南，收藏起来，从开工第一天起，立下全新的计划和目标，愿你在兔年大展宏兔，扬眉兔气。

一、基础语言（前端语言三要素）

1、HTML5诸如拖拽（dragable属性）、本地存储（localstage）等新特性，部分见浏览器API

2、CSS

• Flexbox（弹性布局）
• Grid （栅格布局）
• Multi-Column （多列布局）
• CSS Function （CSS 函数）

3、JSON

• json schema- 可进行json数据格式验证

二、浏览器 API

1、webRTC

一项实时音视频通用数据传输技术

2、geolocation

H5自带的地理定位对象

3、webSocket

双向通信协议，能实时聊天通信，比如在网页中实时推送后端消息

4、webXR device

在网页中实现虚拟现实

5、shadow DOM

DOM中的DOM，类似于虚拟DOM

6、custom element

自定义元素，可以同 shadow dom 一起使用

7、webGL

一种3D绘图协议，区别于H5的canvas的2D绘图

8、File system access api

让浏览器有能力操作本地文件-类似于nodejs提供的File System API

9、web speech

H5新增的语音识别和语音合成API

10、page visibility

页面可见性，可以获取到一个网页是否可见的状态,并能获取可见性变化的事件

11、service workers

是 Web Workers 的一种实现,功能是可以拦截、处理请求,配合 CacheStorage 等 api,可以做到将资源存储到本地等,实现离线访问

12、动态 import

动态import的作用就是按需加载想要引入的模块

13、Intl

Intl 对象提供了精确的字符串对比、数字格式化,和日期时间格式化等属性和方法

14、Web Animations

HTML版的动画实现，希望带来和CCS动画一样的强劲表现

15、Broadcast Channel API

可以让同一网站下的不同页面之间进行通信

16、Web Share API

用于将文本、链接、文件和其他内容共享到用户选择的任意共享目标中，这些共享目标通常包括系统剪贴板、电子邮件、联系人或消息应用程序，以及蓝牙或 Wi-Fi 通道。从属于navigator对象

三、最近新增的 JS 对象、方法、属性

1、Proxies

这个名字看起来很陌生，其实就是Proxy Object对象

2、Private Fields

通常指的是在一个类（Class）中使用#前缀来创建私有成员

3、Nullish Coalescing

空值合并操作符(??)，是一个逻辑操作符,当左侧的操作数为null或者undefined时,返回其右侧操作数,否则返回左侧操作数

4、Numeric Separators

ES2021新增的数字分隔符，它在数字中用下划线 (_)分隔数字，从而使长数字文字更具可读性。

5、Top Level await()

在顶层使用await，而不是只能在async内部使用。虽如此，但有一定的使用条件。

6、Array.prototype.at()

可以让我们更加方便的访问到 数组 和 字符串末尾的元素。

7、Object.hasOwn()

是Object的静态方法，主要目标是用来替代Object.prototype.hasOwnProperty()，如果是对象自己的属性，则返回true，否则返回false。

四、前端框架

1、Solid

长得像react，但是它的思路和react又不一样

2、Svelte

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理

3、Qwik

新时代的 SSR 框架破局者，挑战 Next、Remix、Nuxt 等的地位。

4、react 和生态工具

依然主流

5、vue3 和生态工具（pinia等）

依然在国内用得更多

6、preact

有与react一样的API，替代React的轻量级前端框架

7、ember.js

Ember.js是一个开源的JavaScript客户端框架，用于开发Web应用程序，并使用MVC（模型 - 视图 - 控制器）架构模式来构建跨设备的UI界面。该框架其实已经推出了好几年，只是在国内关注和使用的人相对而言不多

8、Lit

用于构建Web组件（web componen）

9、Tailwind CSS（一款CSS框架）

提供了很多诸如 flex, pt-4, text-center 和 rotate-90 这样的颗粒度的CSS class，用来构建出任何需要的样式，与bootstrap的构建UI界面是不一样的。PS：这个框架已经存在很多年

五、前端构建化工程化工具

1、vite

vue3的作者尤雨溪开发的下一代前端构建化工具。

2、esbuild

esbuild基于Golang开发的一款打包构建工具，相比传统的打包构建工具，主打性能优势，在构建速度上可以快 10~100 倍，vite也使用了esbuild

3、SWC

全称为Speed Web Compiler，其是基于Rust实现的工具，目前被很多前端知名项目（Next.js、Parcel和Deno）所使用，对标的工具就是Babel

4、Parcel

0配置的开箱即用的web构建工具，渐进式，可扩展。

5、Rollup

是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。vite也使用了它

6、tsc CLI

TypeScript的命令行工具。可以将TS编译为一个指定的JS文件。

7、Snowpack

目前已经不维护了，并推荐使用Vite

8、Turbopack

基于 Rust 的 Webpack 继任者，开发牵头人为webpack的创始人。不过目前表现得不愠不火

9、Rome

Facebook 推出的前端工具链，涵盖了编译、代码检测、格式化、打包、 测试框架等工具。它旨在成为处理JavaScript 源代码的综合性工具

六、前端测试工具

1、vitest

是一个单元测试框架，也可以用于组件测试，它由 Vue / Vite 团队成员开发和维护。在 Vite 的项目集成它会非常简单，而且速度非常快

2、Playwright

也是一个非常好的端到端测试解决方案，支持测试范围更广的浏览器品类（主要是 WebKit 型的浏览器）

3、jest

广受欢迎的单元测试框架

4、cypress

前端 E2E （端到端）测试工具，同时支持集成测试和单元测试，其具有信息丰富的图形界面、出色的调试性、内置断言和存根、抗剥落性、并行化和快照等诸多特性

5、storybook

严格意义上不算是测试工具，它其实是集成了UI组件、页面开发、测试、文档生成的前端套件。

6、mocha

一种单元测试框架，既可以在浏览器环境下运行，也可以在node.js环境下运行

7、Peeky

速度极快的单元测试运行器，它也是由 Vue 核心团队成员创建的，并提供了一个基于图形用户界面（GUI）的测试界面

七、移动端和客户端开发（多平台开发）

1、progressive web apps （PWA）

可以媲美原生移动端应用的web App

2、electron

可以认为是PWA的一种实现，能用web前端的方式开发桌面端软件。

3、react native

用react来开发移动端软件（可在应用市场上架），对于追求更接近原生APP的首选

4、expo

Expo 包含一组工具、库和服务，可以让你用 JavaScript 构建 Android 和 iOS 的原生应用。该开源项目主要是客户端软件，包括客户端 app、模块、应用等

5、Ionic

Ionic Framework 是一个移动 UI 工具包，用于构建高质量，跨平台的本机和 Web 应用程序体验。

6、flutter|uniapp

国内用得更多的即为flutter和uniapp

7、WebAssembly （WASM）

并非纯前端技术，WASM是一种高效的，低级别的编程语言。 它让我们能够使用JavaScript以外的语言（例如C，C ++，Rust或其他）编写程序，然后将其编译成WebAssembly，进而生成一个加载和执行速度非常快的Web应用程序，比如近期非常流行的运行在浏览器的设计软件figma就用了该项技术

八、SSR服务器端渲染框架

1、Next.js

可以结合react的SSR框架

2、Nuxt.js

可以结合vue的SSR框架

2、Remix

是一个全栈ssr框架，对标next，但和next有一些不同，它更快（和vite一样快），体验更好

3、Astro

作者还开发过SnowPack，是一个静态网页生成器，同时支持 SSR 服务端渲染

4、Gatsby

Gatsby 是一个基于 React 的免费、开源框架，用于帮助开发者构建运行速度极快的 网站 和 应用程序，它也是支持SSR和CSR（客户端渲染）的

5、Sveltekit

可以结合Svelte的SSR框架

九、项目管理

1、Monorepos（单一代码库）

在版本控制系统的单个代码库里包含了许多项目的代码。区分于multirepos（多代码库）

2、pnpm

单一代码库的管理工具，可以用于管理Monorepos

十、工具类库（包含npm 依赖包）

1、工具类

• Lodash|Lodash-es
• RxJS
• Zod
• Immer
• Underscore.js
• Ramda

2、日期管理

• Moment
• date-fns

3、数据可视化

• Chart.js
• D3
• Highcharts
• Echarts

4、Ajax

• axios
• Apollo Client
• fetch
• 手写 promise 库

5、后端框架（nodejs环境）

• Express
• Next
• Fastify
• Strapi
• Koa

6、npm 工具函数

• nvm
• Babel

7、JS 运行环境(让 JS 能脱离浏览器运行)

• nodejs
• Browser
• Service Workers

十一、JS 的扩展编程语言

1、TS

全称typescript，中高级前端必会

2、Elm

Elm是一种函数式语言，可编译为HTML、CSS和JavaScript。 Elm为函数式反应编程而设计，便于创建高可交互应用

3、CoffeeScript

它不是JS，可以通过编译器编译成对等的JS代码，有停止维护的趋势。相当于要学习一门新的小型语言，建议学TS。

4、Flow

Facebook团队开发的JS静态类型检测器。功能基本同TS

十二、需要熟悉的其他后端语言之一

1、Python

依然流行，但是当做web后端的不多

2、Java

更多用于中大型应用的后端语言

3、PHP

更多用于中小型应用的后端语言

4、Rust

由Mozilla主导开发的通用、编译型编程语言，设计目标之一，是要使设计大型的web应用的客户端和服务器的任务变得更容易，Rust 可以被编译成 WebAssembly，WebAssembly 是一种 JavaScript 的高效替代品

十三、高级前端需要关注的技能、趋势

1、前端框架、Rendering Frameworks、测试工具、移动端和客户端、构建等工具发展得非常迅速

2、原生开发越来越受欢迎。同时，2021 年发布的 Tauri 得到了 91.7% 开发者的支持

3、JavaScript 构建工具层出不穷。Parcel、tsc CLI、Rome、Snowpack、SWC、esbuild、Vite 等都是近两年新诞生的工具。不过在满意度上，新工具后来居上，Vite、esbuild、SWC 分别排在 Top 3 位置

4、尤雨溪2019 年发布的Vite 短短 3 年便有取代 webpack 之势， 摘得三项开发者最常用、最满意、关注度最高的桂冠（根据国外stateofjs.com 网站发布的 JS 调查报告）

5、对于开发者而言，JavaScript 最难的三个痛点分别是代码架构、管理依赖项、状态管理。

6、目前 JavaScript 最缺少的功能是：Static Typing、标准库、更好的 Data Management

7、微前端解决方案：乾坤

8、SSG（静态站点生成器）

9、docker在前端开发的应用

10、人工智能AI在web前端方面的应用

11、低代码平台

12、web3、元宇宙

13、物联网开发，比如webgis开发平台

回顾

如果2022年的前端技能还有缺失，赶紧通过这个来回顾吧：2022年中高级前端需要学习的25种前端技术栈。

后续我将会根据以上技术栈出一系列的使用教程，敬请关注。

以上由WEB前端全栈圈研究和整理，未授权禁止转载。

如果你对web前端开发、面试感兴趣的话可以加：imqdcnn。群里有各种学习资源发放，免费答疑，更有行业深潜多年的技术牛人分析讲解。

祝你能成为一名优秀的WEB前端开发工程师！