前端开发都需要掌握那些技术？

前端技术多且杂，那么作为前端开发者，我们可以从那些方面进行进阶提升呢？本文从以下几个方面进行了整理归纳

内容如下：

• 一.网页开发
• 二.小程序
• 三.移动端
• 四.桌面端
• 五.其他技术

一.网页开发

这里指PC端网页开发，要求的技术主要有以下几类：

1.Vue、React 和 Angular

作为 MVVM 前端框架的三大巨头，在招聘信息中，基本都要求熟练掌握其中一种框架，并了解其原理。它们各自有各自的优点，Vue 使用便捷简单，React 编码更加灵活，Angular 则注重包容性。就流行程度而言，Vue 和 React 在国内更加受欢迎，所以我们在学习的时候可以优先选择这两个。

2.jQuery

曾经前端界的扛把子，那时前端还没得这么多五花八门的技术和框架，基本只要熟练掌握了 jQuery 就完全能找到工作了。这些年虽然一直在唱衰它，但现在仍然能在很多 C端产品上看到它的身影。

3.响应式开发

很多公司的门户网站基本会用到这个技术，这样可以节约成本。这项技术一般适用于简单网页，复杂网页做响应式比较困难，而且体验也不是很好。相关框架 BootStrap等。

二.小程序

小程序这块一般指微信小程序，当然还有支付宝、百度、头条和QQ等一系列小程序。下面我们就微信小程序为主，讲讲都有哪些开发方式。

1.微信小程序原生开发

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ 

在微信小程序早期的时候，有许多问题：没有自定义组件、UI控制自由度不高、ES6支持度不高、开发工具不好用等系列问题，这也是导致第三方框架层出不穷的原因之一。当然，经过这些年发展，很多问题已得到解决。所以，如果没有多端的要求，完全可以采用原生开发的形式。

2.uni-app

官方文档：uni-app官网

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

3.Taro

官方文档：Taro 介绍 | Taro 文档

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等）运行的代码。

4.其他

其他的小程序开发框架我觉得都没得太大的优势，以前比较流行的框架比如 mpvue 。

5.云开发

开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。
云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

据说云开发在未来很有潜力，有兴趣的不妨去了解了解。

三.移动端

包含 Web App、Android App 和 IOS App。开发方式有以下两种。

1.Native App

即原生APP开发模式，利用iOS、Android开发平台官方提供的开发工具进行APP的开发。

2.Hybrid App

Hybrid App（混合模式移动应用）是指介于 web-app、native-app 这两者之间的 app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。 

主流开发框架有：

1）.RN（React Native）

官方文档：React Native 中文网 · 使用React来编写原生应用的框架

React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。

React Native产出的并不是“网页应用”， 或者说“HTML5应用”，又或者“混合应用”。 最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。

与之对应的框架 Weex，支持 Vue.js 。这里没有单独列出来，因为它已经内置到 uni-app 中了。

2）.Flutter

官方文档：Flutter中文网

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

当然，前面提到的 uni-app、Taro 也可用来开发 App，除此之外还有 Weex 等框架...

这里再推荐一篇 RN、Flutter 和 uni-app 之间的比较的文章：flutter、rn、uni-app比较 - DCloud问答

四.桌面端

桌面端开发框架也非常多，就前端而言，这里推荐下面这个框架

1.Electron

官方文档：Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

这里再推荐一个 Tauri 框架ya，不过这个框架相对而言学习成本要高不少，需要去学习 Rust 语言相关的知识。

五.其他技术

1.TypeScript

官方文档：TypeScript中文网 · TypeScript——JavaScript的超集

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

现在有很多公司都要求开发者掌握 TypeScript。

2.前端工程化

作为前端工程师，我们需要具备工程化思想，并掌握相关框架的使用，如：Webpack、Vite、Gulp、Grunt 等。

3.算法，设计模式

一般大些的公司都要求我们掌握一些常用的算法和设计模式。 

4.网络、安全

http、跨域、CSRF（跨站请求伪造）、XSS（跨域脚本攻击）等。

5.Node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。最近 Node.js 的作者又出了一个和 node 相似的 deno => De（Destroy）no(Node)，可简单的理解为 node 的升级版，以解决 node 中存在的难以解决的问题。

6.数据可视化

相关技术和框架：SVG、Canvas、WebGL；Echarts（可视化图表库）、Three.js（主流 3D 绘图 JS 引擎）、Cesium（跨平台、跨浏览器的展示三维地球和地图的 JS 库）等。

一些第三方的数据大屏：阿里云-DataV、腾讯云图

7.微前端

早期实现微前端是通过 iframe，但 iframe 更适合静态、纯展示类的页面，对于交互性强的应用并不适合。

微前端的好处在于各个微应用之间彼此独立（独立开发、独立部署、技术栈无关）。

复杂的中后台应用中，适合采用微前端进行开发，以避免后期项目难以维护。

常用微前端框架：

qiankun

single-spa

wujie

8.PWA

PWA 全称 Progressive Web App，即渐进式 WEB 应用。

优点：

• 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
• 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
• 实现了消息推送

讲讲PWA

有哪些使用 PWA 的 app ？

9.前端自动化测试

常用框架：Jest

一些相关专业名词：

- TDD，Test Driven Development 测试驱动开发

- BDD，Behavior Driven Development 行为驱动开发

常见组合：

- Vue + Vue-test-utils

- React + Enzyme

10.更多

这里就不在继续往下写了，因为太多了，比如：游戏、视频、直播、图形处理等方面，还有 AR（增强现实）、VR（虚拟现实）等。