2021年的今天，如何成为一名专业的前端工程师？

蔚落 2022-11-17 05:11 330阅读 0赞

简介： 如果你想成为一名专业的前端工程师，那么你需要了解要学什么，学到什么程度，以及如何有效的学习。大学里没有正规的前端技术课程，普遍缺少比较权威的渠道来系统地了解和学习当前最实用、最前沿的前端技术。作为一个入行许久的前端工程师，我提炼了4个大家普遍关心的话题一一探讨，希望对想要成为专业前端工程师的同学们有所帮助。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70]  
如果你想成为一名专业的前端工程师，那么你需要了解要学什么，学到什么程度，以及如何有效的学习。大学里没有正规的前端技术课程，普遍缺少比较权威的渠道来系统地了解和学习当前最实用、最前沿的前端技术。作为一个入行许久的前端工程师，我提炼了4个大家普遍关心的话题一一探讨，希望对想要成为专业前端工程师的同学们有所帮助：

从事前端开发有前途吗？

毕业之后去大公司，还是去“小而美”的公司？

个人很喜欢前端开发，掌握到什么程度才能进“大厂”？

个人有一些前端开发经验，怎么提高自己？

一 、**前端开发的现况和前景**

回顾编程语言的发展史，我们可以看到很多曾经流行一时的编程语言都消亡了，或者在慢慢淡出。同时，2009年以后又有一批新兴语言涌现。我们注意到一些历史悠久的语言生命力特别顽强，像C / C++、Java。90年初大众互联网诞生，Web技术此时开始兴起，Python / PHP / Java都是这个时期出现的。其中HTML / JavaScript / CSS也在那个时代相继诞生。语言的兴衰和当时的时代背景紧密相关。前端技术经历了近三十年时代变迁，JavaScript依然是世界上最流行的语言，JavaScript开源社区也是最活跃的，我们可以看到Github Top20的项目里，多一半都是前端项目。今天的前端技术似乎是无所不能，无孔不入的，在各个领域都有应用的可能性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 1]  
前端行业的发展实际上跟互联网的发展和时代的需要是密不可分的。通过下图可以看到有三个明显的转折点：

第一个转折点是在2004年左右，2004年Gmail发布，这个产品意义非凡，Gmail可以说是最早的单页应用，大规模应用Ajax这项技术，在浏览器里能够实现和桌面软件一样的交互体验，这在当时掀起了一场交互体验的革命。这是一次真正意义的突变（在此之前，我们经常说前端开发80%是排版问题，今天80%是工程开发问题），由此，JavaScript开始快速发展起来。正如Atwood定律所言“任何能用JavaScript实现的应用，最终都会用JavaScript实现”。

第二个转折点在2010年左右，Node的出现没有颠覆服务端开发方式，但是彻底升级了前端的工具链，从此前端的工程化体系开始了日新月异的发展。随之NPM提供的开源包管理服务，激活了全球前端社区的活跃度。

到了2013年左右，移动时代来临，商业战场转向移动端。传统前端开发不得不说进入低谷。但是很快，第三次转折来了，服务和产品的互联互通，跟原生应用的封闭性是矛盾的。于是，衍生出各种混合开发方案，各种跨端技术。同时小程序的出现，为前端开辟出一块新战场，前端开发再次焕发活力。到了2017年左右，云时代正式拉来帷幕，生产和办公方式加速数字化转型，toB业务开始火了，传统的前端技术又成为不二之选。因此，我们可以看到现在的人才市场对前端工程师的需求非常大，但是，资深前端人才一直都是稀缺资源。

