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

jopen 4年前
   <p style="text-align: center;"><a href="/misc/goto?guid=4958190462259388048" title="程序员"><img alt="关于前端开发,500位工程师总结出了8款“最牛”编程语言工具" src="https://simg.open-open.com/show/a08e318ff2ebc4ad30d5e6ff0cd93701.jpg" /></a></p>    <p>过去,前端开发不像现在这么复杂,也不像现在这么令人兴奋。毕竟每天都有新工具、新框架和新插件出现,需要我们不断学习。所幸,我们 Grab 的网页设计团队一直都走在前端开发的前沿,已经在自家网页应用中融入了现代 JavaScript 系统。</p>    <p>但是,新员工和后端工程师可能还不太了解现代 JavaScript 系统。因此,在研发新功能或者修复漏洞时,会有些吃力。这时,公司就必须指导他们学习前端开发知识,帮助他们减少使用系统时遇到的问题,以最快的速度把代码介绍给用户。</p>    <p>在这份学习指南中,我们以 Grab 目前使用的工具为基础,从前端开发的每个方面出发,向大家推荐了几种值得学习的库和框架。</p>    <p><strong>使用须知</strong></p>    <p>1. 熟练掌握核心编程概念;</p>    <p>2. 熟悉基本命令行操作和 Git 这类源代码本版控制系统;</p>    <p>3. 拥有网页开发经验,利用 Ruby on Rails 和 Django 这类框架开发过服务器端渲染的网页应用;</p>    <p>4. 了解网页运作过程,熟悉 HTTP 这类网络协议。</p>    <p>下面,我们就开始详细介绍:</p>    <p><strong>NO.1 单页面应用程序(即 Single-page App,以下简称 SPA)</strong></p>    <p>现如今,网页开发人员不再把所开发的产品叫做网站,而是叫做网页应用。虽然二者没有严格区分,但后者的交互性和动态性更强,能让用户自行操作并且收到特定回应。</p>    <p>以前,浏览器会收到来自服务器的 HTML。当用户访问另一个 URL 地址时,需要全页刷新,服务器也会发送全新 HTML。这就是所谓的服务器端渲染。</p>    <p>但是,在现代 SPA 中,客户端渲染已经取代了服务器端渲染。浏览器会先从服务器上加载出最初图像,和包括框架、库和应用代码在内的脚本,以及整个应用所需的样式表。当用户访问其他页面时,页面将不会进行整体刷新,而是通过 HTML5 History API 对页面地址进行更新。以 JSON 形式呈现出来的新页面所需的新数据,将会通过向服务器发出的 AJAX 请求,由浏览器检索进行检索。接着,SPA 会通过原先在页面中下载好的 JavaScript,来对页面数据进行动态更新。</p>    <p><strong>SPA 的优点</strong></p>    <p>1. 应用针对用户操作给出的反应更加灵敏,不会由于页面整体刷新而出现闪退;</p>    <p>2. 向服务器发送的 HTTP 请求减少,无需在每一页进行重复下载;</p>    <p>3. 用户和服务器划分明确,无需修改服务器代码就可以轻松为新用户创建不同平台。另外,只要不违背 API 规则,还可以分别对用户和服务器的技术堆栈进行修改。</p>    <p><strong>SPA 的缺点</strong></p>    <p>1. 最开始的加载任务较重,包括框架和应用代码等;</p>    <p>2. 需要对服务器进行额外的配置操作,让它将所有请求汇集到同一个进入点;</p>    <p>3. SPA 依靠 JavaScript 来呈现内容,但并不是所有搜索引擎都能够在爬虫过程中执行 JavaScript。这一点,无疑会对应用的搜索引擎优化带来负面影响。</p>    <p><strong>NO.2 新时代 JavaScript</strong></p>    <p>在深入研究开发 JavaScript 网页应用的各个方面之前,首先要熟悉网络语言,即 JavaScript 或者 ECMAScript。JavaScript 用途非常广泛,可以用来开发网页服务器、本机移动应用和桌面应用。</p>    <p>在 2015 年之前,最近的一次网络语言更新,是 2011 年的 ECMAScript 5.1。但是最近几年,JavaScript 突然取得了不少进展。2015 年,ECMAScript 2015(之前叫做 ECMAScript 6)问世。与此同时,大量全新句法结构的出现,也使得代码编写更加简单。当然了,也不是所有浏览器都全面引入了 ES2015。</p>    <p>因此,正式开始研发应用之前,一定要熟悉掌握 ES5 和 ES2015。目前,ES2015 是相对较新的。不少开源代码和 Node.js 应用还是用 ES5 写的。所以说,如果你想在浏览器控制台中进行漏洞调试,那应该还不能使用 ES2015 句法。不过,下面我们即将要介绍的,不少现代库中的文件编制和代码示例,却是用 ES2015 写的。在 Grab,我们选择使用 ES2015 来享受 JavaScript 句法更新升级之后,所带来的超高生产能力。</p>    <p>简单地说,在开发应用之前,你至少需要花上一两天的时间,来回顾 ES5、探索 ES2015。当然了,最好是能够花上三四天的时间,来进一步研究其中的句法。</p>    <p><strong>NO.3 用户界面——React</strong></p>    <p>如果非要说出近年来前端系统引入频率最高的 JavaScript 项目,那应该是 React。React 是由 非死book 工程师创建并且开源的一个库。开发人员可以在这个库中,为自家网页界面编写不同组件并且进行结合。</p>    <p>React 带来了不少激进创意,鼓励开发人员从各个角度重新思考,以便找到最佳方式。多年来,网页开发人员一直认为,HTML、JavaScript 和 CSS 应该分开来写。但 React 却是恰恰相反,它鼓励你在 JavaScript 当中编写 HTML 和 CSS。虽然一开始听上去,这是个疯狂的想法,但尝试过后就会有全新的发现。具体说来,React 有如下几个特征:</p>    <p><strong>1. 阐述性:</strong>说白了,就是你只需要描述自己的想法,不需要落实。以往开发人员都必须要通过一系列步骤,来操控 DOM 才可以让应用从一种状态变为另一种状态。但在 React 当中,你只需要简单地在各个组件中改变状态就行。因为整个呈现出来的结果,会根据各个组件的状态,自动进行更新和升级。</p>    <p><strong>2. 可维护性:</strong>通过改变各个组件来改变整体,能够保证重复使用。我们发现,定义一个组件的属性和部类,能够让 React 代码自行完成文件编制。这样一来,读者就能够清楚地知道使用该组件都需要些什么。</p>    <p><strong>3. 高效能性:</strong>我们只知道 React 使用的是虚拟 DOM,却不知道它为什么要使用虚拟 DOM。现代 JavaScript 引擎的运行速度非常快,无论是从 DOM 中读取内容,还是向 DOM 写内容,都需要花费很长时间。但是,React 却提供了一种速度较快的虚拟表现形式。</p>    <p><strong>4. 易学习性:</strong>React 学起来非常简单,需要掌握的 API 比较少,而且这些 API 基本都是保持不变的。作为最大的社区之一,React 拥有众多能够灵活使用的工具和开源用户界面组件,而且可以直接在网上找到大量学习资源。</p>    <p style="text-align:center"><img alt="关于前端开发,500位工程师总结出了8款“最牛”编程语言工具" src="https://simg.open-open.com/show/901744d84b18734cdfb6f8f88946fbb1.gif" /></p>    <p><strong>NO.4 状态管理——Flux 或 Redux</strong></p>    <p>随着应用中的内容越来越多,你会发现应用的结构也变得越来越乱。有可能应用中的各个组件需要分享和显示共同数据,但上面介绍的 React 却无法找到一种合适的方式来解决这个问题。毕竟,React 只负责处理视图层面的问题,并不能处理其他层面的结构问题,比如说在 MVC 模式当中,除了视图以外的模型和控制器层面的问题。为此,非死book 就开发了一套叫做 Flux 的应用架构。它在充分利用单向数据流的基础之上,补充和完善了 React 的可组合视图组件。简单说来,Flux 架构有以下几个特征:</p>    <p>1. 单向数据流:提高应用的可预测性,能够轻松掌握更新升级的具体进度;</p>    <p>2. 职责和范围的分离:Flux 架构中的每一部分都有特定的责任,彼此之间是丝毫不挂钩的;</p>    <p>3. 能够与表述性编程完美配合:无需特别明示不同状态之间的转换视图就可以针对视图进行升级。</p>    <p>鉴于从本质上来讲,Flux 并不是一个框架,所以开发人员已经尝试过各种方法,以便将 Flux 模式付诸实践。因此,Redux 就诞生了。Redux 结合了 Flux、Command 模式和 Elm 架构的创意,事实上就是一个状态管理库。现如今的开发人员,都习惯性地将其与 React 配套使用。具体说来,Redux 有以下几个核心概念:</p>    <p>1. 应用的状态都是利用单一的旧式 JavaScript 对象来描述的;</p>    <p>2. 可以通过调度某一行为操作来改变状态;</p>    <p>3. 缩减器或者折叠器能够利用当下的状态和行为操作,来生产新的状态。</p>    <p>当然了,虽然概念听上去比较简单,但功能却非常强大,它们能够让应用:</p>    <p>1. 由用户提出在服务器上完成状态改变;</p>    <p>2. 在应用当中追踪、登录和回溯所有变化;</p>    <p>3. 更加便利地使用撤销和重做功能。</p>    <p><strong>NO.5 带有风格的编码——CSS Module</strong></p>    <p>所谓 CSS 就是层叠样式表,专门指用来描述 HTML 元素样式的规则。想要写出比较好的 CSS,是件很困难的事情,一般需要多年经验和不断尝试。其实,一开始,CSS 是专门为网页文件设计的,并不是为网页应用设计的,更别说偏向于组件架构的网页应用了。因此,经验丰富的前端开发人员就想尽一切办法,希望能够指导人们利用 SMACSS 和 BEM 来为那些比较复杂的项目写出组织性和条理性较强的 CSS。</p>    <p>如果在此之前,你从来没有接触过 CSS,那么 Codecademy 网站上的 HTML & CSS 课程,可以在很大程度上帮助你学习入门知识。随后,你可以了解有关 Sass 预处理程序的知识。Sass 预处理程序是 CSS 语言的延伸,在之前的基础之上进行了句法完善。总而言之,你可以花上三四天的时间,先去了解 CSS 方法,再去学习 CSS 模块,尽量综合利用 SMACSS 或 BEM 方法以及 CSS 模块,来开发出带有自己风格的应用。</p>    <p><strong>NO.6 可维护性</strong></p>    <p>与编写代码相比,人们用眼睛看代码的次数更多。在 Grab 这种规模较大的公司更是如此,各位工程师都在忙着不同的项目。因此,我们非常看重编程代码的可读性、可维护性和稳定性。当然了,想要同时保证这三点,也是有方法可以利用的,比如说广泛测试、一致的编程风格,以及类型检查。</p>    <p><strong>NO.7 测试——Jest + Enzyme</strong></p>    <p>Jest 是由 非死book 开发的一个测试库,主要目的就是减少测试过程中可能出现的问题。在 非死book 进行的项目当中,它提供了非常顺畅的使用体验。不同测试可以同时进行,以便缩短拿到结果的时间。在默认情况和监测模式下,只会运行那些针对发生了改变的文件的测试。而其中,我们特别喜欢的一个功能,叫做 Snapshot Testing,即快照测试。Jest 能够将 React 组件和 Redux 状态生成的结果保存下来,并且还能够以序列化文件的形式保存下来。这样一来,就避免了手动操作。</p>    <p style="text-align:center"><img alt="关于前端开发,500位工程师总结出了8款“最牛”编程语言工具" src="https://simg.open-open.com/show/2ce5d6ae5db23c2411cd3b6010f0705f.gif" /></p>    <p>虽然 React 也有测试功能,但是 非死book 开发的 Enzyme 能够通过一个类似 jQuery 的 API,让你更加方便地生成、维护和操作 React 组件的产出结果。经验丰富的开发人员,会推荐你使用 Enzyme 来测试 React 组件。</p>    <p>总之,Jest 和 Enzyme 能够在简化前端测试代码编写过程的同时,为开发人员带来更多乐趣。这样一来,开发人员也就会更加愿意编写测试代码。不仅如此,由于职责和界面定义明确,React 组件以及 Redux 的行为操作和缩减器,测试起来也就会更加容易。</p>    <p><strong>NO.8 检查 JavaScript 出现的问题 — ESLint</strong></p>    <p>所谓 linter,就是一种对编程代码进行静态分析并且及时找出问题的工具,能够在预防错误出现的同时,保证同一种编码风格。而 ESLint 就是其中一种检查 JavaScript 编码问题的工具,具有比较明显的扩张性和定制性。如果开发团队想要编写带有个别风格的代码,那也可以自行编写查错规则。</p>    <p>在大多数情况下,使用 ESLint 就像在项目文件夹里修改配置文件一样简单。如果你不自己写的话,那要学的知识并没有多少。你只要在出错时及时发现,然后找到合适的解决方法。</p>    <p>来自: <a href="/misc/goto?guid=4959009899093850933" id="link_source2">www.lieyunwang.com</a></p>