原帖可以在Github上找到。未来的学习指南将在那里更新。如果你喜欢你正在阅读的东西，给它打一颗星吧!

公司是东南亚(SEA)领先的运输平台，我们的使命是利用公司最新的技术和人才，推动SEA前进。截至2017年5月，我们每天处理230万次乘车，我们正在快速增长和招聘。

为了跟上Grab惊人的增长，我们的网络团队和网络平台也必须增长。幸运的是，或者不幸的是，在Grab上，web团队已经跟上了最新的最佳实践，并在我们的web应用程序中集成了现代JavaScript生态系统。

的结果是,我们的新员工或后端工程师,他们并不一定了解现代JavaScript的生态系统,可能会感到被接二连三的新事物,他们必须学习只是为了完成他们的特性或web应用程序的bug修复。前端开发从未像今天如此复杂和令人兴奋的。每隔一天就会出现新的工具、库、框架和插件，还有很多东西需要学习。必须引导web团队的新成员接受前端的这种演化，学会轻松地在生态系统中导航，并尽可能快地向用户交付代码。我们提出了一个学习指南，介绍我们为什么要做我们所做的，以及我们如何处理前端的规模。

本学习指南的灵感来自于“治愈JavaScript疲劳的学习计划”，在某种意义上，我们建议针对前端开发的每个方面学习特定的库/框架，这些库/框架基于当前认为最适合于Grab的内容。我们解释了为什么选择某个库/框架/工具，并提供了学习资源的链接，让读者能够自己学习。对于其他用例可能更好的备选方案也提供了参考和进一步的自我探索。

如果您的公司也在探索现代的JavaScript堆栈，那么您可能会发现本学习指南对您的公司也很有用!您可以根据自己的需要随意调整它。我们将根据最新的工作和选择，定期更新本学习指南。

-抓取Web团队

必备条件

• 理解核心编程概念。
  
• 熟悉基本的命令行操作，熟悉源代码版本控制系统，如Git。
  
• 有网络开发经验。使用Ruby on Rails、Django、Express等框架构建了服务器端呈现的web应用程序。
  
• 了解网络是如何工作的。熟悉web协议和约定，如HTTP和RESTful api。
  

表的内容

• 单页面应用程序(温泉)
  
• 新时代的JavaScript
  
• 用户界面
  
• 状态管理
  
• 编码与风格
  
• 可维护性
  
• 测试
  
• LintingJavaScript
  
• LintingCSS
  
• 类型
  
• 构建系统
  
• 包管理
  

某些主题可以跳过，如果你有之前的经验。

单页面应用程序(SPA)

如今，Web开发人员将他们开发的产品称为Web应用程序，而不是网站。虽然这两个术语之间没有严格的区别，但web应用程序往往是高度交互和动态的，允许用户执行操作并接收其操作的响应。传统上，浏览器从服务器接收HTML并呈现它。当用户导航到另一个URL时，需要刷新整个页面，服务器为新页面发送新的HTML。这称为服务器端呈现。

但是在现代的SPAs中，使用的是客户端呈现。浏览器从服务器加载初始页面，以及整个应用程序所需的脚本(框架、库、应用程序代码)和样式表。当用户导航到其他页面时，不会触发页面刷新。页面的URL通过HTML5 History API更新。新页面所需的新数据(通常为JSON格式)由浏览器通过对服务器的AJAX请求检索。然后，SPA通过JavaScript动态地更新页面，它在初始页面加载时已经下载了这些数据。这种模式与本地移动应用程序的工作方式类似。

好处:

1. 这款应用的响应速度更快，而且由于页面刷新，用户在页面导航之间看不到flash。
   
2. 服务器需要的HTTP请求更少，因为对于每个页面加载，不必再次下载相同的资产。
   
3. 清晰地分离客户端和服务器之间的关注点;您可以轻松地为不同的平台(如移动平台、聊天机器人、智能手表)构建新客户端，而无需修改服务器代码。您还可以独立地修改客户端和服务器上的技术堆栈，只要API契约没有被破坏。
   

缺点:

1. 由于加载多个页面所需的框架、应用程序代码和资产，初始页面加载较重。
   
2. 在您的服务器上还需要完成另一个步骤，即将其配置为将所有请求路由到单个入口点，并允许客户端路由从那里接管。
   
3. SPAs依赖于JavaScript来呈现内容，但并不是所有搜索引擎都在爬行期间执行JavaScript，它们可能会在您的页面上看到空的内容。这无意中损害了你的应用程序2的SEO。
   

