我理解的前端发展方向

这是我个人的理解的前端2022年，甚至以后的前端发展的方向。这里没有太多的干货的知识，不会告诉你说Javascript怎么写，也不会告诉某个页面需要怎么排版……那都是一些很基础的东西（但是并不能我的本篇文章和思考有多么的高大上），这些方向的了解可能会贯穿我们整个前端的职业生涯；也可能等你在前端这个行业中摸爬滚打了多年之后，你才在某个清晨恍然大悟，原来这么多年我都是个机器：把设计稿转换成页面，每天做着这样重复但是看似有意思的工作。而我就是其中的后者。

先简单的介绍一下为什么我会有这样的想法吧。

我的前端经历

我是2010年开始学的前端，其实那个时候也就是那个时候前端还不能算是前端，Html5 还未发布，我们用的浏览器也还是IE6到IE8，我们前端还是一个最底层的工作（确切来说叫切图仔）；那个时候CSS还是处于1.0到2.0时代（为了保证页面不乱，我们喜欢用table进行布局）；那个时候浏览器还不支持很多的类（不如说那个时候还没又JSON对象，要想将字符串专程对象，就得用eval）；那个时候我们用的工具还是网页三剑客（可能现在的很多的前端小伙伴都不清楚网页三剑客是什么东西，网页三剑客：Dreamweaver, Firework, Flash）……就是在这样的一个环境中，我开始接触了前端。从第一个input框开始，到一个百度页面，再到后来的后来，再到今天。我正儿八经开始做前端的工作是从2015年开始的。所以这中间经历的很多的前端方面的时代的变迁。

从接开始前端方面的工作开始，从最初的P2P，到游戏，再到最后的2B的SAAS行业；从最初的JQuery时代，到后来的angualr1，再到后来的angular，vue，react三足鼎立框架的改变；从最初的grunt，gulp到webpack再到snowpack和vite等打包工具的变迁。就在这几年的时间中发展迅速，但是不变的就是前端的主要使用的东西依旧是html，css，js。

个人前端发展方向

对于我的经验来说，我理解的前端个人的发展方向未来会有以下几个方向：

  • 深入理解业务，站在技术的角度能够提出更好的业务方面的改进，前端交互以及用户体验的发展（UED）
  • 偏向于服务端的前端开发，说白了就是基于NodeJs来实现前后端的统一开发
  • 偏向于工具类的开发，其实工具类就包含很多的东西了，比如说基于Node的rollup之类的，还有就是webpack，vite等相关的大包工具的开发
  • 偏向于跨平台方案的解决方案的设计和开发，比如说uniapp，taro，flutter，RN等等。
  • 基于浏览器的音视频功能的开发
  • 基于浏览器的图形图像类工具的开发，比如说在线PS，等等
  • 基于WebGL，和canvas的游戏仿真，虚拟现实的开发。

前后端全栈开发方向

随着NodeJs的发展，以及基于NodeJs的web服务端的框架的逐渐成熟，现在已经有很多企业都在使用NodeJs来作为服务端开发的解决方案了。这个时候的前端，其实就不仅仅是一个前端了，而是一个全栈开发工程师。我们前端会接触到很多做后端的同学，这样在跟他们沟通的过程中对与后端同学使用的技术以及开发的内容比较感兴趣，于是乎就开始学习部分后端的语言，比如说go，比如说Java，python等可以用来写服务的内容。渐渐的就逐步发展成为了一个全栈开发工程师。

那么对于一个全栈工程师来说，应该具备哪些方面的能力呢？

  • 至少了解一门后端语言（不限于NodeJs，Python，Java，Go，C#），并且了解该语言所对应的服务端的开发框架。毕竟流行的语言，都会对应的有一个良好的开发框架：Node的express和koa，Python的Django，Java的Spring，Go的Zero，C#的.Net Mvc等等。只要了解了这写东西，才能够让你在后端开发过程中游刃有余。
  • 数据库，缓存，消息队列等等。数据库是用来存储用户的数据的，常用的数据库有MySql，Sqlserver，postgreQL这些关系行数据库，还有一些非关系行的数据库，比如说No-SQL，Redis等等，对于web后端还需要了解一些优化的方案，比如说使用缓存memerycach，消息队列等等。
  • 网络及通信协议，网络方面的内容我相信这都应该是一些很基础的内容，尤其是针对一个web开发人员来说，了解网络协议等内容，是我们必不可少的东西，常见的http通信和sokcet等；除了这些还有可能会涉及到进程见通信，管道，Rpc等等。
  • 架构设计能力，这个能力其实对于全栈工程师是必不可少的东西，网站的设计如何，将直接会影响到用户的体验等等。
  • 服务器运维能力，开发好的内容，就需要部署到对应的服务器上，给别人用起来，这样才有价值。因此作为一个全栈，最起码的搭建服务器环境，做最基本的项目部署迭代工作还是很重要的。

工具类的开发

这里所要讲的工具类的开发涉及到很多个方面:

  • 我们开发过程中的打包工具webpack，rollup，vite等等，
  • 基于web的工具：vscode等
  • 基于web的CAD等相关的工具，比如说在线PS，figma
  • 在线办公工具，比如说，金山文档，draw.io等等
  • ……

由于web的轻量和随时随地以及跨平台，以及目前浏览器越来越强大，以至于这样的在线版的工具越来越多而且未来也会越来越多。在未来，很多桌面版的工具会被搬上浏览器，而对于前端来说，这些工具的开发过程中就涉及的都是功能也逐渐被前端化，因此，前端的在这些方面又可以进行大展拳脚了。

跨平台框架开发

