Web 前端开发的心路历程
最后更新于 2021-07-19 01:26:00
眼看着从事 Web 前端开发已然快三年了，是该想想自己在这块已经获得的东西，和以后的选择了。
Web 前端开发
2019 年末一场“新冠病毒战役”打乱了每个人的生活，至今两月有余整个社会依然还没有完全恢复正常秩序。这场突如其来的“黑天鹅”事件相信打乱了很多人的生活计划，尤其是工作计划。作为自己从毕业到现在已从事 Web 前端工作将近三年的人来说，是时候该思考下当下的自己工作和技术栈积累情况，以及未来该如何继续下去。
我的专业并非计算机软件编程相关，而是“微电子”半导体产业相关的，至于为什么会在毕业的时候从事软件开发，我相信自己到现在可能也说不清楚。可能在潜意识里，我比较喜欢软件相关的东西，而对硬件相关的不是很感兴趣。
至于为何会选择“Web 前端”这个领域呢？我觉得算是一种巧合吧，也许与毕业前一次和在计算机专业学习的朋友交谈有关。总之，我自己目前还是非常喜欢这个领域的东西的，尤其是这个领域的发展相当快，技术栈更新几乎以天（周）计算。我比较喜欢折腾，也喜欢新鲜的东西，很遗憾的是，到现在也没折腾出来个啥好东西。
市场趋势
Web 前端开发这个岗位的市场情况目前来说应该还算不错，缺人的高峰期在我毕业（2017）前一两年达到 鼎盛，于是出现了相当多的培训机构，这个岗位却又出现了“低端人才”过饱和的现象，当然现在市场还是缺乏“高端人才”的。
而且，据说目前一线公司所谓的前端都被称为“大前端”，不仅要会基本的前端开发技术三大件 HTML/CSS/JS，更要懂一些 Node.js 相关的东西，离全栈更近一些。根据自己的经验，其实一点都不过分，因为前端开发的方式在以前是相当随意和零散的，以至于连一套开箱即用的开发工具和工作流都没有，这几年大家忙活不过是建立起 Web 前端的工作流，用简单的话来说就是“工程化实践”。
虽然自己不是科班出身，但我自己还是一直了解计算机基础相关的东西，比如网络通信、操作系统等等。软件工程是个相当重要的概念，之所以会出现“码农”这样的名词，我想是因为大部分程序员都没有科班背景或者扎实的计算机基础知识，写的代码和软件产品不具有工程美学，架构烂的一塌糊涂。据说，软件架构中相当多的东西都借鉴自建筑学，不管是不是真的，架构师通常是个比较重要的存在（大部分中小型公司没有），软件项目拥有好的设计架构、好的工程化模型可以让项目本身具备高的可维护性、可迭代性等等。了解这些东西我相信对自己的技术实力也有很多的提升。
工程化实践
说到“工程化实践”，我也一直在积极探索，当然我并没有选择开箱即用的脚手架工具（例如 create-react-app），而是选择自己一步一步搭建。Web 前端的代码构建工具发展了好几代，主要存在 grunt、gulp、webpack这三种工具 ，当然目前（2020）是 webpack的天下，而且 5.0 版本即将到来。说到这些工具，使用的目的就是解放双手，能自动化的就自动化（比如文件合并、打包、压缩、图片优化、代码编译等等），所以我一开始就放弃了 grunt，转而使用配置更为简单的 gulp，基于任务模型配置的工具用起来确实简单方便，用了一个季度左右，开始使用 gulp+webpack的模式。至于原因，我觉得还是因为 gulp适合处理独立的单个文件，合并打包大量文件并不是它的强项，而且 webpack 的流行已出现了趋势，也算是顺应趋势吧。又过了半年的样子，我彻底放弃了 gulp，出于两个方面的原因：一是 gulp 的功能都可以被 webpack 替代，二是两个工具结合起来使用很不方便而且越搞越复杂。全面转向 webpack 之后确实相当方便，用起来也很顺手，而这之后不久 webpack几乎成了前端构建工具的第一选择，而且份额也在持续扩大，说起来自己还是押对了宝，而且也算半个尝鲜玩家（因为我是直接从 V4 版本开始用的，当时 V3 版本的还是主流，而且网络上 V4 版本的教程还很少）。当然，为了日后开发方便我还建立了一个 npm 项目，每次开发新的项目直接用该包就能构建开箱即用的工具套件，也算是完成了前端“工程化实践”。
说了这么多，前端的工程化实践其实只进行了大约三分之二，另外的三分之一则在服务器端。“大前端”概念的出现我想是业务驱动技术的结果，在移动互联网爆发的时间节点上，3G、4G 网络与业务日渐复杂的网站和 Web App 显 得格格不入，所以 Web 优化则成了一件非常重要的事情，这也是“用户体验至上”的理念驱使的结果。
优化不仅在客户端要做，也要在服务器端做，因为用户在访问你的应用和网站时的速度体验相当重要，影响了用户的去留抉择。于是 HTTP2、服务器端渲染、WebP 等等的技术不断出现，而前端工程师要做很大部分工作集中在“服务器端渲染”。说起来也是相当的有趣，在很多年以前 JSP、PHP、NET 等等 Web 开发技术栈中页面就是通过每次用户请求时后端应用实时渲染后生成的，其中区别就不在这里细说了。
其实，Web 前端工程师之所以会触及到服务器端，主要还是因为“前后端完全分离”的开发模式和应用部署模式驱使的。后端工程师不再接触前端页面上的业务逻辑，专注于核心业务的开发，与前端相关的所有业务全部交由前端工程师去做，这样效率高，也更具可操作性，毕竟前端离客户更近，需求频繁的变动触及的都是前端的工作量。说到前后端完全分离，业界采用的主流方案应该就是 Nginx 反向代理了，而我也将这一模式引入公司的开发流程中，解决了前后端跨域调试和同步开发的问题。
“框架”与“库”
目前前端开发有三大“库”（或者说“框架”）：React.js、Vue.js、Angular.js。本质上，前两者只能说是一个视图库，也就是 MVVM 中的 View 层；而 Angular.js 出自 Google 之手，是很多年前主流的 Web 开发利器，是一个非常重的框架，涵盖了很多概念，比如路由、组件、数据模型等等。从现在（2020 年）来看，React.js 占据了大部分市场份额，Vue.js 紧随其后，而 Angular.js 可能在逐步淡出开发者的视野。
为何前端开发需要借助这些“库”？我想有三方面原因：1. 客户端（浏览器、运行时）的兼容性问题这些库可以替开发者解决；2. 大部分性能问题也可以替开发者解决；3. “组件式开发” 是解决前端页面式开发存在诸多问题的利器。基于这些原因，开发者可以将更多的时间花费在解决业务问题上，而不是兼容性、性能问题上，“组件式开发”不仅解决了问题，还提高了代码的重用性。
至于如何选择，我觉得应该基于以下这些方面来考虑：1. 市场份额（社区活跃度、技术生态完整性）；2. 大型商业项目案例（我觉得很重要）；3. 上手难度；4. 技术方面的因素。其中，前三项我相信就把 Angular.js 淘汰了，虽然出自 Google 之手，但市场趋势不容乐观，而且上手难度异常高（了解下应该还是很有好处的）。剩下的两者中，React.js 也更具有优势，出自 Facebook 之手，有自家社交应用这种大型商业案例作为实践，而且社区异常活跃，技术生态完整性更占优势；而 Vue.js 也并非差劲，反而口碑也不错，国内外有不少人在用，而且开发者是一名中国人（居住美国），有提供中文文档，所以国内很多人因此（个人推测）选择了 Vue.js。作为我来说，我觉得中文文档是一个因素，但不是一个必要因素，我比较在意刚开始提到第四个方面因素，在技术上我有更多的考量，React.js 在我看来更符合软件工程化，虽然很多人觉得 Vue.js 保留了前端开发中倡导的“表现（CSS）-结构（HTML）相分离” 的模式，但我不是很同意，尤其是目前出现的 CSS-IN-JS 这种方案更加证明 React.js 这种模式更符合“组件化开发”，很优雅的解决了开发中存在的诸多问题。当然，我确实也选择了 React.js 技术栈，而且已经有将近两年的实践时间，尤其是去年底推出的 React-Hook 也用的相当满意。
自己的现状
如果要说前端开发相关的东西，我觉得还有很多，不过在这里捡几个自己觉得重要的思考一下，更多的还是在意自己目前的现状。用了两年的时间去一步一步搭建前端工作流，完成前端“工程化实践”，熟悉 React.js 技术栈这大概就能概括我两年的前端开发历程了。最近这半年时间里，我一直都比较在意自己在 Node.js 这方面的所熟悉的程度，而且也在积极接触学习。除过纯技术方面的，业务方面，我一直在做的都是 PC 端后台管理型应用，在移动互联网爆发的时间节点，没有更多的参与到移动端 Web App 的开发中也是一大遗憾和不足。