> 学习是一个艰苦的过程，当然如果能把技术学成，最后也一定可以获得高薪工作。掌握一个好的学习方法，跟对一个学习的人非常重要。今后要是大家有啥问题，可以随时来问我，能帮助别人学习解决问题，对于自己也是一个提升的过程。自己整理了一份最全面前端学习资料，从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理这是我的前端技术交流Q un++++++++++++++  
> 钱面是603----  
> 中间是985----  
> 后面是993----++++++++++++++  
> 有问题随时在里面问我，能给大家提出很多宝贵建议。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 2]  
二、 前景：前端技术的价值  
技术的价值决定了它的生命力。前端技术的价值就是“界面”的价值，我相信所有“界面”最终都会用前端技术实现。连接消费者和互联网的，是数字化生活的“界面”，连接生产者（企业、机构、自媒体）到互联网的，是数字化生产方式的“界面”。今天大家也能感受到，这些“界面”变得越来越多元化、智能化、而且无所不在。  
![在这里插入图片描述][2021040815441837.png]  
举个例子，我们看60年代开始，火箭的控制台都是物理界面，到最新的“龙飞船”的控制台完全以数字化为主体的界面，据披露这个界面就是用JavaScript开发的。我相信，未来所有物理界面都会进化为数字化界面。  
![在这里插入图片描述][20210408154445888.png]  
前端开发简单的说是实现产品的表现和交互。今天不同类型的产品的表现形式和交互形式非常丰富，早已不是单一的图文、视频和一些鼠标键盘的交互操作。在业务类型上，有toC、toB，toG，面向的客群不同，前端技术应用的方式方法有很大差异。会不会有人担心前端行业存在近30年了，会不会丧失创新性，出现内卷？综上所述，显然不会。未来已至，需要更多“后浪”进入到这个行业，这个行业需要更多的创新力。

总结一下，前端的发展趋势正在从“单端向多端发展”、“界面正在从GUI向NUI演进”，VR / AR、数字孪生等相关技术越来越成熟，这些在阿里的业务里都有落地。开发方式上也正在从传统的B/S模式，向云+端的云原生模式发展。同学们目前正处在这样一个全新的、充满创新活力的时代。  
\*\*![加粗样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 3]  
\*\*  
三 、职业选择

第二个问题是关于职业选择的问题。如果选了前端工程师，每个人都会关心专业成长的问题。个人成长离不开环境因素。去“大厂”、“小而美”的公司，还是去创业，我的建议是：如果心怀明确的梦想就去“小而美”的公司或者去创业，如果想成为一名专业的技术人就要去大公司。我个人建议人生之路很长，不要那么早就到达终态。刚毕业，先去公司好好历炼一番，再出来创业。所谓的“专业性”，我们会看重这些方面：

解决的问题域要广泛：有丰富的业务场景的实践经验，解决问题的广泛性。

足够大的难度和挑战：好比“修车”和“修飞机”，同一套技术栈，应用的深度，项目规模的大小，玩法和挑战都非常不一样。

大军团作战的经验：好比“游击队”和“正规军”，在战略战术的认知上、管理规划、专业角色协同、开发流程、平台思路、综合能力上能带来丰富的感受和经验。

专业的开发素养和特质：小公司要求做完，大公司要求做好。高标准严要求下，有利于形成专业的开发素养。

具备先天的研发储备：打持久战，就必须投人投时间自研核心能力、技术储备丰富。

“这个我会”、“那个我也懂”是远远不够的，前端工程师的成长需要一定时间跨度的经验积淀。正如Bob Dylan的一句歌词：“How many roads must a man walk down，Before you call him a man”，翻译过来就是：一个前端工程师要踩过多少坑，才能称的上是一个专业的前端工程师。

四、 前端工程师的人才画像

第三个问题，掌握到什么程度才能进大厂？大厂对前端工程师的需求量很大，但校招通过率实际上并不高，市场供需明显不对等。

目前现状是所有人都是从自学开始，个人学的和公司需要的存在一定差距。学习上不够系统，平时看看书，逛逛社区、随机看一些文章，很容易被误导。有一些实习经验，但接触的比较有限，不清楚跟专业要求有什么差距。这样带来的问题是：大家普遍是碎片式的学习，不成体系，对前端技术的全景、发展趋势不是很清楚。在阿里我们经常说“体感”，体感就是有切身的感受和理解，唯有做过，反复做，踩过很多坑，才可能建立这种体感 。前端发展很快，很多知识过时的也很快。所以，不能停留在表面的用法上。前端技术有变化快的部分，也有相对稳定的部分，所以，前端技术的学习方式应该是多线程的、多维度的，这个后面会讲到。