虽然传统的服务器端呈现应用程序仍然是一个可行的选择，但清晰的客户机-服务器分离更适合大型工程团队，因为客户机和服务器代码可以独立开发和发布。当我们有多个客户端应用程序访问同一个API服务器时，这一点在Grab上尤其明显。

随着web开发人员现在构建的是应用程序而不是页面，组织客户端JavaScript变得越来越重要。在服务器端呈现的页面中，通常使用jQuery片段向每个页面添加用户交互性。然而，在构建大型应用程序时，jQuery是不够的。毕竟，jQuery主要是一个用于DOM操作的库，它不是一个框架，它没有为你的应用定义一个清晰的结构和组织。

JavaScript框架的创建是为了在DOM上提供更高层次的抽象，允许您将状态保存在内存中，而不是DOM中。使用框架还可以重用推荐的概念和构建应用程序的最佳实践。团队中有框架经验但没有应用程序经验的新工程师会发现更容易理解代码，因为代码是按照他熟悉的结构组织的。流行的框架有很多教程和指南，利用来自同事和社区的知识和经验可以帮助新工程师快速上手。

研究的链接

• 单页应用:优点和缺点
  
• (R)Evolution Web开发
  

新时代的JavaScript

在深入了解构建JavaScript web应用程序的各个方面之前，熟悉web语言—JavaScript或ECMAScript非常重要。JavaScript是一种非常通用的语言，您还可以使用它来构建web服务器、本地移动应用程序和桌面应用程序。

在2015年之前，最后一次主要更新是2011年的ECMAScript 5.1。然而，近年来，JavaScript在短时间内突然出现了巨大的改进。2015年，ECMAScript 2015(以前称为ECMAScript 6)发布了，并引入了大量的语法结构，以减少编写代码时的笨拙。Auth0编写了很好的JavaScript历史。到目前为止，并不是所有的浏览器都完全实现了ES2015规范。Babel等工具使开发人员能够在他们的应用程序中编写ES2015，而Babel将这些工具转换为ES5，以便与浏览器兼容。

熟悉ES5和ES2015是至关重要的。ES2015仍然相对较新，很多开源代码和Node.js应用程序仍然是用ES5编写的。如果在浏览器控制台中进行调试，则可能无法使用ES2015语法。另一方面，我们将在下面介绍的许多现代库的文档和示例代码都是用ES2015编写的。在Grab，我们使用ES2015(与Babel Stage-0预置一起)来支持JavaScript未来提供的语法改进，到目前为止我们一直很喜欢它。

花一两天时间复习ES5和探索ES2015。ES2015中使用较多的特性包括“箭头和词法This”、“类”、“模板字符串”、“析构”、“缺省/Rest/Spread操作符”和“导入和导出模块”。

预计持续时间:3-4天。您可以像学习其他库并尝试构建自己的应用程序一样学习/查找语法。

研究的链接

• Learn ES5 on Codecademy
  
• Learn ES2015 on Babel
  
• Free Code Camp
  
• ES6 Katas
  
• You Don’t Know JS (Advanced content, optional for beginners)
  

用户界面-React

如果最近几年有任何JavaScript项目在前端生态系统中掀起了一场风暴，那就是React。React是一个由Facebook的聪明人创建的开源库。在React中，开发人员为他们的web界面编写组件并将它们组合在一起。

React带来了许多激进的想法，并鼓励开发人员重新思考最佳实践。多年来，web开发人员一直被教导要分别编写HTML、JavaScript和CSS。React的做法正好相反，建议您用JavaScript编写HTML和CSS。这听起来像一个疯狂的想法，但经过尝试后，它实际上并不像听起来那么奇怪。作为前端开发场景的原因正在向基于组件的开发范式转变。React的特点:

• 说明性的——你描述你想在视图中看到什么，而不是如何实现它。在jQuery时代，开发人员必须想出一系列操作DOM的步骤，才能从一个应用程序状态切换到下一个应用程序状态。在React中，只需更改组件中的状态，视图就会根据状态更新自身。通过查看render()方法中的标记也很容易确定组件的外观。
  
• 功能-视图是一个纯粹的道具和状态的功能。在大多数情况下，React组件由支柱(外部参数)和状态(内部数据)定义。对于相同的道具和状态，会产生相同的视图。纯函数易于测试，功能组件也是如此。在React中进行测试很容易，因为组件的接口定义良好，可以通过向组件提供不同的道具和状态并比较呈现的输出来测试组件。
  
