2023年中高级前端养成指南-需要关注和学习的13大类80余个前端技术栈与前端趋势-强烈建议收藏

以下是我(公号:imqdcn)研究整理的2023年中高级前端养成指南,收藏起来,从开工第一天起,立下全新的计划和目标,愿你在兔年大展宏兔,扬眉兔气。涉及到的内容有基础语言、浏览器 API、最近新增的 JS 对象、方法、属性、前端框架、前端构建化工程化工具、前端测试工具、移动端和客户端开发(多平台开发)、渲染框架(SSR服务器端)、项目管理、工具类库(包含npm 依赖包)、JS 的扩展编程语言、需要熟悉的其他后端语言、高级前端需要关注的技能、趋势

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

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

目录:
一、基础语言(前端开发三要素)
二、浏览器 API
三、最近新增的 JS 对象、方法、属性
四、前端框架
五、前端构建化工程化工具
六、前端测试工具
七、移动端和客户端开发(多平台开发)
八、渲染框架(SSR服务器端)
九、项目管理
十、工具类库(包含npm 依赖包)
十一、JS 的扩展编程语言
十二、需要熟悉的其他后端语言之一
十三、高级前端需要关注的技能、趋势

一、基础语言(前端语言三要素)

前端三要素

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

2、CSS

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

3、JSON

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

二、浏览器 API

browser-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 的一种实现,功能是可以拦截、处理请求,配合 CacheStorageapi,可以做到将资源存储到本地等,实现离线访问

12、动态 import

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

13、Intl

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

14、Web Animations

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

15、Broadcast Channel API

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

16、Web Share API

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

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

新增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

四、前端框架

Svelte

1、Solid

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

2、Svelte

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

3、Qwik

新时代的 SSR 框架破局者,挑战 NextRemixNuxt 等的地位。

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-centerrotate-90 这样的颗粒度的CSS class,用来构建出任何需要的样式,与bootstrap的构建UI界面是不一样的。PS:这个框架已经存在很多年

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

vite

1、vite

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

2、esbuild

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

3、SWC

全称为Speed Web Compiler,其是基于Rust实现的工具,目前被很多前端知名项目(Next.jsParcelDeno)所使用,对标的工具就是Babel

4、Parcel

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

5、Rollup

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

6、tsc CLI

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

7、Snowpack

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

8、Turbopack

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

9、Rome

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

六、前端测试工具

cypress

1、vitest

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

2、Playwright

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

3、jest

广受欢迎的单元测试框架

4、cypress

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

5、storybook

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

6、mocha

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

7、Peeky

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

七、移动端和客户端开发(多平台开发)

electron

1、progressive web apps (PWA)

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

2、electron

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

3、react native

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

4、expo

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

5、Ionic

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

6、flutter|uniapp

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

7、WebAssembly (WASM)

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

八、SSR服务器端渲染框架

nuxt-js

1、Next.js

可以结合reactSSR框架

2、Nuxt.js

可以结合vueSSR框架

2、Remix

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

3、Astro

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

4、Gatsby

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

5、Sveltekit

可以结合SvelteSSR框架

九、项目管理

monorepos

1、Monorepos(单一代码库)

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

2、pnpm

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

十、工具类库(包含npm 依赖包)

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 的扩展编程语言

typescript

1、TS

全称typescript,中高级前端必会

2、Elm

Elm是一种函数式语言,可编译为HTMLCSSJavaScriptElm为函数式反应编程而设计,便于创建高可交互应用

3、CoffeeScript

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

4、Flow

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

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

后端开发语言

1、Python

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

2、Java

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

3、PHP

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

4、Rust

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

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

web3

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

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

3、JavaScript 构建工具层出不穷。Parceltsc CLIRomeSnowpackSWCesbuildVite 等都是近两年新诞生的工具。不过在满意度上,新工具后来居上,ViteesbuildSWC 分别排在 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前端全栈圈公众号(imqdcn)研究和整理,未授权禁止转载。

除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 1,611
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top