怎样成为一名优秀的WEB前端开发者?

简介: 本文记录了两位工程师为web开发者们所提出的多条建议,其中一位推荐了多种实用的工具与技术,而另一位则对于如何克服浏览器开发时所面临的挑战提出了诸多建议。 Rebecca Murphey是来自于Bazaarvoice的一位软件工程师。


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

如果你想学习前端可以来这个群,首先是291,中间是851,最后是189,里面可以学习和交流,也有资料可以下载。

编写高质量的代码

她的建议是,对“违反了项目中经过良好定义的风格指南”的代码进行重构,还应当使用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,这些方法能够迫使我对知识点进行充分的挖掘,并做到从内到外的完全理解。哪怕你写的东西完全没人看,但写作的过程本身就已经值得你付出的努力了。”

相关文章
|
15天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
16天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
17天前
|
编解码 前端开发 JavaScript
Web 前端开发中的最佳实践
本文将介绍 Web 前端开发中的最佳实践,包括代码组织、性能优化、响应式设计和用户体验等方面。通过遵循这些实践,开发人员可以提高开发效率,优化用户体验,并减少潜在的问题和错误。
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
10天前
|
前端开发 JavaScript vr&ar
前端新技术探索:WebAssembly、Web Components与WebVR/AR
【4月更文挑战第12天】WebAssembly、Web Components和WebVR/AR正重塑Web应用的未来。WebAssembly允许C/C++等语言在Web上高效运行,提供接近原生的性能,如游戏引擎。Web Components通过Custom Elements和Shadow DOM实现可复用的自定义UI组件,提升模块化开发。WebVR/AR(现WebXR)则让VR/AR体验无需额外应用,直接在浏览器中实现。掌握这些技术对前端开发者至关重要。
16 3
|
1月前
|
机器学习/深度学习 前端开发 算法
利用机器学习优化Web前端性能的探索与实践
本文将介绍如何利用机器学习技术来优化Web前端性能,探讨机器学习在前端开发中的应用,以及通过实际案例展示机器学习算法对前端性能优化的效果。通过结合前端技术和机器学习,提升Web应用的用户体验和性能表现。
|
1月前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
44 3
Web前端全栈HTML5通向大神之路
|
1月前
|
监控 前端开发 JavaScript
构建高性能Web应用:前端性能优化的关键策略与实践
本文将深入探讨前端性能优化的关键策略与实践,从资源加载、渲染优化、代码压缩等多个方面提供实用的优化建议。通过对前端性能优化的深入剖析,帮助开发者全面提升Web应用的用户体验和性能表现。
|
1月前
|
编解码 前端开发 JavaScript
构建响应式Web界面:现代前端开发的最佳实践
【2月更文挑战第26天】在多设备浏览时代,响应式网页设计已成为前端开发的核心。本文将深入探讨如何通过灵活布局、媒体查询和现代框架,实现跨平台的用户界面一致性。我们将剖析响应式设计的原则,并展示如何结合最新技术栈,包括CSS Grid和Flexbox,以及JavaScript框架如React和Vue,来优化前端性能和用户体验。
41 5
|
1月前
|
敏捷开发 前端开发 JavaScript
探索现代Web应用中的微前端架构
【2月更文挑战第25天】在本文中,我们将深入探讨微前端架构的概念、实现方式以及其在现代Web开发中的应用。微前端是一种将大型单一应用拆分成一组小型独立子应用的架构模式,每个子应用负责一个功能模块,并可独立开发、部署和运行。通过这种模块化的方式,团队能够更加灵活地响应市场变化,提高开发效率,同时保持整体应用的稳定性和可维护性。文章将详细介绍微前端的核心原则、技术挑战以及如何在实际项目中实施微前端策略。