如图所示，我们对前端候选人主要看三个变量：基础程度（基础怎么样）、认知程度（认知是否全面、是否到位）、实践程度（实际用过什么、做过什么）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 4]  
基础方面：首先就是HTML / CSS / JavaScript / Web API要系统的学，要看好书（评价高的书，这里列了两本），要养成看权威文档（MDN、官方文档）的习惯。辅助看一些文章。

认知方面：要有全景的了解（先有总体认知，知道关注什么、关注技术的发展趋势）、各种领域知识不要求多深，但要有准确的理解。我建议大家多关注开源项目，主流的框架和流行的库。关注的方式就是订阅它们的更新，多看它们的源码，在Github上围观别人的讨论，能参与当然更好。个人知识结构要丰富，网络、算法、产品、设计、可视化、工具 / 插件等等都要有所了解，人的视野在哪儿边界就在哪儿。培养自己总结、归纳的习惯，平时应该多写写，总结就是一种把知识结构化的过程。

实践方面：像实习项目、学校的项目、学习过程中多写demo、最好有一些个人项目，总之要寻找各种动手实践的机会。

另一个维度是潜质方面，或者说个人特质。我们非常看重候选人的潜质。遇到问题能否追根溯源，刨根问底，探求问题的本质。对新 / 奇 / 特的事物，是否有足够的好奇心和求知欲，愿意去尝试，尤其对产品设计有自己的审美和品味。前端工程师的价值就在于“创造”，是否愿意动手实践，用代码还原你的想法，这一特质非常重要。面试聊的很好，一笔试就懵了，写不出来，这个肯定不行。在校招中，我们其实更看重人的潜质，能力方面更看重基础。

五、 多线程学习路径

我们看看第四个问题，如何持续提高个人的技术水平？在校招面试中，我发现大部分同学都零零散散的学了一些前端技术，也能做出一些东西，问题是止步不前了，不知道如何深入地学下去。公司和学校不同，学校是学习的地方，公司是工作的地方。我们希望同学们在进入公司之前，就能建立好的学习习惯和有效的学习方法，这样，进到一个工作环境中，利用具体的业务场景，才能够快速的成长起来。

前端技术的学习有两条路径：一个是“多线程”的学习路径，一个是深入学习的路径。什么是“多线程”的学习路径？  
![在这里插入图片描述][20210408154834107.png]  
第一个线程，是基础知识的学习。这个是学习其它技术的基础。基础知识需要系统的学，基础包括JavaScript / HTML / CSS / 原生 Web API的学习。学过之后还不能直接做项目，你还需要掌握一些框架和工具才能解决问题，但如果要更好的解决问题、组合方案、调试问题，就必须对语言和语言特性有深入的理解。

第二个线程，领域知识的学习。前面也说过，要不断丰富自己的知识结构。特定的岗位需要特定的领域知识。会有一些通用性的知识，像软件工程 / 数据 & 算法 / 网络 / 可视化 / 安全 / 交互设计，这些知识和理论不要求有多深的学习，但要有一定的认知。

第三个线程，工程实践经验。重点是使用的经验。像开发工具 / 包管理 / 构建工具 / 主流的框架和库 / 代码版本管理 / 调试和测试相关工具等等，这些工具层面的东西，虽然比较多，很多达到会用的程度就可以。前端工具有“喜新厌旧”的特点，变化很快，要不断吸收最新的东西。所谓“善假于物”，善于使用开源的库和工具，能够帮助我们快速的解决问题。但是，如果不了解背后的原理、技术点，仅仅停留在会用的层面，只能是生搬硬套，很难有进一步提高。很多人说前端发展太快了，刚学会一个东西，过两年就被淘汰了，说的其实就是工具层面的东西，越基础的东西相对越稳定，也就越值得投入精力去学。工程方面，像React这种基础库相对稳定，值得深入的去学，后面我会讲怎么深入去学。实际上，任何新东西都有其发展的脉络，如果你具备一定基础，了解背后的原理，你不仅能很快掌握它，还能完善它。

要成为一名专业的前端工程师，需要多线程、多维度的学习，包括工作之后，仍然需要持续去学习。对同学们起步来说，基础要牢固，工程方面有一定的使用经验，知识结构要尽可能广泛和丰富。

