前端有未来吗？听我娓娓道来！

心已赠人 2023-03-01 12:23 7阅读 0赞

最近一段时间，通过各种方式与同行们交流了「前端技术」与「前端工程师」的现状及未来发展的方向性问题，大家在一些方面有所共鸣。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
下面就来说说我的一些看法——

困惑

多多少少，有人曾经或正在困惑：「前端有未来吗？」

有此困惑的人，TA 可能是——

正在学习 web前端技术，就是纯粹的html、css和js，在用这几样做网页。练习的过程中发现，或者说突然想到：「现在微信小程序风行，在其与原生客户端应用的夹击下，前端有未来吗？」

一毕业就加入了看似门槛低、工资高的前端工程师行列，进入了一家业务型公司的业务部门。产品经理的需求不断，都已经排满接下来的一年了。做的东西，竟是些不太需要动脑子的，做得多了基本只是让自己变得更熟练。这个功能明天上线，那个需求下周五提测，每天都疲于奔命。

上班时总在想：「如果有时间的话，我一定要好好学学技术，提升下自己！」可真难得下班早了或到休息日了，却又想：「平时太辛苦了，还是看看动漫、电影，刷刷抖音、B 站鬼畜，玩玩游戏，解解压、放松下吧！」

周而复始，一年、两年过去了，团队还是那个团队，自己还是那个自己。跟两年前的自己相比，好像只是做需求更快了，因为手法、套路已经相当娴熟了。这时，不禁感慨道：「前端有未来吗？」

与上面的类似，也是一毕业就在业务部门，工作日每天为业务需求忙得焦头烂额。不同的是，自己是个喜欢折腾的人，有自己的技术理想，就算工作日再忙再累，也愿意额外投入一些时间和精力去做些自己想要做的技术产品，虽然是实验性质的。

为了验证自己的想法并检验自己的技术产品，拿到业务中是最好的方式，它们之间可以相互促进。于是会在做业务的同时推进团队的技术及工具更新，让开发效率提升上去。这样一来，不仅业务迭代变快了，自己也会有更多的时间去折腾，简直双赢啊！

一年过去了，用自己很多业余时间做的组件库、UI框架、命令行工具给团队及公司带来很多收益，但受环境及自身限制，能做的也基本止步于此。然而，自己还想继续折腾，还想做更多的东西，还想进一步提升研发效率，无奈道：「前端有未来吗？」  
这些人的困惑，归纳一下，无非就两个方面：前端技术有没有未来？前端职业有没有未来？

我目前是在职前端开发，如果你现在也想学习前端开发技术，
    在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，
    你都可以申请加入我的前端学习交流裙：：851 ：231 最：348。里面聚集了一些正在自学前端的
    初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程
    ，需要的话都可以自行来获取下载。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]  
解惑

回顾过去，html的出现，只是想让知识得以在世界范围内共享，而不只是攥在手里和与身边人分享；css也只是为了使文字排版好一些，能够像报刊、书籍一样容易阅读；而js的诞生，改变了这一切，使 web 发生了变革。

如果说只有html和css的「静态 web」的时代叫作「web 1.0」，那么js所拉开帷幕的「动态 web」的时代就是「web 2.0」。在此之前，可以说 web 前端没有交互，也没有「前端工程师」这个职业。

准确地说，拉开「web 2.0」时代帷幕的还有另外一只手——Java。要想让 web 真正变动态，真正有交互，必须是客户端、服务端两头同时抓起，不然数据怎么流动起来？

前端职业的诞生与变革

这带来了商机，扩展了销售和传播渠道，传统企业将交易从线下搬到了线上，把实体转为虚拟，并催生了一批服务这些企业的企业，以及服务服务这些企业的企业的企业。因此，以网页为载体所进行的业务越来越多，涵盖各行各业，千奇百怪，使页面的展现与交互越来越复杂。

业务逻辑变得复杂，给后端开发也带来了很大的挑战。起初他们还能自己写写js代码，html和css让设计师或所谓的「页面重构工程师」去写。但在这种情况下已经自顾不暇了，哪还有空去管前端？！「前端工程师」这个职业应运而生。

慢慢地，「页面重构工程师」退出历史舞台，他们要么转变为「前端工程师」，要么已经转行。在做 web 应用开发时，前端工程师和后端工程师成为标准搭配。

随着智能手机问世，移动互联网时代来临，又诞生了为不同智能手机开发客户端应用的职业，如：iOS 工程师、Android 工程师等。可将他们统称为「客户端工程师」。

他们的出现，对后端工程师没有任何影响，因为他们的工作不存在竞争关系，对前端工程师影响就大了。

为了抢占用户手机里的一点空间，很多具有互联网基因的企业都要拥有自己的客户端应用，招入大量客户端工程师。原本面向用户的功能，都改用客户端应用而不是 web 页面，前端工程师的工作基本只剩做做后台管理系统，前端工程师在公司中被边缘化，并渐渐被裁减。

就是在这一时期，前端工程师开始纷纷去接触 Node.js，想将自己往后端开发方向拓展一些边界，给自己增加点生存空间。可以说这是「前端工程师」这个职业出现以来的最低谷、最迷茫的时期了。

接着，企业头脑稍微冷静了一些，发现每次要做新的功能，都得开发 feature \* platform 遍，各种成本太高！就想着能不能有只开发一遍就能在不同客户端中运行，且体验不要太差的方式？这就又催生了混合开发、reactNative 等开发模式、工具与框架。

因为新生方式大部分是以前端技术为主，前端工程师迎来了翻身的机会，最终逆袭。客户端工程师在公司中被边缘化，并渐渐被裁减，最后剩余几个被并入「大前端团队」。

