写给想成为前端工程师的同学们

发表于 5年以前  | 总阅读数:1436 次

前端工程师是做什么的?

前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域。

2005年的时候大多数网页长这样:

现在的网页一般是这样的:

前端工程师的发展之路和前景是怎么样的?

前端是一个相对比较新的行业,互联网发展早期(1995年~2005年)是没有专业的前端工程师的。随着互联网的发展,大约从2005年开始,正式的前端工程师角色被行业认可,到了2010年,互联网开始全面进入移动时代,前端工程师的地位越来越重要,前端领域的技术发展也越来越快,各种新的思想、设计模式、工具和平台都快速发展,对前端工程师的技能要求也越来越高。

有一些数据可以说明前端行业的发展迅速。

  • 在2010年之后最流行的新编程语言中有相当部分和前端有关,比如 Dart、Clojure、CoffeeScript 和 TypeScript。
  • 作为前端最重要的编程语言 JavaScript,在最近几年里不论是代码量还是关注数都稳居 Github 平台热门编程语言榜。
  • 行业对前端需求量持续增加,前端程序员薪水在行业里面处于较领先的位置。

近年来最流行的编程语言很多都是JavaScript替代语言

JavaScript在最热编程语言 TOP10

近几年互联网公司前端团队每年扩张一倍

JavaScript工程师平均薪水排名在程序语言工程师收入前10

前端工程师需要什么样的知识和技能?

有人说前端工程师的技术栈是这样的:

还有人说是这样的:

实际上前端工程师最核心的技能还是:

在一个典型的互联网公司的产品研发流程中,前端工程师和其他角色的关系大致上是这样的:

前端是最接近产品和设计的工程师,起到衔接产品和技术的作用,前端为用户可以看到的部分负责,所以也是最接近用户的工程师。

在多终端的时代,如果一个产品同时支持PC、移动端,前端工程师还需要和更多的角色打交道:

JavaScript 对于前端是最重要的技能,所以优秀的前端工程师要有扎实的JavaScript基本功。而JavaScript这门编程语言也是目前程序设计领域炙手可热的宠儿,如今的它不仅仅只是用来开发Web,还可以用在各个方面。

JavaScript 可以用在"树莓派"这类智能硬件芯片开发

前端工程师也是软件工程师,所以软件工程师的基础知识也是非常重要的,这些基础知识包括:

  • 数学
  • 计算机体系
  • 操作系统
  • 数据结构和算法
  • 编译原理

HTML和CSS也是前端工程师非常重要的基本功,很多同学,尤其是喜欢写代码的同学容易忽视 Markup Language,实际上 ML 也是 UI 相关的领域里面很重要的内容,不应该被忽视。

  • HTML: The Living Standard
  • HTML & CSS

有同学问说:"前端工作需求很多,老是改来改去,实际的技术点并没有多少,产品决定业务逻辑,从事底层基础服务会不会更有挑战和职业未来?"

的确,越贴近业务和产品层面上的工作,需求差异性越大,可能改动越频繁。不仅仅是前端改来改去,PHP服务端做业务的同学也面临这样的问题,业务逻辑改来改去。越底层通用性越强,改动相对较少。

不过事情都是有两面性的,首先可以这么想想,是底层基础服务的市场大还是互联网业务和产品的市场大。其次,基础服务的通用性很容易达成,而产品层面上如何通用化,如何在业务驱动的产品研发中利用工程化和工具化提升开发效率,这其实是一个很难的问题。丰富的互联网产品已改变和正在改变着我们的生活,然而作为产品的创造者,工程师们怎样让自己过得更好,这个领域值得研究。

另外,不要觉得实际的技术点没有多少,举几个例子:实现曲线和曲面动画,计算地图的最短路径,让png静态图片类似于gif图一样做局部的运动,抽奖游戏,物理效果的HTML5游戏,3D图表,增强现实的WebGL视频流处理等等,这些都是在前端领域中遇到的实际问题。

就 JavaScript 来说,在实际项目中设计最合适的模型高效率解决现实问题本身就很有挑战。作为一种典型的新生代编程语言,JavaScript 特性丰富,使用灵活,性能优良。面向对象、函数式编程、各种设计模式、MVC 和 MVVM,这些本身就有足够的吸引力。

前端要解决界面和交互问题,实际上UI层面上的问题一直是软件工程方面的一个难题,因为UI不停地在变化。浏览器各个版本的兼容性、Web 标准、移动设备、多终端适配,给了前端工程师很大的挑战,对前端工程师的能力也有很高的要求。许多UI问题有不只一种解决方法,许多问题有非常巧妙的思路和精彩的解决办法,前端在工程师群体里是属于非常有创造力的一个群体,因为这个行业需要丰富的创造力和想象力。

