写点什么

成为一名优秀的 Web 前端开发者

  • 2015-08-09
  • 本文字数:2459 字

    阅读完需:约 8 分钟

本文记录了两位工程师为 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

2015-08-09 08:0010428
用户头像

发布了 428 篇内容, 共 190.2 次阅读, 收获喜欢 39 次。

关注

评论

发布
暂无评论
发现更多内容

掌门教育自研APM实际分享

白玉兰开源

支持低代码开发和远程真机,DevEco Studio 2.2 Beta1来啦

科技汇

APP 开发技术如何进行选型 ?

程序员海军

大前端 App 技术选型 APP开发

代码管理工具:Git和SVN

正向成长

git svn

带你认识9种常用卷积神经网络

华为云开发者联盟

神经网络 深度学习 卷积神经网络 图像 卷积

回忆录 | 那些你不能错过的CTF夏令营往届历程,2021精彩继续……

郑州埃文科技

🏆「作者推荐」【JVM原理探索】深入理解G1垃圾收集器的原理和运行机制

码界西柚

G1 JVM 6月日更 垃圾回收器

基于 Web 引擎扩展技术的 RTC 混合开发框架实践

白玉兰开源

大前端

可视化搭建的一些思考和实践

白玉兰开源

联想服务斩获两项智能运维大奖 助力企业业务创新与数字化转型

科技大数据

AI如何赋能软硬件产品创新?百度大脑开放日西安站解密

百度大脑

AI 百度大脑 开放日 EdgeBoard

[译] D8 类库脱糖

Antway

6月日更

容器化 | 在 Kubernetes 上部署 RadonDB MySQL 集群

RadonDB

MySQL Kubernetes 容器

面试官:你知道怎么求素数吗?

华为云开发者联盟

面试 开发者 开发 代码 素数

为什么switch的case没有break不行

叫我阿柒啊

Switch case break

使用 Scala 宏解决对象转换

GrowingIO技术专栏

scala protobuf 元编程 macro

深度解读MRS IoTDB时序数据库的整体架构设计与实现

华为云开发者联盟

大数据 架构 时序数据库 FusionInsight MRS MRS IoTDB

12种mysql常见错误总结 +分析示例

李阿柯

MySQL 面试 常见问题

冰泉奶茶香牙膏好不好?奶茶控的宝藏牙膏就是它

Geek_50a546

EasyRecovery——一款专业的数据恢复软件

淋雨

文件恢复 Easyrecovery破解 免费恢复软件 硬盘数据恢复

30分钟接入SDK 融云是如何让开发者做到开箱即用的?

融云 RongCloud

计算机网络的 89 个核心概念

苹果看辽宁体育

后端 计算机网络 网络

JavaScript学习(十一)---RegExp对象

空城机

JavaScript 大前端 6月日更

数据结构——顺序表

若尘

数据结构 6月日更

Rust从0到1-自动化测试-测试组织

rust 单元测试 集成测试 自动化测试

HarmonyOS学习路之开发篇——公共事件与通知(一)

爱吃土豆丝的打工人

Java HarmonyOS 鸿蒙操作系统

神经网络吴恩达, 解析极限编程--Kent Beck, Cynthia Andres John 易筋 ARTS 打卡 Week 53

John(易筋)

ARTS 打卡计划

一步步设计版本控制系统

Java·课代表

git 版本控制 版本管理

拥抱开放的英特尔 让PC行业再次越过创新鸿沟

E科讯

AI论文解读:基于Transformer的多目标跟踪方法TrackFormer

华为云开发者联盟

预测 Transformer 多目标跟踪 TrackFormer 跟踪目标

从零开始学习3D可视化之事件绑定

ThingJS数字孪生引擎

大前端 物联网 3D 3D可视化

成为一名优秀的Web前端开发者_JavaScript_Abel Avram_InfoQ精选文章