经过这一来一去，「前端工程师」这个职业如涅槃重生般焕发新春。那段「迷茫期」向后端拓展边界的摸索不是白做的，让自己能够摆正心态、端正思想——不要妄图用js去取代 Java，从企业、从业界的角度讲，你凭什么取代 Java？

之后，前端工程师就行走在「泛客户端」这条路线上，即使是用 Node.js在后端做点什么，也是为了达到让前端更好的目的，而不是试图去分后端开发领域的一块蛋糕。

中国互联网发展的这二十年左右时间，产品研发流程中所参与的角色，逐渐形成了产品经理、设计师、前端工程师、后端工程师、测试工程师、运维工程师等职业。

在一家上轨道的企业中，一般会有业务部门和平台部门，每类部门中都会有自己的产品经理、前端工程师和后端工程师，其他的就看公司了。业务部门就是直接支撑公司赖以生存的商业层面的业务需求的迭代，平台部门则是为业务部门的工作提供基础设施及技术支持。

长期以来，业务逻辑几乎都在后端，前端基本只是一些交互逻辑，这让后端开发无论是在基础设施还是思想体系上都更加完善。而在近些年，前端的业务逻辑越来越重，并且由于前端工程师的职业门槛低，很多人没受过专业训练，软件设计、建模等能力差，代码的健壮性、可维护性、可扩展性极差，造成了很多工程问题和架构问题。

这十来年，Grunt、Gulp、webpack、Backbone、Angular、react、vue等的出现，都是为了解决前端开发的工程问题与架构问题。前端这些年一直在「补课」，为了能扛住应接不暇的业务需求，为了能赶上后端的基础设施与思想体系上的成熟度。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]  
业务前端的困境与出路

业务部门的前端工程师，处在一个难以逃脱的怪圈之中——

大部分人想提升自身技术水平，却没时间和精力在工作时间「光明正大」地去研究技术，这在组织里是「政治不正确」的做法，必须要业务为先，要研究只能自己的非工作时间去下苦功夫。然而在非工作时间，因为人性或其他什么原因，自己又不会去研究技术，或者不够深入。

平常工作中在提效方面能做的顶多就是组件库和脚手架之类，一些应用、系统的架构设计工作，都被平台部门的人做了，直接用他们的东西就可以了。业务部门也基本不会让其下面的前端工程师去做整体架构方面的工作，因为不符合「价值观」，也就是「投资回报率」的问题。

大部分人在思想上存在一个误区——前端工程师不需要懂业务。认为自己的工作就应该是根据产品需求文档人工把设计图转化为页面，再与后端工程师把数据接口调通，保证自己没 bug 就行。

你看，就连自己都觉得自己在整个功能的迭代过程中充当「将产品需求文档与设计图转化为页面」的工具化角色，也就别怨别人把你当工具使了，可不就一个「有感情的工具人」咋的……如果前端工程师的价值如此，注定是被作为工具，作为资源呼来唤去。

前端工程师的这种行为，被称为「面向页面开发」；只会且整天围着框架、库团团转的，被叫作「面向框架编程」。

「面向页面开发」与「面向框架编程」的前端工程师会逐渐失去竞争力，他们的工作终将会被其他职业的人或者非人工方式取代。

为了留住饭碗，业务部门的前端工程师不应该继续这样下去。有两个大体的改变方向：

如果十分热爱技术，就是想先大大得提升并突破自己的技术水平瓶颈，那么就要去平台部门，这样才能得到很好的锻炼和提升；

如果更喜欢自己所做的业务所在的行业，那么就去补充业务领域知识，自己的技术水平咋样就不要那么关注，只需在大脑中知道业界内大概有哪些技术和方案，遇到了什么业务场景能解决问题，碰到了就拿来用。

也就是说，前者会建立并不断完善自己在软件开发方面的思想体系，修炼自己的编程哲学，探索更多的可能性；后者则成为某个业务领域的专家，运用工具和方案的能力会很强，但技术能力偏弱。

其实整体来看，无论是选择技术方向还是业务方向，会变得和后端工程师的思想及工作方式差不多了，前端工程师与后端工程师越来越同质化，只是解决的问题域不同。

以十年为跨度，业务部门中开发人员也许不再以「端」来进行分工，直接「领域工程师」或「产品工程师」一把搂！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]  
未来十年里能做些什么

总的来说，就是榨取前端技术的剩余价值。当前最迫切的，应该是这两个方向：

相当成熟、稳定的基础设施，让业务开发能够专注于业务；

足够强大、好用的低代码开发平台，给运营、产品赋能。

与此同时，可以探索 AI、IoT 等领域，并为下一个「十年」做准备。

总结

要清楚，在人类社会中，技术的存在是为了满足人们的需求，让生活更好；在企业中，技术的存在是为了服务于业务，帮企业赚钱。

前端开发，即「泛客户端」开发的本质是「解决人机交互这个领域的问题」，从业人员的关注点应该是「如何更好地解决人机交互问题」，而不是具体所采用的手段。要解决的问题是不会变的，但解决问题的手段是不断推陈出新的，这也就是为什么「面向页面开发」与「面向框架编程」的前端工程师终将会被淘汰的原因。

在入行时，就应该想清楚自己到底是要往技术方向发展还是往业务方向，这对自己的职业道路影响很大。如果是往业务方向，那么工作的业务领域就不能有大的变化，如上一家公司是做在线教育的，下一家就去做电商了；选择技术方向，也要考虑好自己所要深入研究的领域，搞基建就搞基建，搞智能就搞智能。

前端工程师在「泛客户端」这条路上还能走多久？我认为是不需要人机交互的那一天。

前端技术还能用多久？可能是不需要 web 页面的那一天？

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: /images/20230208/94488a706910477884ca9ee898e5d17e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200725112449795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200725112615797.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200725112631787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70