前端工程师还是Web标准的制定者、实践者和推动者,而现在的W3C标准不仅仅局限于浏览器,还包括各种手持智能设备,车载设备、智能家居等等。在未来万物互联的时代,前端将不仅仅是网页上的工程师,而是所有人机交互领域的工程师。

前端工程师的学习和成长

前端领域发展很快,各种新技术新思想不断涌现,这是一个好现象。但是前端发展太快也带来一些问题,比如有同学就问到我究竟应该学些什么,Angular.js、React、Node.js、ES6、ES7、CoffeeScript、TypeScript……似乎永远有太多东西需要学习,有些东西好像还没学明白就被另一些新的技术取代而"过时了"。

其实还是那句话,前端工程师首先是软件工程师,基础是最重要的,如果基础不扎实,一切应用技能就都是"浮云"。前端的基础是什么?HTML、CSS、JavaScript基本功数学、算法、数据结构、操作系统、编译原理基本功

一个优秀的前端工程师必须要有自己擅长的领域,并且钻研得足够深入,同时要有眼界,能"跨界"。可以以前端作为职业,但千万不要把自己的技能限制在前端领域,因为有很多东西,只有站在前端之外,才能看得更清晰,更透彻。

学东西千万别盲目跟风,大家都在谈AngularJS就立即跑去学习,过几天大家都谈React了,就又放下AngularJS去学习React。前端领域知识点很多,值得学的东西也很多,聪明的同学懂得花时间学习成体系的知识并且研究得足够深入,因为只有这样才能从中总结出规律,形成方法论,这样才能最大化学习的价值。

知识的正确用法 ---- 一个领域里面的大师永远不会是另一个类似领域的菜鸟

这次前端星计划布置的一个实现带有农历和节气的万年历,有些同学卡在农历计算上,大约70%的同学懂得去网上找代码,但只有不到1%的同学真正弄明白农历计算的原理。

在面试的时候,面试官问到如何做前端性能优化,有的同学能够拿雅虎的性能优化军规回答得头头是道,反复强调使用工具压缩静态资源,但是自己搭建的博客的nginx服务却没有开启gzip。都知道说要合并静态资源,要减少HTTP请求,然而为什么要减少HTTP请求,减少请求之后预计能改善多少性能,获得多少收益呢?需要弄明白这些问题,也需要深入了解HTTP协议本身。

还有一个更有趣的问题,大家都说写HTML的关键是语义化,那么到底什么是语义化呢?这个问题难住了不少同学。标签要符合语义,这个答案看似简单标准,但什么样的标签才是符合语义?强调用 strong 不用 b?那如果有个外星文明,它们的语言里 strong 相当于地球的 bold,bold 相当于地球的 strong,那么它们究竟该用 strong 还是用 b?我们说 i 标签是斜体的意思,那为什么 fontawesome.io 拿它做 icon font 的标签,这是不是"反语义"的?

过去很多地方农村有一种民间的染坊,制作染布的染料。这种染房里面有一口很大的铁缸,通常都要有一个身体非常强壮的工人拿一根很长的铁棒在染缸里面用力地敲击,敲得越响,制作出来的染料颜色越鲜艳。 为什么越用力敲打铁缸染料就越好?染坊的人说这是祖祖辈辈传下来的经验,而事实上也是如此,真的染料的颜色和敲打用力有很大关系。直到有一天,一位从村里走出去学化学的大学生,弄明白了原来只需要在染料中加适当比例的铁屑,就能让染料和含铁元素氧化物产生化学反应而变得更鲜艳。原来祖祖辈辈传下来的"仪式"实际上在真实原理面前只是一种信仰和宗教。同样,如果我们不去了解技术的本质而止步于应用,那么我们就只是技术宗教的信徒。所以在周爱民老师的《JavaScript 语言精髓与编程实践》中说,计算机语言如同祭司手中的神杖,神杖换了,祭司还是祭司,世人还是会把头叩得山响。祭司掌握了与神交流的方法,而世人只看见了神杖

由兴趣选择前端

在我学程序设计的最初,我学习的是C语言,然而整整一本书除了教我如何在黑洞洞的控制台上输出 Hello World 和各种其他字符或者用键盘输入一些什么然后依然是字符输出外,就没有什么其他的内容了。学习了一段时间之后,我的内心一度是崩溃的,因为我觉得这和我想得不一样,学了那么多知识,我都不知道自己究竟算不算是"学会"了C语言,因为在我看来,那些丰富多彩的操作系统和各种应用软件和黑洞洞的控制台之间明显还有着非常巨大的鸿沟。