• 可维护性——以基于组件的方式编写视图可以促进可重用性。我们发现定义组件的proptype可以使React代码自文档化，因为读者可以清楚地知道使用组件需要什么。最后，您的视图和逻辑在组件中是自包含的，不应该受到影响，也不应该影响其他组件。这使得在大规模重构过程中很容易对组件进行移位，只要向组件提供相同的支持即可。
  
• 高性能——您可能听说过React使用虚拟DOM(不要与影子DOM混淆)，当状态发生变化时，它会重新呈现所有内容。为什么需要虚拟DOM?虽然现代JavaScript引擎速度很快，但从DOM读写却很慢。React在内存中保持DOM的轻量级虚拟表示。重新呈现一切是一个误导的术语。在React中，它实际上是指重新呈现DOM在内存中的表示，而不是实际的DOM本身。当组件的底层数据发生更改时，将创建一个新的虚拟表示，并与以前的表示进行比较。然后将差异(所需的最小更改集)打补丁到实际的浏览器DOM。
  
• 易学-学习反应很简单。与此相比，React API表面相对较小;只有几个api需要学习，而且它们不经常更改。React社区是最大的社区之一，随之而来的是充满活力的工具生态系统、开源的UI组件以及大量的在线资源，可以帮助你开始学习React。
  
• 开发人员经验—有许多工具可以改进React的开发经验。React Devtools是一个浏览器扩展，允许您检查组件、查看和操作其道具和状态。使用webpack热重载允许您在浏览器中查看代码更改，而不必刷新浏览器。前端开发包括大量的代码调整、保存和刷新浏览器。热重新加载帮助您消除最后一步。当有库更新时，Facebook提供codemod脚本来帮助您将代码迁移到新的api。这使得升级过程相对轻松。向Facebook团队致敬，感谢他们的奉献精神，使React的开发体验变得非常棒。
  

多年来，出现了比React性能更好的新视图库。React可能不是最快的库，但就生态系统、整体使用体验和好处而言，它仍然是最好的库之一。Facebook也在努力加快反应速度，重写了底层的和解算法。React引入的概念教会了我们如何编写更好的代码、更易于维护的web应用程序，并使我们成为更好的工程师。我们像这样。

我们建议在React主页上阅读关于构建井字游戏的教程，以了解React是什么以及它的功能。更多深入学习，请查看评价较高的免费课程，React Router的创建者提供的React基础知识，他们是React社区的专家。它还涵盖了React文档中没有涵盖的更高级的概念。Facebook的Create React应用程序是一个工具，可以用最少的配置搭建一个React项目，强烈推荐用于启动新的React项目。

React是一个库，而不是框架，它不处理视图下面的层——应用程序状态。稍后再详细介绍。

预计持续时间:3-4天。尝试建立简单的项目，如待办事项列表，黑客新闻克隆与纯反应。你会慢慢地对它产生好感，并可能在这个过程中遇到一些问题，而这些问题不是React能够解决的，这就引出了我们的下一个话题……

研究的链接

• React Official Tutorial
  
• React Fundamentals
  
• Simple React Development in 2017
  
• Presentational and Container Components
  

选择

• Angular
  
• Ember
  
• Vue
  
• Cycle
  

状态管理-Flux/Redux

随着应用程序越来越大，您可能会发现应用程序结构变得有点混乱。整个应用程序的组件可能不得不共享和显示公共数据，但没有优雅的方式来处理React。毕竟，React只是一个视图层，它并没有规定如何在传统MVC模式中构建应用程序的其他层，比如模型和控制器。为了解决这个问题，Facebook发明了Flux，这是一个应用架构，通过利用单向数据流来补充React的可组合视图组件。在这里阅读更多关于Flux的工作原理。综上所述，流量分布具有以下特点:

单向数据流-使应用程序更可预测的更新可以很容易地跟踪。

关注的分离——通量体系结构中的每个部分都有明确的职责，并且是高度解耦的。

在声明式编程中工作得很好——存储可以向视图发送更新，而不需要指定如何在状态之间转换视图。

由于Flux本身不是一个框架，开发人员已经尝试了很多Flux模式的实现。最终，一个明显的赢家出现了，那就是Redux。Redux结合了Flux、Command pattern和Elm体系结构的思想，是目前开发人员与React一起使用的事实上的状态管理库。其核心概念是:

