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

大家好,我是若川。今天给分享一篇来自阿里克军大佬的好文。以下是正文~


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

  • 从事前端开发有前途吗?

  • 毕业之后去大公司,还是去“小而美”的公司?

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

  • 个人有一些前端开发经验,怎么提高自己?

一  前端开发的现况和前景

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

前端行业的发展实际上跟互联网的发展和时代的需要是密不可分的。通过下图可以看到有三个明显的转折点:

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

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

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

二  前景:前端技术的价值

技术的价值决定了它的生命力。前端技术的价值就是“界面”的价值,我相信所有“界面”最终都会用前端技术实现。连接消费者和互联网的,是数字化生活的“界面”,连接生产者(企业、机构、自媒体)到互联网的,是数字化生产方式的“界面”。今天大家也能感受到,这些“界面”变得越来越多元化、智能化、而且无所不在。

举个例子,我们看60年代开始,火箭的控制台都是物理界面,到最新的“龙飞船”的控制台完全以数字化为主体的界面,据披露这个界面就是用JavaScript开发的。我相信,未来所有物理界面都会进化为数字化界面。

前端开发简单的说是实现产品的表现和交互。今天不同类型的产品的表现形式和交互形式非常丰富,早已不是单一的图文、视频和一些鼠标键盘的交互操作。在业务类型上,有toC、toB、toG,面向的客群不同,前端技术应用的方式方法有很大差异。有人担心前端行业存在近30年了,会不会丧失创新性?综上所述,显然不会。未来已至,需要更多新人进入到这个行业,这个行业需要更多的创新力。

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

三  职业选择

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

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

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

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

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

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

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

四  前端工程师的人才画像

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

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

如图所示,我们对前端候选人主要看三个变量:基础程度(基础怎么样)、认知程度(认知是否全面、是否到位)、实践程度(实际用过什么、做过什么)。

基础方面:首先就是HTML / CSS / JavaScript / Web API要系统的学,要看好书(评价高的书,这里列了两本),要养成看权威文档(MDN、官方文档)的习惯。辅助看一些文章。

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

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

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

五  多线程学习路径

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

前端技术的学习有两条路径:一个是“多线程”的学习路径,一个是深入学习的路径。什么是“多线程”的学习路径?

第一个线程,是基础知识的学习。这个是学习其它技术的基础。基础知识需要系统的学,基础包括JavaScript / HTML / CSS / 原生 Web API的学习。学过之后还不能直接做项目,你还需要掌握一些框架和工具才能解决问题,但如果要更好的解决问题、组合方案、调试问题,就必须对语言和语言特性有深入的理解。

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

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

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

六  深度学习路径

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

前面提到的三个维度:

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

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

  • 领域知识:要到“概念清晰”的程度

我们以React为例:

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

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

七  有效学习的方式

前面说的是学什么,以及要学到什么程度。接下来我们说说有效学习的方式。有效学习一定是在动手过程中学习,所有知识我都懂,但不一定能很好地解决问题(和人生一样)。解决问题的能力是一种综合能力,如图所示:

解决问题是一个闭环。当我们真正面对需求,面对问题时,我们要培养自己分析问题的能力,找到背后的需求点、技术点,再去调研方案,否则你都不知道搜什么。探索方案的过程建议多写demo,把复合的问题拆成单一的点一一攻破(微积分的思路)。然后才是正式的编码,解决问题。问题解决之后,还要归纳总结,这样才能把实践变成有效的经验。最后还没完,还要继续探索最优解,有没有更好的方案、代码怎么写可维护性更高、怎么写扩展更灵活。探索最优解相当于健身中,达到极限阈值时,突破的那一下。

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

最后我们小结一下今天的分享。首先我们谈到了“选择”,讲了前端技术的发展历程和一些展望,前端行业的未来非常值得期待。大厂在培养专业人才上的优势,阿里有非常丰富的业务场景和技术储备,如果愿意学,愿意接受挑战,这里有很多机会。接下来,又讲了前端工程师在能力和潜质上的要求。最后重点探讨了如何学习,讲了两条路径:多线程的学习路径和深入学习的路径。目前我们有阿里巴巴前端练习生计划为广大的在校同学提供专业学习前端技术的机会,让同学们对前端技术有一个全面的认知,知道学什么,怎么学,尽可能贴合大厂的要求。在校同学们可以积极参与,我相信一定会有很多收获。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276210.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nc65右键生成菜单_DbSchema生成表单和报表,原来如此简单

DbSchema 8 for Mac是mac上一款非常实用的商业数据库ER图绘制软件,可以轻松的对文档进行注释或标注,而且Dbschema集成了SQL和数据工具,能生成直观的图表、PDF文件或HTML 5文档等,非常的实用。现在就来给大家分享DbSchema如何生成表…

若川的2020年度总结,水波不兴

前言从2014年开始,每一年都会写年度总结,坚持了6个年头。回顾2014,约定2015(QQ空间日志)2015年总结,淡化旧标签,无惧未来(QQ空间日志)2016年度总结,毕业工作2…

年度总结文章的抽奖结果公布

大家好,我是若川。2月4日,发表了我的2020年度总结文章《若川的2020年度总结,水波不兴》,本以为阅读量应该突破一千会比较快,实际上比较艰难,而且还掉粉10来人。2020年运营公众号以来,不知不觉发…

Elon Musk

