• 15
关于前端开发,500位工程师总结出了8款“最牛”编程语言工具
统计 阅读时间大约9分钟(3403字)

2017-07-23 关于前端开发,500位工程师总结出了8款“最牛”编程语言工具

我们以Grab目前使用的工具为基础,推荐了几种值得学习的库和框架。

【猎云网(微信号:ilieyun)】7月23日报道(编译:田小雪)

过去,前端开发不像现在这么复杂,也不像现在这么令人兴奋。毕竟每天都有新工具、新框架和新插件出现,需要我们不断学习。所幸,我们Grab的网页设计团队一直都走在前端开发的前沿,已经在自家网页应用中融入了现代JavaScript系统。

但是,新员工和后端工程师可能还不太了解现代JavaScript系统。因此,在研发新功能或者修复漏洞时,会有些吃力。这时,公司就必须指导他们学习前端开发知识,帮助他们减少使用系统时遇到的问题,以最快的速度把代码介绍给用户。

在这份学习指南中,我们以Grab目前使用的工具为基础,从前端开发的每个方面出发,向大家推荐了几种值得学习的库和框架。

使用须知

1.熟练掌握核心编程概念;

2.熟悉基本命令行操作和Git这类源代码本版控制系统;

3.拥有网页开发经验,利用Ruby on Rails和Django这类框架开发过服务器端渲染的网页应用;

4.了解网页运作过程,熟悉HTTP这类网络协议。

下面,我们就开始详细介绍:

NO.1 单页面应用程序(即Single-page App,以下简称SPA)

现如今,网页开发人员不再把所开发的产品叫做网站,而是叫做网页应用。虽然二者没有严格区分,但后者的交互性和动态性更强,能让用户自行操作并且收到特定回应。

以前,浏览器会收到来自服务器的HTML。当用户访问另一个URL地址时,需要全页刷新,服务器也会发送全新HTML。这就是所谓的服务器端渲染。

但是,在现代SPA中,客户端渲染已经取代了服务器端渲染。浏览器会先从服务器上加载出最初图像,和包括框架、库和应用代码在内的脚本,以及整个应用所需的样式表。当用户访问其他页面时,页面将不会进行整体刷新,而是通过HTML5 History API对页面地址进行更新。以JSON形式呈现出来的新页面所需的新数据,将会通过向服务器发出的AJAX请求,由浏览器检索进行检索。接着,SPA会通过原先在页面中下载好的JavaScript,来对页面数据进行动态更新。

SPA的优点

1.应用针对用户操作给出的反应更加灵敏,不会由于页面整体刷新而出现闪退;

2.向服务器发送的HTTP请求减少,无需在每一页进行重复下载;

3.用户和服务器划分明确,无需修改服务器代码就可以轻松为新用户创建不同平台。另外,只要不违背API规则,还可以分别对用户和服务器的技术堆栈进行修改。

SPA的缺点

1.最开始的加载任务较重,包括框架和应用代码等;

2.需要对服务器进行额外的配置操作,让它将所有请求汇集到同一个进入点;

3.SPA依靠JavaScript来呈现内容,但并不是所有搜索引擎都能够在爬虫过程中执行JavaScript。这一点,无疑会对应用的搜索引擎优化带来负面影响。

NO.2 新时代JavaScript

在深入研究开发JavaScript网页应用的各个方面之前,首先要熟悉网络语言,即JavaScript或者ECMAScript。JavaScript用途非常广泛,可以用来开发网页服务器、本机移动应用和桌面应用。

在2015年之前,最近的一次网络语言更新,是2011年的ECMAScript 5.1。但是最近几年,JavaScript突然取得了不少进展。2015年,ECMAScript 2015(之前叫做ECMAScript 6)问世。与此同时,大量全新句法结构的出现,也使得代码编写更加简单。当然了,也不是所有浏览器都全面引入了ES2015。

