成为一名优秀的Web前端开发者
本文记录了两位工程师为web开发者们所提出的多条建议,其中一位推荐了多种实用的工具与技术,而另一位则对于如何克服浏览器开发时所面临的挑战提出了诸多建议。
Rebecca Murphey是来自于Bazaarvoice的一位软件工程师。今年早些时候,她发布了一篇博客文章“前端(JS)开发者的基本素质之2015版”,为JavaScript开发者在进行客户端web开发时使用的工具与开发方式提出了一些建议。她在文章的总结中写道:
学习ECMAScript 2015,推荐的参考资料有:《Understanding ES6》、ES6 Rocks以及BabelJS。我们在此还要加上一条,即Axel Rauschmayer的著作《探索ES6》。考虑到在当前这个时间点上似乎还没有必要了解ECMAScript 2015的所有细节,Murphey建议开发者更深入地了解如何使用异步调用、回调以及promise。
使用模块。Murphey相信,模块毫无疑问应当作为客户端web应用程序的构建块。她最近在使用webpack以实现模块化的效果,但她希望让每个人都能够使用ECMAScript标准模块的那一天能够早日到来。
测试你的代码。在Murphey看来,为你的代码编写测试,并且保证代码的可测试性是至关重要的。虽然她对于Intern“非常中意”,但出于习惯,她还是坚持使用Mocha。关于这一方面,她也强烈推荐Michael Feathers的著作《修改代码的艺术》。
实现流程自动化。Murphey曾经尝试使用Grunt与Gulp,但她最终还是选择了Yeoman。因为在“使用不熟悉的技术开始一个全新的项目”,或是对第三方JavaScript应用的开发进行标准化时,Yeoman的表现“非常出色”。Murphey也提到了Broccoli,认为它将来或许能够取代Grunt和Yeoman。
编写高质量的代码。她的建议是,对“违反了项目中经过良好定义的风格指南”的代码进行重构,还应当使用lint工具,例如JSCS或ESLint。
使用Git。Murphey建议在Git中使用特性分支,因此得以“通过交互式rebase,在与他人分享提交时对提交进行清理,并且尽可能地在较小的单元上进行工作,以减少冲突的发生机率”。此外还应当通过ghooks在push操作与commit操作前运行钩子操作。
在服务端生成HTML。出于性能方面的考虑,Murphey推荐在大型项目中尽可能在服务端生成HTML。“预先生成这些文件,将其作为静态文件保存,以加快处理请求的速度。随后在客户端的相应事件中可通过客户端代码操作这些HTML文件,并在客户端模板中修改。”
拥抱Node。Murphey建议web开发者熟练掌握Node.js的相关知识,至少要了解如何初始化一个Node项目、如何搭建一台Express服务器、以及如何使用request模块转发请求。
Philip Walton是来自Google的一位软件工程师,他最近撰写了一篇博客文章“如何成为一名优秀的前端工程师”。这篇文章的观点另辟蹊径,他并没有向读者推荐任何工具或框架,而是专注于如何处理这一领域中的某些挑战。在他看来,优秀员工与真正杰出的人才的差别不在于他们的知识量,而在于他们的思考方式。他是这样描述开发者的智慧的:
真正理解背后的过程。对于Walton来说,仅仅编写出可以运行的代码算不得优秀。他见过许多编写CSS与JavaScript的人,他们 “只求找到能够运行的代码,然后就继续下一步工作了。”很多时候,开发者并不了解某段代码运行的机制。Walton建议开发者进行深入钻研:
要充分理解代码的工作原理或许会很耗时间,但我向你保证,从长远来说,这种方式最终将节省你大量的时间。一旦你充分理解你所参与的系统是如何运作的,你就无需不断地进行猜测与检验这些费时的工作了。
预先了解浏览器将产生的改动。Web开发者应当持续了解有哪些浏览器的改动会破坏现有的代码。以下代码在IE10中必然会导致整个JavaScript框架的方法出错:
var isIE6 = !isIE7 && !isIE8 && !isIE9;
仔细阅读规范。Walton指出,虽然阅读规范是一项艰辛的任务,但一旦出现浏览器对某个页面的渲染不同的情况,这一任务就是不可避免的了。他为此特别举例说明:
最近我遇到这样一个例子,与可伸缩(flex)元素的默认最小尺寸有关。根据规范所说,可伸缩元素的min-width与min-height的初始值是auto,而不是0,这就意味着在默认情况下,这些元素不可能收缩到比其中的内容尺寸还小。而在过去8个月中,Firefox是唯一一个正确地实现了这一特性的浏览器。
如果你遇到了这个跨浏览器的不一致性问题,并且注意到你的网站在Chrome、IE、Opera和Safari上的展现完全相同,只在Firefox上有所差别,那你很可能会认为是Firefox的问题。实际上,我曾多次发现这一情况,在我的Flexbugs项目中,有许多由用户报告的bug其实都是由这种不一致性所导致的。而如果我按照用户所提议的那些临时方案来改变实现方式,那么在两周前所发布的Chrome 44中又会产生问题。由于这些临时方案选择了违背规范的方式,它们在无形中起到了提倡不正确行为的负面作用。
代码审查。Walton表示,从阅读他人的代码中可以学到很多知识,它可以拓宽你的思路,了解“新的工作方法”,同时也有助于你在团队中的工作。实际上,这一点确实相当必要,因为“作为一位工程师来说,你的时间大部分都是在一个现有的代码库中添加或修改代码”,而不是从头开始编写全新的代码。
与更聪明的人一起工作。Walton“强烈”建议你至少在职业生涯的初期阶段要尽量在某个团队中进行工作,向更有经验的团队成员学习,并让他们审查你的代码。如果之后选择了自由职业者这条职业路线,那么Walton建议你参与开源项目,这同样可以感受到在团队中工作的益处。
重复发明轮子。Walton相信,虽然“重复发明轮子对于业务来说是有害的”,但它对于学习很有好处。在有些情况下,他建议你自己编写代码,而不是依赖于第三方的代码,因为这一过程将让你学到许多东西。当然这也要看情况而定。
将你的经验记录下来。Walton的最后一条建议是将你所学到的东西用文字记录下来:“按我的经验来看,写作、演讲以及开发demo,这些方法能够迫使我对知识点进行充分的挖掘,并做到从内到外的完全理解。哪怕你写的东西完全没人看,但写作的过程本身就已经值得你付出的努力了。”
查看英文原文:Becoming a Great Web Front-end Developer
成为一名优秀的Web前端开发者的更多相关文章
- 如何成为一名优秀的web前端工程师(前端攻城师)?
程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种:第一种一直在问:如何学习前端?第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀. ...
- 如何成为一名优秀的web前端工程师(转给自己,共勉)
来源:王子墨的博客 程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到 ...
- 如何成为一名优秀的web前端工程师
我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师. 何为:前端工程师? 前端工程师 ...
- 【转】如何成为一名优秀的web前端工程师(前端攻城师)?
[转自]http://julying.com/blog/how-to-become-a-good-web-front-end-engineer/ 程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · ...
- (转)国内外优秀的Web前端工程师
1. 国内外优秀的Web前端工程师 寻找Github.微博.知乎等技术社区上比较活跃.影响力大的圈内大神,供大家膜拜! 视野所限,未必全面,欢迎大家推荐.自荐. 排名不分先后,序号只为标记方便. 提供 ...
- 最受Web前端开发者欢迎的五大开发工具
工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...
- 不得不看的秘诀,如何成为一名合格的web前端工程师
何为:前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业. Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript! 它要求前端开发工程师不仅要 ...
- 如何成长为一名合格的web前端开发工程师呢?
前端开发工程师不仅仅要掌握一些基础的美工设计等还要懂得网页设计类的HTML JavaScript和css,这三种能力缺一不可,虽不要求你特别的精通,但至少要熟练的掌握,能够运用自己所了解的这些技术和知 ...
- 国内5款优秀的WEB前端框架
1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...
随机推荐
- 一篇说尽Excel常见函数用法
一篇说尽Excel常见函数用法 Word,PPT,Excel这三个Office软件是职场办公里最常用的三个软件,但是我发现简书上写PPT的教程多,Excel的少,即使有,也是零零散散.因为Excel的 ...
- css Animation初体验
目前有越来越多的网站都使用animation,无论他们是用GIF,SVG,WebGL,视频背景或者其他形式展示.适当地使用动画会让网站更生动,互动性更好,为用户增加一个额外的反馈和体验层. 在本教程中 ...
- (转载)Linux如何编译安装源码包软件
一.什么是源码包软件: 顾名思义,源码包就是源代码的可见的软件包,基于Linux和BSD系统的软件最常见:在国内源可见的软件几乎绝迹:大多开源软件都是国外出品:在国内较为出名的开源软件有fcitx;l ...
- Android UiAutomator快速调试
在测试类中添加主函数 public static void main(String[] args){ String jarName,testClass, testName,androidId; jar ...
- servlet学习笔记_4
一.response.1.response.characterEncoding和response.setContentType("text/html;charset=UTF-8") ...
- mybatis+oracle添加一条数据并返回所添加数据的主键问题
最近做mybatis+oracle项目的时候解决添加一条数据并返回所添加数据的主键问题 controller层 @RequestMapping("/addplan") public ...
- 生成多sitemap文件
Thinkphp生成多sitemap文件 我们知道sitemap对于seo的重要性,很多介绍只生成一个文件sitemap.xml ,但是如果网站内容比较多,就要生成多个sitemap文件,因为搜索引擎 ...
- MVC项目中使用js 设置Checkbox的选中事件
要实现的效果是,当点击checkbox时,跳转到Action中 CheckBox实例: View界面: @Html.CheckBox("prd.IsChecked", Model. ...
- 微信微信JS-SDK 6.0.2 填坑笔记
0.为什么以前不需要配置这么麻烦就可以修改分享description 等信息,但是现在不行了. 因为6.0.2版本之前没有做权限验证,所以config都是ok,但这并不意味着你config中的签名是O ...
- struts 头像上传
java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...