关于前端开发，500位工程师总结出了8款“最牛”编程语言工具
jopen 7年前
<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>