人物事件 成长学习 1971年6月28日,埃隆马斯克在南非的比勒陀利亚出生,他的 埃隆马斯克 父亲是一名南非机电工程师,母亲是加拿大人,从事营养师兼模特。[8] 1981年,10岁的马斯克就拥有了自己的第一台电脑,并…

真诚推荐这7个大佬的公众号,碎片化学习

逆水行舟,不进则退。我们的工作已经占用了大块的时间了,剩下的只有各种碎片,最适合碎片时间学习的,莫过于优质的技术干货公众号啦~以下这些是小编精选,里面有很多资讯和资源,内含干货,希望能给大…

[转]Windows 7 产品密钥是否安全

提到Windows 7(或Windows Server 2008)有些人认为自己的产品密钥(Product Key)很安全,甚至在公司内部有些网管也认为公司部署的Windows 7 系统的密钥不会泄露。但其实并非如此,众所周知我们的密钥都是写在注…

HttpWatch的Result中出现Aborted的原因分析[配图]

转载链接:http://www.cnblogs.com/yutiansanshou/archive/2013/02/01/2889486.html 我们在使用HttpWatch进行Web调试的过程中有时候会看到非HTTP Status Code(状态码)的值, 例如:(Aborted)。 (Aborted)是HttpWatch中定…

《大规模分布式系统架构与设计实战》

《大规模分布式系统架构与设计实战》 基本信息 作者: 彭渊 丛书名: 大数据技术丛书 出版社:机械工业出版社 ISBN:9787111455035 上架时间:2014-2-21 出版日期:2014 年2月 开本:16开 页码&…

WINDOWS下的squid

今天写这篇教程目的在于分享自己在WINDOWS主机下配置squid的方法。哪些地方写的不完善或是不完整或是需要修改的地方,大家可以提出。我会第一时间纠正。下面看正文部分。先提条件,您预安装配置squid的这台计算机必须是联入网络的,系统版本是w…

Spring Batch 批量处理策略

为了帮助设计和实现批量处理系统,基本的批量应用是通过块和模式来构建的,同时也应该能够为程序开发人员和设计人员提供结构的样例和基础的批量处理程序。当你开始设计一个批量作业任务的时候,商业逻辑应该被拆分一系列的步骤,而这…

如何从零开始开发一个 Chrome 插件?

什么是浏览器插件?简单来说浏览器插件,是浏览器上的一种工具,可以提供一些浏览器没有的功能,帮你做一些有趣的事情。开发者可以根据自己的喜欢,去实现一些功能。插件基于Web技术(html、css、js)…

轉Excel的一種簡單方法

写了这么久的程序﹐越来越喜欢那种简单的解决方法﹐这段时间在做一个报表系统﹐其中有需要转Excel﹐而且要求兼容openoffice﹐遂利用asp语法,asp.net的控件封装特性以及excel 2003的xml试算清格式做了一个看起来比较"清爽"的excel转档方案。一.开始原理很简单﹐excel…

总结:自学前端的高效学习路线

提到前端,大多数人都会想到薪资高。也正因为如此,很多人想要从事前端开发这个岗位,也由此衍生出来一个问题:为什么前端工程师供不应求,但还是有很多学前端的人找不到工作?其实行业不是缺前端工程师&#xf…

vmware创建虚拟机不识别网卡

今天在给虚拟机添加网卡的时候,出现了虚拟机不识别新加的网卡,很纳闷,连的一样的端口组,为什么新加的网卡识别不了呢 然后查看pci设备,发现网卡的驱动为 AMD 79C970 PCnet32- LANCE 然后都vc上查看,果真驱动…

周末包邮送书和小红包中奖名单公布

大家好,我是若川。周末送福利,给大家送红包、包邮送新书!这篇文章中,准备了3本自选前端新书,10个2元小红包,在看抽10人每人5元红包,2月28日晚8点开奖。现将名单公布如下:在看抽奖&am…

python treeview底部加个按钮_Python爬取京东商品信息(GUI版本)

前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。作者:DYblog转载:https://www.cnblogs.com/dy8888/p/13257918.htmlPS:如有需要Python学习资料的小伙伴可以加点击…

jmeter学习指南之聚合报告

jmeter视频地址:https://edu.51cto.com/course/14305.html 上一篇文章中我们讲了Jmeter结果分析最常用的一个Listener查看结果树,今天接着讲另一个最常用的listener--聚合报告Aggregate Report。我们先来看看聚合报告中的主要名称的含意:Labe…

2021 整理的最全学习资源,送给每一个努力着的人

时间来到了 2021 年,新的一年有新的期待,而我亦有新的祝福如果说在过去的一年,经历太多,心酸、迷茫、焦虑、幸福、喜悦那么在 2021 年,希望你可以去过一种遇见自己的生活,恬淡、热情,喜欢自己而…

Chrome OS 设备或将允许用户自行选择 Linux 发行版

百度智能云 云生态狂欢季 热门云产品1折起>>> 谷歌去年宣布在 Chrome OS 上支持运行 Linux 应用,前不久又有消息称其将为运行这些 Linux 应用提供 GPU 加速支持,而现在,Chrome OS 似乎将在 Linux 的方向上更进一步,让 …

博文视点 OpenParty第11期:世界黑客大会那些事

博文视点 OpenParty第11期:世界黑客大会那些事 亲爱的读者朋友: 您好! 2009年,博文视点Open Party共举办8场,累计到场2000人次,影响力辐射近5000人次,真正实现了博文视点Open Party的初…