六 、深度学习路径

刚才说的是横向上的，我们再看看纵向上如何深入的学习。深入就是从Know What到Know How再到Know Why的过程。对应到下面的链路上，Know What就是“听过”、“概念清晰”，并且“知不同”。Know How就是“用过”、“理解用法”、“踩过坑”（没踩坑的，基本上用的很浅）。Know Why就是“理解原理”、“演绎”，就是达到灵活运用的程度。

对于同学们来说，前面提到的三个维度：

基础知识：要到“理解原理”的程度

工程实践：尤其是前端主框架的学习，至少要到“理解用法”的程度

领域知识：要到“概念清晰”的程度  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 5]  
我们以React为例：

“听过”是指我知道它是什么，一个UI开发的库。概念清晰，我知道它的所有相关概念，它是一个声明式的、基于组件架构的、可预测的、响应式的UI库。那么什么是声明式、什么是组件架构，什么是响应式，都需要知道。组件状态是什么，响应式编程是什么，VDOM、JSX分别是什么，这些都是它的相关概念，顺藤摸瓜，一路要摸下去。

“用过”指有没有做过一些比较复杂的、有挑战性的项目，整个React技术栈里，用过哪些东西。理解用法，比如理解组件化的特点、组合方式、属性传递的各种方式、类组件和函数组件的区别，为什么现在提倡用函数组件、受控和非受控组件用在什么场景下等等。“踩坑”，踩的坑越多，说明用的越深，比如版本差异的问题、re-render的性能问题、Hooks依赖的问题，有没有真实的体感。理解原理，比如说是否理解Hooks的运行机制、是否理解React的并发模式、是否理解虚拟DOM的基本原理、React协调器的基本原理等等。

七、 有效学习的方式

前面说的是学什么，以及要学到什么程度。接下来我们说说有效学习的方式。有效学习一定是在动手过程中学习，所有知识我都懂，但不一定能很好地解决问题（和人生一样）。解决问题的能力是一种综合能力，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 6]  
解决问题是一个闭环。当我们真正面对需求，面对问题时，我们要培养自己分析问题的能力，找到背后的需求点、技术点，再去调研方案，否则你都不知道搜什么。探索方案的过程建议多写demo，把复合的问题拆成单一的点一一攻破（微积分的思路）。然后才是正式的编码，解决问题。问题解决之后，还要归纳总结，这样才能把实践变成有效的经验。最后还没完，还要继续探索最优解，有没有更好的方案、代码怎么写可维护性更高、怎么写扩展更灵活。探索最优解相当于健身中，达到极限阈值时，突破的那一下。

我经常听到一些抱怨的声音，“没有好的实践机会”、“工作中没有接触过”、“现在的工作没挑战，学不到东西”…….这些都是借囗，解决问题正是从善于发现和定义问题开始，平时当我们学习一个技术点时，应该先学会给自己出题，这就是定义问题。问题搞的越通透，解法越简单明了。提高自己首先是提高自我要求，不满足于现状，从追求代码质量开始，到追求最优解。

最后我们小结一下今天的分享。首先我们谈到了“选择”，讲了前端技术的发展历程和一些展望，前端行业的未来非常值得期待。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70]: /images/20221022/5622fc3dc65941e7bdb75c69bbecb064.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 1]: /images/20221022/d3372f6040eb43d9a8155d6d9e810509.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 2]: /images/20221022/62bf39332ce746ecb9e7c51efb25fb80.png
[2021040815441837.png]: /images/20221022/38f11fa79d78440db883441b85af1618.png
[20210408154445888.png]: /images/20221022/9b810b8003ed4f03beaad117538a5e81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 3]: /images/20221022/02fd9164df6f4366b9038beee4efc925.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 4]: /images/20221022/0215fd1ce761499d9631e70b2c7ca8a7.png
[20210408154834107.png]: /images/20221022/4632f49dc36e4f1e88658fe8abf3df84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 5]: /images/20221022/6bf921a17b8f4890a9b40dc57ac3cc85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 6]: /images/20221022/11f26678cee94b768a94b1b0cf3bcfee.png