因此,正式开始研发应用之前,一定要熟悉掌握ES5和ES2015。目前,ES2015是相对较新的。不少开源代码和Node.js应用还是用ES5写的。所以说,如果你想在浏览器控制台中进行漏洞调试,那应该还不能使用ES2015句法。不过,下面我们即将要介绍的,不少现代库中的文件编制和代码示例,却是用ES2015写的。在Grab,我们选择使用ES2015来享受JavaScript句法更新升级之后,所带来的超高生产能力。

简单地说,在开发应用之前,你至少需要花上一两天的时间,来回顾ES5、探索ES2015。当然了,最好是能够花上三四天的时间,来进一步研究其中的句法。

NO.3 用户界面——React

如果非要说出近年来前端系统引入频率最高的JavaScript 项目,那应该是React。React是由Facebook工程师创建并且开源的一个库。开发人员可以在这个库中,为自家网页界面编写不同组件并且进行结合。

React带来了不少激进创意,鼓励开发人员从各个角度重新思考,以便找到最佳方式。多年来,网页开发人员一直认为,HTML、JavaScript和CSS应该分开来写。但React却是恰恰相反,它鼓励你在JavaScript当中编写HTML和CSS。虽然一开始听上去,这是个疯狂的想法,但尝试过后就会有全新的发现。具体说来,React有如下几个特征:

1.阐述性:说白了,就是你只需要描述自己的想法,不需要落实。以往开发人员都必须要通过一系列步骤,来操控DOM才可以让应用从一种状态变为另一种状态。但在React当中,你只需要简单地在各个组件中改变状态就行。因为整个呈现出来的结果,会根据各个组件的状态,自动进行更新和升级。

2.可维护性:通过改变各个组件来改变整体,能够保证重复使用。我们发现,定义一个组件的属性和部类,能够让React代码自行完成文件编制。这样一来,读者就能够清楚地知道使用该组件都需要些什么。

3.高效能性:我们只知道React使用的是虚拟DOM,却不知道它为什么要使用虚拟DOM。现代JavaScript引擎的运行速度非常快,无论是从DOM中读取内容,还是向DOM写内容,都需要花费很长时间。但是,React却提供了一种速度较快的虚拟表现形式。

4.易学习性:React学起来非常简单,需要掌握的API比较少,而且这些API基本都是保持不变的。作为最大的社区之一,React拥有众多能够灵活使用的工具和开源用户界面组件,而且可以直接在网上找到大量学习资源。

图二

NO.4 状态管理——Flux或Redux

随着应用中的内容越来越多,你会发现应用的结构也变得越来越乱。有可能应用中的各个组件需要分享和显示共同数据,但上面介绍的React却无法找到一种合适的方式来解决这个问题。毕竟,React只负责处理视图层面的问题,并不能处理其他层面的结构问题,比如说在MVC模式当中,除了视图以外的模型和控制器层面的问题。为此,Facebook就开发了一套叫做Flux的应用架构。它在充分利用单向数据流的基础之上,补充和完善了React的可组合视图组件。简单说来,Flux架构有以下几个特征:

1.单向数据流:提高应用的可预测性,能够轻松掌握更新升级的具体进度;

2.职责和范围的分离:Flux架构中的每一部分都有特定的责任,彼此之间是丝毫不挂钩的;

3.能够与表述性编程完美配合:无需特别明示不同状态之间的转换视图就可以针对视图进行升级。

鉴于从本质上来讲,Flux并不是一个框架,所以开发人员已经尝试过各种方法,以便将Flux模式付诸实践。因此,Redux就诞生了。Redux结合了Flux、Command模式和Elm架构的创意,事实上就是一个状态管理库。现如今的开发人员,都习惯性地将其与React配套使用。具体说来,Redux有以下几个核心概念:

1.应用的状态都是利用单一的旧式JavaScript对象来描述的;

2.可以通过调度某一行为操作来改变状态;

3.缩减器或者折叠器能够利用当下的状态和行为操作,来生产新的状态。

