如果你想成为一名专业的前台工程师，那么你需要了解学习什么，学习到什么程度，以及如何有效地学习。 大学里没有正规的前端技术课程，普遍缺乏权威渠道来系统了解和学习目前最实用、最前沿的前端技术。 作为一个入行已久的前端工程师，我提炼了四个大家普遍关心的话题，逐一讨论，希望对想成为专业前端工程师的同学有所帮助:前端开发有前途吗？毕业后是去大公司还是去“小而美”的公司？个人很喜欢前台开发。掌握到什么程度才能进“大厂”？我有少量的前台开发经验。我该如何提升自己？回顾编程语言的历史，可以看到很多曾经流行的编程语言已经消亡，或者说其他的正在慢慢淡出。 与此同时，在2009年之后，出现了一些新的语言。 我们注意到少数历史悠久的语言特别顽强，比如C/C++和Java。 90年代初，大众互联网诞生，Web技术开始兴起。Python/PHP/Java都出现在这个时期。 其中HTML/JavaScript/CSS就是在那个时代诞生的。 语言的兴衰与当时的时代背景密切相关。 前端技术经历了近三十年的变化。JavaScript仍然是世界上最流行的语言，JavaScript开源社区也是最活跃的。我们可以看到Github Top20项目中有一半以上是前端项目。 如今的前台技术似乎无所不能，无孔不入，在各个领域都有应用的可能。 事实上，前台的发展与互联网的发展和时代的需求密切相关。 从下图可以看出，有三个显著的转折点:第一个转折点是2004年左右，Gmail发布。这个产品意义重大。Gmail可以说是最早的单页面应用，Ajax技术的广泛应用，在浏览器中实现了和桌面软件一样的交互体验，在当时掀起了一场交互体验的革命。 这是真正的突变(在此之前我们常说前台开发80%是排版问题，今天80%是工程开发问题)。于是，JavaScript开始快速发展。 正如阿特伍德定律所说，“任何可以用JavaScript实现的应用，最终都会用JavaScript实现” 第二个转折点是2010年左右。Node的出现并没有颠覆服务器端的开发方式，而是彻底更新了前台的工具链。从此，前台的工程系统开始日新月异的发展。 随着NPM提供的开源包管理服务，全球前端社区的活动被激活了。 到2013年左右，移动时代来临，商业战场转向手机。 传统的前台发展不得不说进入了一个低谷。 但是很快，第三个转折点来了。服务和产品的互联与本地应用的封闭性相矛盾。 从而衍生出各种混合开发方案和跨端技术。 与此同时，小程序的出现为前台开辟了新的战场，前台的发展再次充满活力。 2017年前后，云时代正式落下帷幕，生产和办公方式数字化转型加速，toB业务开始火起来，传统前端技术成为不二之选。 所以我们可以看到，目前的人才市场对前端工程师的需求很大，但高级前端人才永远是稀缺资源。 前景:前端技术的价值决定了它的生命力。 前台技术的价值就是“界面”的价值，我相信所有的“界面”最终都会被前台技术实现。 连接消费者和互联网的是数字生活的“接口”，连接生产者(企业、机构、自媒体)和互联网的是数字生产方式的“接口”。 今天，你也能感受到这些“界面”正变得更加多样化、智能化和无处不在。 比如从上世纪60年代开始，火箭的控制台就是物理接口，最新的“龙船”的控制台是完全数字化的接口。据透露，这个界面是用JavaScript开发的。 我相信未来所有的物理接口都会进化成数字接口。 前台开发简单来说就是实现产品的体现和交互。 今天，不同类型的产品有着丰富的表现形式和交互方式，不再是单一的图形、视频和几个鼠标键盘的交互操作。 业务类型上，有toC、toB、toG，客户群体不同，前端技术应用的方式方法也不同。 有人担心，前台行业存在了近30年，会不会失去创新性？综上所述，显然不是。 未来需要更多新人进入这个行业，这个行业需要更多创新。 综上所述，前台的发展趋势是从单端到多端发展，界面从GUI向NUI演进，VR/AR、数字孪生等相关技术越来越成熟，这些都已经在阿里的业务中落地。 开发模式也在从传统的B/S模式向云+端云原生模式发展。 学生现在正处于这样一个崭新的创新时代。 第二个关于职业选择的问题，关于职业选择。 每个人都会关心职业成长，个人成长离不开环境因素。 去“大厂”、“小而美”的公司，还是创业？我的建议是:如果你有明确的梦想，去“小而美”的公司或创业者那里创业；想成为专业技术人员，就去大公司。 个人建议人生的路很长，不要那么早就达到最终的状态。 刚毕业，去公司好好体验一下再创业。 所谓“专业性”，我们会关注这几个方面:处理问题的广泛性:具有丰富的业务场景实践经验，处理问题的广泛性。 足够的难度和挑战:像“修车”和“修飞机”，同样的一套技术栈，应用的深度，项目的大小，玩法和挑战都有很大的不同。 大部队作战的经验:和“游击队”、“正规军”一样，在战略战术认知、管理规划、职业角色协调、开发流程、平台思维、综合能力等方面都能带来丰富的感受和经验。 职业发展素养及特点:小公司要求完成，大公司要求完成。 高标准严要求，有利于专业发展素养的形成。 拥有先天的R&D储备:打持久战，需要投入时间自研核心能力和丰富的技术储备。 “我知道”和“我也知道”是远远不够的。前端工程师的成长需要肯定一个时间跨度内的经验积累。 正如鲍勃·迪伦的一句歌词:“一个人要走过多少路，你才能称他为一个人”，翻译过来就是:一个前台工程师要踏过多少坑，才能被称为专业的前台工程师？ 4.前台工程师的人才画像第三个问题，能掌握到什么程度才能进大厂？大厂对前台工程师的需求很大，但校招通过率其实不高，市场供需明显不对等。 目前大家都是从自学开始，个人学习和公司需求有一定差距。 学习不够系统。看书，逛社区，随便看几篇文章，很容易被误导。 我有少量的实习经验，但是接触的范围有限。不知道和专业要求有什么差距。 这就带来了以下几个问题:大家一般都是分片研究，不太系统，对前端技术的全貌和发展趋势也不是很清楚。 在阿里，我们常说“体感”。体感感觉就是有个人的感受和理解。只有做了，反复做，踩了很多坑，这种体感才能建立起来。 前台发展很快，很多知识很快过时。 所以，不能停留在表面的用法上。 前台技术有快速变化的部分，也有相对稳定的部分。所以前台技术的学习方法应该是多线程、多维度的，后面会讲到。 如图，我们主要看前台候选人的三个变量:基础水平(有多基础)、认知水平(认知是否全面、到位)、实践水平(实际用过、做过什么)。 基本面:首先要系统学习HTML/CSS/JavaScript/Web API，重视书籍(评价高的书，这里列出两本)，养成阅读权威文档(MDN，官方文档)的习惯。 看几篇辅助文章。 认知方面:要有全景式的了解(首先要有大概的了解，知道要注意什么，关注技术的发展趋势)，对各个领域的知识要有精准的了解。 建议你多关注开源项目，主流框架，热门库。 关注的方式就是订阅他们的升级，多看他们的源代码，看别人在Github上的讨论。参与当然更好。 个人知识结构要丰富，网络、算法、产品、设计、可视化、工具/插件等。应该可以理解。一个人的视野在哪里，边界就在哪里。 培养自己总结归纳的习惯。平时要多写。总结是一个结构化知识的过程。 实践:喜欢实习项目，学校项目，学习过程中多写demo，最好有几个个人项目。总之要寻找各种动手实践的机会。 另一个维度是潜力，或者说个人特质。 我们非常重视候选人的潜力。 是否追根溯源，追根究底，探究问题本质。 能否对新/奇/特的事物有足够的好奇心和求知欲，并愿意尝试，尤其是对产品设计有自己的审美情趣？ 前台工程师的价值在于“创造”。愿意用代码实践和还原自己的想法是非常重要的。 面试很好。一次笔试后很迷茫，但是写不出来。这肯定行不通。 在校招中，我们其实更看重人的潜力，在能力方面我们更看重基础。 五线程学习路径我们来看第四个问题，如何不断提高自己的技术水平？在校招面试的时候，我发现大部分同学都是零碎的学习了少量的前端技能，也能做出少量的东西。问题是他们已经停下来了，不知道怎么学的更深入。 和学校不一样，学校是学习的地方，公司是工作的地方。 我们希望学生在进入公司之前，就能建立良好的学习习惯和有效的学习方法，让他们在进入一个工作环境，利用具体的业务场景时，能够快速成长。 前台学习技术有两种方式:一种是“多线程”学习路径，一种是深度学习路径。 什么是“多线程”学习路径？第一条主线是基础知识的学习。 这是学习其他技术的基础。 基础知识需要系统的学习，包括学习JavaScript/HTML/CSS/native Web API。 学了之后，不能直接做项目，还是要掌握几个处理问题的框架和工具。但要想更好的处理问题、组合方案、调试问题，就必须对语言、语言特性有深入的了解。 第二条主线，领域知识的学习。 如前所述，要不断丰富自己的知识结构。 特定的职位需要特定的领域知识。 有一点常识，像软件工程/数据&算法/网络/可视化/安全/交互设计，这些知识和理论不需要深度学习，但是要有积极的认知。 第三条主线，工程实践经验 重点是使用体验。 像开发工具/包管理/构建工具/主流框架和库/代码版本管理/调试和测试相关工具等。，虽然这些工具很多，但是很多都可以用到能用的程度。 前台工作者有“喜新厌旧”的特点，变化快，需要不断吸收最新的东西。 所谓“善于造假”，善于使用开源库和工具，可以帮助我们快速处理问题。 但如果不了解背后的原理和技术点，仅仅停留在使用的层面，就只能机械的照搬，很难进一步提高。 很多人说前台发展太快了。刚学了点东西，过两年就被淘汰了。他们说的其实是工具层面的东西。越基础的东西越稳定，越值得投入精力去学习。 工程方面，像React这样的基础库是比较稳定的，值得深入研究。后面我会说如何进一步学习。 事实上，任何新事物都有其自身的发展脉络。如果你基础扎实，了解背后的原理，不仅可以快速掌握，还可以提高。 要成为一名专业的前端工程师，需要多线程、多维度的学习，包括工作后的持续学习。 对于学生入门，要有扎实的基础，有一定的工程经验，有尽可能广泛丰富的知识结构。 我在前台领域做了几年，总结了一套前台学习的强化视频和学习路线。如果有对前台开发感兴趣的伙伴，不管你是想转行还是想做大学生或者想在工作中提升能力的web前台党，欢迎大家加入我的前台开发交流群:603985993。希望大家真诚交流！，与企业需求同步。 朋友在里面学习交流。大牛每天定时讲解前台技术！也可以关注我的微信微信官方账号:【前台学员】每天更新最新技术文章和干货。 刚才说的六条深度学习路径是横向的。下面我们来看看如何纵向深入学习。 这是一个从知道什么到知道如何知道为什么的过程。 对应下面的链接，知道什么叫“听过”、“概念清晰”、“知道区别” Know How的意思是“用过”、“知道用法”、“踩过坑”(没踩过坑的基本都是轻用) 知其所以然，就是“明白原理”和“推演”，也就是达到灵活运用的程度。 前面提到的三个维度:基础知识:到“理解原理”的程度工程实践:尤其是前台主框架的学习，至少到“理解用法”领域知识的程度:到“概念清晰”的程度。我们以React为例:“听说”的意思是我知道它是什么，一个UI开发的库。 概念清晰，它的相关概念我都知道。这是一个基于公告、基于组件、可预测且响应迅速的UI库。 所以什么是公告，什么是组件架构，什么是响应，我们都需要知道。 什么是组件状态，什么是响应式编程，VDOM和JSX分别是什么？这些都是它的相关概念，我们要一路接触。 “用过”指的是你是否做过几个复杂且有挑战性的项目，你在整个React技术栈中用过什么？ 了解用法，比如组件化的特点，组合，属性传递的各种方式，类组件和功能组件的区别，为什么现在提倡功能组件，受控和非受控组件用在什么场景等等。 “踩坑”，踩的坑越多，用的越深。比如版本差异的问题，重渲染的性能问题，钩子的依赖问题，你有真正的体感吗？ 了解原理，比如钩子的运行机制，React的并发模式，虚拟DOM的基本原理，React协调器的基本原理等。 七种有效的学习方法。学什么，学到什么程度。 接下来，我们来谈谈有效的学习方法。 有效的学习肯定是在动手过程中学习。我知道所有的知识，但我不确定我能处理好问题(就像生活一样)。 处理问题的能力是一种综合能力，如图:处理问题是一个闭环。 当我们真正面对需求和问题的时候，要培养自己分析问题的能力，找到背后的需求点和技术点，然后去调查解决方案，否则你就不知道去搜索什么了。 在探索方案的过程中，建议多写demo，把复合题一个个分解成单点(微积分)。 然后才是处理问题的正式编码。 处理完问题后要总结，这样才能把实践变成有效的经验。 终于，还没完。要继续探索最优解，是否有更好的方案，如何写出可维护性更高的代码，如何写出更灵活的扩展。 最优解相当于达到极限阈值时适应度的突破。 我经常听到一些抱怨，比如“没有好的实践机会”，“我在工作中没有接触过”，“我在现在的工作中学不到任何东西” 问题越透明，解决方案就越简单明了。 首先，提升自己就是提高自我要求，不满足于现状，从追求代码质量到追求最佳解决方案。 最后，总结一下今天的参考 首先，我们谈到了“选择”，前端技术的发展历程和几个展望。前端行业的未来值得期待。 大厂的优势在培养专业人才方面，阿里有非常丰富的业务场景和技术储备。如果你愿意学习和接受挑战，这里有很多机会。 接下来讲前端工程师对自己能力和潜力的要求。 最后重点讲了如何学习，讲了两条路径:多线程学习路径和深度学习路径。 目前我们有阿里巴巴的前台实践生计，指定为在校广大学生专业学习前台技术的机会，让学生全面了解前台技术，知道学什么，怎么学，尽可能满足大厂的要求。 在校学生可以积极参与其中，相信会有很多收获。