应用程序状态由一个简单的旧JavaScript对象(POJO)描述。

发送一个操作(也是一个POJO)来修改状态。

减速器是一个纯函数，它采用当前状态和动作来产生一个新的状态。

这些概念听起来很简单，但是它们非常强大，因为它们使应用程序能够:

在服务器上呈现它们的状态，在客户端启动它们。

跟踪、记录和回溯整个应用程序中的更改。

轻松实现撤销/重做功能。

Redux的创建者Dan Abramov非常仔细地为Redux编写了详细的文档，并为学习基本和高级Redux创建了全面的视频教程。它们是非常有用的学习资源。

视图和状态的结合

虽然Redux不一定要与React一起使用，但强烈推荐使用Redux，因为它们彼此配合得很好。React和Redux有很多共同的想法和特点:

功能组合范式- React组合视图(纯函数)，而Redux组合纯还原剂(纯函数)。给定相同的输入集，输出是可预测的。

很容易推理——你可能听过这个词很多次，但它到底是什么意思呢?根据我们的经验，React和Redux简化了调试。由于数据流是单向的，因此更容易跟踪数据流(服务器响应、用户输入事件)，并且很容易确定问题发生在哪个层。

分层结构——app / Flux架构中的每一层都是纯功能，职责明确。为它们编写测试非常容易。

开发经验——在开发过程中，我们花了很多精力来创建工具来帮助调试和检查应用程序，比如Redux DevTools。

您的应用程序可能必须处理异步调用，如发出远程API请求。redx -thunk和redx -saga就是为了解决这些问题而创建的。它们可能需要一些时间来理解，因为它们需要理解函数式编程和生成器。我们的建议是，只有在你需要的时候才去处理它。

React - Redux是Redux的官方React绑定，非常简单易学。

预计时间:4天。egghead课程可能有点耗时，但值得花时间。在学习了Redux之后，您可以尝试将其合并到您已经构建的React项目中。Redux是否解决了您在pure React中遇到的一些状态管理问题?

Study Links

• Flux Homepage
  
• Redux Homepage
  
• Egghead Course - Getting Started with Redux
  
• Egghead Course - Build React Apps with Idiomatic Redux
  
• React Redux Links
  
• You Might Not Need Redux
  

Alternatives

• MobX
  

用样式- CSS模块编码

编写好的CSS是困难的。在能够编写可维护和可伸缩的CSS之前，需要多年的经验和挫败感来解决问题。具有全局名称空间的CSS基本上是为web文档设计的，而不是真正为偏爱组件体系结构的web应用程序设计的。因此，有经验的前端开发人员设计了一些方法来指导人们如何为复杂的项目编写有组织的CSS，比如使用SMACSS、BEM、SUIT CSS等。然而，这些方法所带来的样式的封装是由约定和指导方针强制执行的。一旦开发人员不遵循它们，它们就会中断。

幸运的是，前端的生态系统中充斥着各种工具，而不出意料的是，人们发明了一些工具来部分解决大规模编写CSS的一些问题。“大规模”意味着许多开发人员都在同一个项目中工作，并且使用相同的样式表。目前还没有社区同意用JS编写CSS的方法，我们希望有一天能像Redux一样在Flux实现中脱颖而出。现在，我们指望CSS模块。CSS模块是对现有CSS的改进，旨在解决CSS中全局命名空间的问题;它使您能够编写默认情况下是本地的并封装到组件中的样式。此功能通过工具实现。用CSS模块,可以编写大型团队的模块化和可重用的CSS,而不必担心冲突或覆盖应用程序的其他部分。然而,在一天结束的时候,仍在CSS模块编译成正常globally-namespaced CSS的浏览器识别,它仍然是重要的学习生的CSS。

如果你是一个完全的CSS初学者，Codecademy的HTML和CSS课程将是一个很好的介绍你。接下来，阅读Sass预处理器，这是CSS语言的扩展，增加了语法改进，并鼓励了样式的可重用性。学习上面提到的CSS方法，最后学习CSS模块。

预计持续时间:3-4天。尝试使用SMACSS/BEM方法和/或CSS模块设计应用程序的样式。

Study Links

• Learn HTML & CSS course on Codecademy
  
• Intro to HTML/CSS on Khan Academy
  
• SMACSS
  
• BEM
  
• SUIT CSS
  
• CSS Modules Specification
  
• Sass Homepage
  
• A pattern for writing CSS to scale
  

Alternatives

• JSS
  
• Styled Components