事后回想起来,当时的想法当然是幼稚可笑的,那时候的我并不知道程序语言和运行环境之间的区别,对操作系统、用户API、硬件接口、网络服务等等都完全不了解。然而这并不能怪我,因为C语言的教程并没有任何一言半语来告诉我这一点,我也不知道学习了C语言的语法之后接下来还应该学习些什么。

相对来说,Web开发更吸引我,因为不需要安装任何环境,只需要在文本编辑器里面输入一些字符,保存后打开浏览器,马上就能看到丰富的视觉效果,这就是前端的优势,你所做的努力立即就能看得见。

相对于死板的输入输出,Web开发在界面可见的一层要丰富多彩得多,这一点吸引了我,如果这一点也能吸引你,让你着迷,那么你就适合学习前端。

在选择前端作为职业之前,要明确判断自己对前端开发的确感兴趣,选择做前端,应该是确认自己喜欢和适合做前端,而不是为了一份看起来体面而且薪水不菲的工作。如果你对构建丰富多彩的界面、处理各种交互逻辑不感兴趣,甚至厌烦,那么最明智的选择是放弃成为前端工程师的想法 ---- 因为选择一个自己不喜欢的职业,为之忍受数十年直到退休,实在是一件很悲催的事情。

对在校学生,我们看重哪方面能力?

有同学问,360前端是否一定要求实际经验的学生,在这里我可以回答:否。

对于学生,我们比较关心的是:

  • 基础:包括数学、算法、数据结构、计算机相关基础的掌握。
  • 学习能力和学习方法:如何学的前端,学了多久,学到什么程度,遇到过什么问题,是如何尝试解决这些问题。
  • 兴趣:对前端的兴趣如何,这一点可以体现在很多细节上。有一个反面的例子比较常见,一般来说我会问学生最近在关注什么前端新知识,有的学生会说我关注某某某,但当我再问他究竟关注到什么程度,会发现他实际上根本没有在这项新知识上花费多少时间。如果你对感兴趣的问题都不花费时间,如何证明你自己对前端的"兴趣"呢。
  • 解决问题的能力:遇到难题如何解决的,遇到没接触过的问题是如何思考和最终解决的。从这里可以判断出同学有没有前端思维,这些问题没有标准答案,我们不追求某些"官方思路",看重过程而不是结果。

关于简历,有同学提到说现在似乎很多公司都希望学生会点 Node.js,会点 React,我自己不会该怎么办。

我想说的是,我们并不要求学生必须会这些。相反,我个人更鼓励学生利用时间打好基础。简历上写自己真正擅长的内容即可,我们不会因为在你的简历上看不到 Node.js 或者 React 就忽略你。只要你真心热爱前端并用心学了,你应该明白如何用前端基础来打动我。有的学生喜欢在简历上堆砌词汇,实际上这一点不见得好,因为如果你写了一个你自己一知半解的东西,最后在面试中被面到了,一定会得负分的。

技术本身是有深度的,A 同学说"我知道React但没用它做过东西", B 同学说"我用AngularJS写过一些个人的小项目", C 同学说"我上个月使用弹性布局的思路来写我的博客,结果在Android系统4.1版本的Webkit浏览器下出现了一个显示bug,最后我是这样这样解决的"。你们说 A、B、C 三个同学我们会选择哪个同学?

面试是一个彼此交流的过程,我们希望看到大家在前端领域的能力和潜力,"知道"一件事,并不是一种有价值的能力,尤其是在知识廉价的互联网时代。我们的同学千万不要像背书一样去死记硬背一样东西,而应该真正用心去学。我们的高等学校不仅仅教授大家知识,还有如何真正学习和做研究,不是吗?

如果你对前端真的感兴趣并有潜力,花点小心思,你该知道如何学习它。

最后,祝愿大家都能成为优秀的前端工程师。

 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:1年以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:1年以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:1年以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:1年以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:1年以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:1年以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:1年以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:1年以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:1年以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:1年以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:1年以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:1年以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:1年以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:1年以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:1年以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:1年以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:1年以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:1年以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:1年以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:1年以前  |  398次阅读  |  详细内容 »
 相关文章
为Electron程序添加运行时日志 5年以前  |  20340次阅读
Node.js下通过配置host访问URL 5年以前  |  5892次阅读
用 esbuild 让你的构建压缩性能翻倍 4年以前  |  5785次阅读
 目录