说起夸平台开发，很多的前端开发者都能够讲出来一些，比如说cordova，ionic，react- native，weex，kotlin-native，flutter等跨平台的框架百花齐放。当然，对于目前，国内我们还有小程序，在用户体验方面，小程序有着天然的优势，另外，小程序能够提升用户的粘性，因此各大厂商都在拼命的发展自己的小程序业务，我们常见的小程序有：微信小程序、QQ小程序、支付宝小程序、淘宝小程序、百度智能小程序、今日头条小程序、抖音小程序、360小程序。当然，面对这么多的小程序平台，虽说有不少的相似的地方，但是同样存在着不小的差异。因此对于我们我们前端来说不应该是每来一个平台就为其开发一套，因此，有不少的结局方案，比如说uniapp，taro等，解决方案。

对于我们前端来说如果仅仅是学会使用这些框架和解决方案，来完成企业的业务，发展来发展去，到最后，依旧是一个体力活。而这些，也正如上面所讲到的那样，绝对不是我们做前端的终点。因此，我们要做的就是其深层次的东西的研究。就是研究其底层进行跨平台编译的原理和编译思想。这样所能够接触到的东西，以及这些东西所涉及的方面就会更加的深入。

在做这方面的研究过程中，能够接触到不同平台等网络，渲染，运行语言等方面的只是，还能够使我们更加深入的立即编程语言的魅力以及其编译和运行的整个过程；另外还会了解的到虚拟机，操作系统，计算机体系结构，网络等等多方面的底层的只是内容；另外对于渲染层面的内容，我们要了解的可不仅仅是浏览器的渲染原理（什么重排，重绘等等），更重要的是去实际思考我们的东西应该怎么去绘制，中间包含有计算机图形学，图像处理等多方面的内容……

因此如果在

音视频方向

近几年，国能的短视频，在线视频播放的不断的增长和拓张；2020 年疫情爆发，直接促使了会议、教育等线上视频产品的飞速成长；2021年1月26号WebRTC也正式的进入到了W3C的标准中，一时间基于Web的音视频开发也被推到了风尖浪口。

未来基于Web的音视频开发，绝对会成为稀缺，可能现在的很多人都觉得基于Web的音视频开发，无非就是html5的video和audio的标签么？其实基于Web的音视频开发（WebRTC）主要有两个方面：

一个是音视频的播放方面

  • 支持对流式视频和音频的解码和显示
  • 能够从网络摄像头中捕获视频和音频流
  • 对呼叫的协调协议（如信号处理）
  • 高效的音频和视频的编码及解码器
  • 处理回波消除、噪声抑制、比特率适应（根据带宽自适应的流）等诸多方面的算法。

一个是网络传输方面

WebRTC通信方面的内部构造主要包含有下面的内容：

  • 点对点通信
  • 防火墙和 NAT 穿透
  • 信令，会话及协议
  • WebRTC 接口

这中间的每一个模块都够折腾很久了。然而这也仅仅只是一小部分的内容，未来WebRTC可能会涉及到的领域很多，比如说实时监控，网络云游戏，以及云电脑等等。但是在前端这块，其实基于浏览器去做音视频方面的内容的开发，还是面临和很大的挑战的。因子未来前端同学如果感兴趣的话，可以在音视频方面进行较深入的研究。

数据可视化方向

有人说数据可视化不就是图表么，不就是调用echarts等图表插件把数据从冰冷的数字转换成图形，顶多就是色彩丰富一些，做一些特效什么的，看起来更酷炫，逼格满满，写老板在写PPT的时候显得更好看一些。

其实不然，一个好的可视化，能够带给人们不仅仅是视觉上的冲击，还能够揭示蕴含在数据中的规律和道理。常见的数据可视化的使用场景有以下几点：

  • 工业数字化中台，监控台，园区设备等场景
  • 智能家居的进一步发展，3D云看房，远程操控台等场景
  • NoCode下的3D模型，拖拽式的仓储管理系统等场景
  • 智能机器人，Iot物联网场景
  • AR，VR、元宇宙.....

可见我们数据可视化未来的发展以及使用的场景该是有多么的有前途。

游戏方向

从最早的flash页游，到现在，前端推出了Canvas以及WebGL，以及目前前段游戏引擎的不断的崛起：Egret、laya、pixi、three.js，通信协议有websocket和http等等，而且再加上现在的浏览器基本上都开始不断的放弃flash，因此，基于H5的游戏，也越来越流行了。而且现在很多的平台也都开始在搞游戏化的宣传，视图通过游戏来增加大家的用户粘性：比如说支付宝的，蚂蚁森林，蚂蚁庄园等等，甚至还有一些会通过一些小游戏来进行做一些宣传。

不仅仅如此，就连元宇宙其实也是很游戏有关的，当游戏遇上了VR遇上了AR在遇上了Web，我相信这些东西所能够带来更多的新颖的东西。曾经我们在晚上卖东西或者是卖东西，都是渐渐的跟这些东西的进行了结合。

前端的技术研究方向

对于很多的有理想，有抱负的前端开发人员来说，为了支撑这些技术的发展方向，我们需要在哪些技术方面进行提升自己呢。我大致总结了以下几个方面：

  • 计算机图形学
  • 图形图像和音视频
  • 计算机网络
  • WebAssembly

当然这些内容其实看起来更多的是跳出了我们平时经常接触的前端的三大主流内容，但是这些才是我们身为一个手艺人才应该将更多的精力投入进去，来充实自己，让自己具备有更多的战斗力，让我们能够在前端这条路上面走的更远。

小结

未来的浏览器会越来越强大，而前端的在整个技术领域中的划分，也将变得越来越重要，而我们身为前端开发人员，要与时俱进，不断的提升自己，来让自己具备更强的市场竞争力，以及用我们自身的技术手艺来带来更加巨大的社会价值。我也希望，更多前端小伙伴不再拥有35岁的焦虑。