翻译于 2017/07/04 15:58
开发团队必备的现代前端开发指南 已翻译 100%
加载中
前端开发从未像现在这样复杂和令人兴奋。基本上每隔一天就会出现新的工具、库、框架和插件。要学习的东西越来越多。
好在我们的 Grab web 团队（译者注：Grab 是东南亚的一家打车平台）一直遵循着最新、最佳的方法，并将现代 JavaScript 生态系统纳入了我们的 web 应用。
这样也导致，我们的新员工或后端工程师，他们可能会不熟悉这些现代 JavaScript 生态系统，为了在 web app 中完成某项功能或修复某些 bug , 他们不得不去学习，最终被不断涌现的新事物所“淹没”。
为了指导他们快速接受前沿技术的演进，轻松熟悉生态系统，并尽可能快地输出代码。我们发布了这样一本学习指南，介绍我们做了什么和为什么要这样做。
本指南的灵感来源于“治疗 JavaScript 疲劳的学习计划”（A Study Plan to Cure JavaScript Fatigue），并在基于目前最适合 Grab 发展的基础上，对下面这些适用于前端开发的库和框架进行推荐。
文中还会解释选择某某库和某某框架的原因，并提供学习资源链接，以便读者能够自由选择。以及在某些情况下可能效果更好的替代选择，以供参考和进一步自我探索。
如果您非常熟悉前端开发，并且一直有跟进最新的技术，本指南可能对您用处不大。它偏向针对前端新手。如果您的公司正在探索现代 JavaScript 堆栈，您会发现本指南可能对您的公司也有用！
请注意，本指南也有在 GitHub 上发布，我们将定期更新。
前提
-
对核心编程概念有一定理解。
-
可使用基本的命令行操作并熟悉源码版本控制系统（如 Git ）。
-
有 Web 开发经验。 使用 Ruby on Rails、Django、Express 等框架构建过 Web 应用。
-
了解 Web 工作原理。 熟悉 Web 协议和约定，如 HTTP 和 RESTful API 。
涉及内容:
-
单页应用（Single-page Apps）
-
现代 JavaScript（ New-age JavaScript）
-
用户界面（User Interface）
-
状态管理（State Management）
-
规则编码（Coding with Style）
-
测试（Testing）
-
JavaScript 检测（Linting JavaScript）
-
CSS 检测（Linting CSS）
-
类型（Types）
-
系统构建（Build System）
-
包管理（Package Management）
-
持续集成（Continuous Integration）
-
托管（Hosting）
-
部署（Deployment）
如果您已有相关经验，可选择跳过部分内容。
翻译于 2017/07/04 16:30
单页应用（SPAs）
Web 开发人员现在将其构建的产品称为 Web 应用，而不是网站。虽然这两个术语之间没有严格的区别，但 Web 应用往往是高度互动和动态的，允许用户执行操作并接收响应。
传统上，浏览器从服务器接收 HTML 并呈现。当用户定位到另一个 URL 时，需要进行全页刷新，并且服务器为新页面发送新的新 HTML 。这被称为服务器端渲染。
然而，在现代的 SPAs 中，已被客户端渲染取代。浏览器从服务器加载初始页面，以及整个应用所需的脚本（框架、库、应用代码）和样式表。当用户定位到其他页面时，不会触发页面刷新。通过 HTML5 History API 更新页面的 URL 。浏览器通过 AJAX 请求检索新页面（通常以 JSON 格式）所需的新数据。然后， SPA 通过 JavaScript 动态更新已经在初始页面加载中已经下载好的新页面。这种模式类似于原生手机应用的工作原理。
优势:
-
应用感更强，用户不会看到由于全页刷新导致页面之间的闪烁。
-
对服务器进行的 HTTP 请求较少，因为不必为每个页面加载重复下载相同的资料。
-
明确分离客户端与服务器之间的关系；可以轻松地为不同的平台构建新的客户端而无需修改服务器代码。只要 API contract 不被破坏，还可以独立地修改客户机和服务器上的技术栈。
劣势:
-
需加载多个页面所需的框架、应用代码和初始页面加载需要的成本。
-
在服务器上会有一个额外的步骤，即将其配置为将所有请求被路由到单个入口点，并允许客户端路由从那里接管。
-
SPAs 依赖于 JavaScript 来呈现内容，但并不是所有的搜索引擎在爬行期间都会执行 JavaScript ，而且可能会在您的页面上看到空的内容。这在无意中会影响应用的 SEO 。
翻译于 2017/07/05 10:56
虽然传统的服务器端呈现的应用仍然是可行的选择，但是由于客户端和服务器代码可以独立开发和发布，因此清晰明了的客户端和服务器分离可以更好地扩展到较大的工程团队。
由于 Web 开发人员构建的是应用而不是页面，因此客户端 JavaScript 架构变得越来越重要。在服务器端呈现的页面中，通常使用 jQuery 的代码片段将用户交互性添加到每个页面。但是，当构建大型应用程序时，光有 jQuery 还不够。毕竟，jQuery 主要是一个用于 DOM 操作的库，它不是框架；无法为应用定义清晰的结构和组织。
JavaScript 框架往往被构建以便在 DOM 上提供更高级别的抽象，从而允许将内存中的状态保留在 DOM 之外。使用框架还带来了一些适合应用的重用建议的推荐和最佳做法的好处。团队中不熟悉代码基础但具有框架经验的新工程师将会更容易理解代码，因为它是以一种他们熟悉的结构组织起来的。流行框架通常会有很多教程和指南，利用同事和社区的知识和经验，可帮助新工程师快速上手。
学习链接
翻译于 2017/07/05 11:08
现代 JavaScript
在深入了解构建 JavaScript Web 应用的各个方面之前，熟悉 Web-JavaScript 或 ECMAScript 的语言非常重要。 JavaScript 是一种非常通用的语言，可以用它来构建 Web 服务器，也可以构建原生移动应用和桌面应用。
在 2015 年之前，最后一次重大更新是 2011 年发布的 ECMAScript 5.1 。然而，近年来，JavaScript 在短时间内突然出现大幅度改善。2015 年，ECMAScript 2015（以前称为 ECMAScript 6 ）发布，引入大量的语法结构，使得编写代码不再那么笨重。如果你对这段历史感兴趣，Auth0 有写一篇关于 history of JavaScript 的文章。直到现在，也并非所有的浏览器都完全实现了 ES2015 规范。类似 Babel 这类的工具使开发人员能够在其应用中编写 ES2015 ，随后 Babel 将其转换为 ES5 以兼容浏览器。
熟悉 ES5 和 ES2015 都至关重要。 ES2015 现在依然很新，很多开源代码和 Node.js 应用仍然是使用 ES5 编写。如果您是在浏览器控制台中进行调试，可能无法使用 ES2015 语法。另一方面，稍后将介绍的许多现代库的文档和示例代码都是用 ES2015 写的。在 Grab ，我们使用 babel-preset-env 来享受 JavaScript 的不断改进的语法来提升生产力。 babel-preset-env 能智能地确定哪些 Babel 插件是必需的（哪些新的语言特性不被支持，需被翻译），以让浏览器更好地对 ES 的各种语言特性提供原生支持。如果您喜欢使用已经稳定的语言特性，那么 babel-preset-stage-3（一个完全可以在浏览器中实现的规范）可能会更适合您。
花一两天的实际去修正 ES5 并摸索 ES2015 。 ES2015 中使用最多的特性包括“箭头函数”、“Classes”（语法糖）、“字符串模板”、“解构”，“Default/Rest/Spread 操作符”以及“导入和导出模块”。
预估时间: 3–4 天. 可在学习其他库并尝试构建应用时学习/查找语法。
学习链接
翻译于 2017/07/05 11:36
用户界面 — React
如果要说近年来给前端生态带来风暴式影响的 JavaScript 项目，当属 React 。 React 是一个由 Facebook 开发的库。 在 React 中，开发人员为其 Web 界面编写组件并将其组合在一起。
React 带来了许多激进的想法，并鼓励开发人员重新思考最佳实践。 多年来，Web 开发人员被灌输分开编写 HTML、JavaScript 和 CSS 的理念 ，但 React 恰恰相反，鼓励在 JavaScript 中编写 CSS 。这听起来很疯狂，但在尝试之后，会发现其实并不奇怪。作为影响前端发展正转向基于组件的发展模式的关键，React 的特点如下：
-
声明式 — 描述想在 View 中看到的，而不是如何实现它。在 jQuery 时代，开发人员必须提出一系列的步骤来操纵 DOM ，从一个应用状态到下一个应用状态。在 React 中，只需更改组件中的状态，View 将根据状态进行更新。也可通过查看 render（）方法中的标记来确定组件的外观。
-
函数式— View 是基于 state 和 props 的纯函数。多数情况下，React 组件由 props（外部参数）和 state（内部数据）定义。相同的 props 和 state ，会构成相同的视图。纯函数易于测试，功能组件也大多相同。由于组件的界面定义良好，可通过提供不同的 props 和 state 来对组件进行测试并比较，从而轻松完成测试。
-
可重用性 — 以基于组件的方式编写 View 就是鼓励重用性。我们发现定义一个组件的 propTypes 能让 React 代码自我记录，以让用户可以清楚地知道使用该组件需要什么。此外，您的视图和逻辑在组件中是独立的，不会受到影响也不影响其他组件。只需向组件提供相同的 props ，就可轻松地在大规模重构过程中 shift 组件。
-
高性能— 您可能已经听说 React 使用的是 virtual DOM（请勿与 shadow DOM 混淆），并且在状态发生变化时重新呈现所有内容，那你知道为什么需要 virtual DOM 吗？虽然现代 JavaScript 引擎很快，但从 DOM 读取和写入速度很慢。 React 在内存中保持 DOM 的轻量级虚拟渲染。重新渲染一切本身就是一句有误导性的术语。在 React 中它实际上是指重新渲染 DOM 的内存中呈现，而不是实际的 DOM 本身。当组件的底层数据发生变化时，将创建一个新的虚拟呈现，并与先前的进行比较。然后将差异（所需的最小变化集）修补到真正的 browser DOM 。
-
易于学习 — 学习 React 非常简单。与 this 相比，React API surface 相对较小; 只有很少的几个 API 可以学习，并且不会经常变化。React 社区是最大的社区之一，同时也是一个充满活力的工具生态系统，有开放的 UI 组件，以及一大批在线资源可供学习。
-
优秀的开发体验 —有许多工具可以改善 React 的开发体验。React Developer Tools 是一个浏览器扩展，可检查组件，查看和操作其 props 和 state 。使用 webpack 进行热更新可让您在浏览器中查看代码的更改，而无需刷新浏览器。Facebook 还提供了一个 codemod 脚本，以帮助您在有库更新时将代码迁移到新的 API ，使升级过程相对无痛。
翻译于 2017/07/06 11:34
经过多年发展，其实也出现了比 React 更出色的新视图库。React 可能不是最快的库，但在生态系统、整体使用体验和效率方面，它仍然是最强大的库之一。 Facebook 正在通过重写基础协调算法，力图使 React 更快。 React 让我们知道如何编写更好的代码和更好维护的 Web 应用，并让我们成长为更好的工程师。
我们建议您在 React 主页上浏览一个关于建立 tic-tac-toe 游戏的教程，以先了解 React 是什么及能做什么。想要进一步深入学习，可查看 React Router 的创始人、React 社区专家发布的高级免费课程“ React Fundamentals ”，里面还涵盖了 React 官方文档未写入的更高级的概念。Facebook 的 Create React App 是以最小配置支持 React 项目的工具，也强烈建议在您新的 React 项目中启用。
React 是一个库，而不是一个框架，并不处理视图层以下的层次 - 应用状态。后面会说到。
估计时间: 3–4 天. 尝试构建类似待办事项列表这种简单的项目，去 Hacker News 克隆一些纯 React 经验。 你会慢慢收获和成长，期间可能会面临一些也许无法用 React 解决的问题，下面的主题会讲到…
学习链接
替代方案
翻译于 2017/07/06 10:58
状态管理 — Flux/Redux
随着您的应用越来越大，可能会发现应用结构变得有点混乱。应用中的组件可能要共享和显示常见数据，但 React 中却没有很优雅的方式来处理这些情况。 毕竟，React 只是视图层，它并没有明确规范如何在传统的 MVC 范例中构建应用的其他层，如 model 和 controller 。为了解决这个问题，Facebook 发明了 Flux ，一款应用架构，通过使用单向数据流来补充 React 的可组合视图组件。点此可阅读关于 Flux 如何运作的介绍。 总而言之，Flux 范式（Flux pattern）具有以下特点：
-
单向数据流 — 使应用更可预测，以轻松跟踪更新。
-
关注点分离 — Flux 架构中的各个部分都有明确的职责，并且高度分离。
-
适用于声明式编程 — store 可将更新发送到 view ，而无需指定如何在状态之间转换视图。
由于 Flux 本身不是一个框架，开发人员尝试提出各种 Flux 范式的实现。最后，出现了一个最亮眼的赢家，那就是 Redux 。 Redux 将来自 Flux、Command pattern 和 Elm 架构的想法融合在一起，已然成为目前 React 开发者最常使用的状态管理库。其核心概念是：
-
应用状态（state）是由单个普通的 JavaScript 对象（POJO）描述。
-
调度一个 action (也是 POJO) 来修改状态。
-
Reducer 是一种纯函数，它利用当前状态和动作来产生新的状态。
这些概念听起来很简单，但功能强大，因为它们使应用能够：
-
在服务端呈现状态，在客户端启动
-
跟踪、记录和回溯整个应用的更改
-
轻松执行撤消和重做
Redux 创始人 Dan Abramov 非常仔细地为 Redux 撰写了详细的文档，同时为初阶和高阶的 Redux 使用者创建了全面的视频教程。这些是学习 Redux 非常有用的资源。
翻译于 2017/07/06 14:22
View 和 State 相结合
虽然 Redux 并不是一定要和 React 一起使用，但我们强烈推荐。 React 和 Redux 有很多相似的理念和特点：
-
函数式组合范式 — React 由 views (纯函数) 构成，而 Redux 由 pure reducers (也是纯函数) 构成。在指定输入组合时，输出都是可预见的。
-
易于 Reason About — 这个词您可能听过很多次，但实际上是什么意思？我们将其解释为对代码的控制和理解 - 代码以我们期望的方式行事，当有问题时，可以轻松发现问题。据已有的经验，React 和 Redux 会使调试更简单。由于数据流是单向的，因此跟踪数据流（服务器响应、用户输入事件）更容易，并且可以直接定位问题发生在哪一层。
-
结构分层 — 应用/ Flux 架构中的每一层都是一个纯函数，具有明确的职责。为纯函数编写测试相对容易。
-
开发体验 — 在开发过程中，诸如 Redux DevTools 之类的开发工具，可帮助调试和检查应用。
此外，您的应用可能需要处理异步调用，例如进行远程 API 请求。redux-thunk 和 redux-saga 就是用来解决这些问题的。理解他们可能需要一些时间，因为需要理解函数编程和生成器。建议只在有需要的时候处理它。
react-redux 是一个官方的封装库，非常简单易学。
预估时间: 4 days. 下面的 Egghead 课程可能有点耗时，但值得花时间。 学完 Redux 后，您可以尝试将其纳入已构建好的 React 项目中。 Redux 是否解决了您在纯 React 中遇到的一些状态管理问题？
学习链接
替代方案
翻译于 2017/07/06 14:43
规则编码— CSS Modules
CSS（层叠样式表）是描述 HTML 元素布局的规则。写好 CSS 很难。编写可维护和可扩展的 CSS ，通常需要多年的经验和积累。具有全局命名空间的 CSS 基本上是为 Web 文档而设计的，并不是真正用于支持组件架构的 Web 应用。因此，经验丰富的前端开发人员总结了设计方法学，指导人们如何为复杂项目编写合理的 CSS ，例如使用 SMACSS、BEM、SUIT CSS 等。
CSS 方法学所带来的样式封装是由公约和纲要强制执行的，打破了开发者不遵守约定的时代。
正如您可能已经意识到的那样，前端生态系统的工具十分丰富，甚至趋于饱和，因此当发现已经有一些工具来分块解决大规模编写 CSS 问题时，应该也不会感到奇怪。 “At scale” 意味着有大量开发人员正在开展同一个大型项目，并触及相同的样式表。目前在 JS 中编写 CSS 还没有社区认可的最佳方式 ，我们希望有一天，能像 Redux 一样，在所有的 Flux 实现中出现赢家。目前，我们在使用的是 CSS Modules 。 CSS modules 是对现有 CSS 的改进，旨在解决 CSS 中全局命名空间的问题；它允许编写默认情况下的局部样式并封装到组件中。使用 CSS modules ，大型团队可以编写模块化和可重用的 CSS ，而不用担心冲突或覆盖应用的其他部分。不过，CSS modules 最终仍然需要编译成浏览器可识别的正常全局命名空间的 CSS ，因此学习和理解原始 CSS 仍然很重要。
如果您是一个 CSS 初学者，Codecademy 的 HTML & CSS 课程将是不错的开始。然后，攻读 Sass preprocessor ，这是 CSS 语言的扩展，在基础上增加了语法改进，并鼓励样式可重用性。再去研究上面提到的 CSS 方法学，CSS modules 放到最后去学。
预估时间: 3–4 days. 尝试使用 SMACSS / BEM 理论 和/或 CSS modules 来设计应用。
学习链接
替代方案
翻译于 2017/07/06 15:14
加载中
删除一条评论
评论删除后，数据将无法恢复
深圳市奥思网络科技有限公司版权所有
粤ICP备12009483号
评论(4)