当然了,虽然概念听上去比较简单,但功能却非常强大,它们能够让应用:

1.由用户提出在服务器上完成状态改变;

2.在应用当中追踪、登录和回溯所有变化;

3.更加便利地使用撤销和重做功能。

NO.5 带有风格的编码——CSS Module

所谓CSS就是层叠样式表,专门指用来描述HTML元素样式的规则。想要写出比较好的CSS,是件很困难的事情,一般需要多年经验和不断尝试。其实,一开始,CSS是专门为网页文件设计的,并不是为网页应用设计的,更别说偏向于组件架构的网页应用了。因此,经验丰富的前端开发人员就想尽一切办法,希望能够指导人们利用SMACSS和BEM来为那些比较复杂的项目写出组织性和条理性较强的CSS。

如果在此之前,你从来没有接触过CSS,那么Codecademy网站上的HTML & CSS课程,可以在很大程度上帮助你学习入门知识。随后,你可以了解有关Sass预处理程序的知识。Sass预处理程序是CSS语言的延伸,在之前的基础之上进行了句法完善。总而言之,你可以花上三四天的时间,先去了解CSS方法,再去学习CSS模块,尽量综合利用SMACSS或BEM方法以及CSS模块,来开发出带有自己风格的应用。

NO.6 可维护性

与编写代码相比,人们用眼睛看代码的次数更多。在Grab这种规模较大的公司更是如此,各位工程师都在忙着不同的项目。因此,我们非常看重编程代码的可读性、可维护性和稳定性。当然了,想要同时保证这三点,也是有方法可以利用的,比如说广泛测试、一致的编程风格,以及类型检查。

NO.7 测试——Jest + Enzyme

Jest是由Facebook开发的一个测试库,主要目的就是减少测试过程中可能出现的问题。在Facebook进行的项目当中,它提供了非常顺畅的使用体验。不同测试可以同时进行,以便缩短拿到结果的时间。在默认情况和监测模式下,只会运行那些针对发生了改变的文件的测试。而其中,我们特别喜欢的一个功能,叫做Snapshot Testing,即快照测试。Jest能够将React组件和Redux状态生成的结果保存下来,并且还能够以序列化文件的形式保存下来。这样一来,就避免了手动操作。

图六

虽然React也有测试功能,但是Facebook开发的Enzyme能够通过一个类似jQuery的API,让你更加方便地生成、维护和操作React组件的产出结果。经验丰富的开发人员,会推荐你使用Enzyme来测试React组件。

总之,Jest和Enzyme能够在简化前端测试代码编写过程的同时,为开发人员带来更多乐趣。这样一来,开发人员也就会更加愿意编写测试代码。不仅如此,由于职责和界面定义明确,React组件以及Redux的行为操作和缩减器,测试起来也就会更加容易。

NO.8 检查JavaScript出现的问题 — ESLint

所谓linter,就是一种对编程代码进行静态分析并且及时找出问题的工具,能够在预防错误出现的同时,保证同一种编码风格。而ESLint就是其中一种检查JavaScript编码问题的工具,具有比较明显的扩张性和定制性。如果开发团队想要编写带有个别风格的代码,那也可以自行编写查错规则。

在大多数情况下,使用ESLint就像在项目文件夹里修改配置文件一样简单。如果你不自己写的话,那要学的知识并没有多少。你只要在出错时及时发现,然后找到合适的解决方法。

1、猎云网原创文章未经授权转载必究,如需转载请联系官方微信号进行授权。
2、转载时须在文章头部明确注明出处、保留官方微信、作者和原文超链接。如转自猎云网(微信号:lieyunjingxuan
)字样。
3、猎云网报道中所涉及的融资金额均由创业公司提供,仅供参考,猎云网不对真实性背书。
4、联系猎云,请加微信号:jinjilei
相关阅读
推荐阅读
{{item.author_display_name}}
{{item.author_display_name}}
{{item.author_user_occu}}
{{item.author_user_sign}}
×