可维护性

读代码比写代码更频繁。在Grab尤其如此，在那里团队规模很大，我们有多个工程师在多个项目中工作。我们高度重视代码的可读性、可维护性和稳定性，有几种方法可以实现这一点:“广泛的测试”、“一致的编码风格”和“类型划分”。

测试- - Jest + Enzyme

Jest是Facebook的一个测试库，旨在让测试过程无痛苦。与Facebook项目一样，它提供了一种开箱即用的良好开发体验。测试可以并行运行以获得更快的速度，并且在监视模式下，只运行更改文件的测试。我们喜欢的一个特性是“快照测试”。Jest可以保存React组件和Redux状态生成的输出，并将其保存为序列化文件，这样您就不必自己手动生成预期的输出。Jest还具有内置的模拟、断言和测试覆盖率。一个图书馆来统治他们所有人!

React附带了一些测试工具，但是通过类似于jquery的API，通过Airbnb提供的酶可以更容易地生成、断言、操作和遍历React组件的输出。建议用酶测定反应组分。

Jest和酶使编写前端测试变得有趣和容易。因为定义了明确的职责和接口，所以React组件和Redux操作/缩减器相对容易测试也很有帮助。对于React组件，我们可以测试给定一些道具，呈现所需的DOM，并在某些模拟用户交互时触发回调。对于Redux还原器，我们可以测试给定的一个先验状态和一个动作，会产生一个结果状态。

Jest和ase的文档非常简洁，通过阅读它们应该就足够了。

预计持续时间:2-3天。尝试为你的React + Redux应用程序编写Jest +Enzyme!

Study Links

• Jest Homepage
  
• Testing React Apps with Jest
  
• Enzyme Homepage
  
• Enzyme: JavaScript Testing utilities for React
  

Alternatives

• AVA
  
• Karma
  

Linting JavaScript - ESLint

linter是一个静态分析代码并发现代码问题的工具，它可以潜在地防止bug /运行时错误，同时强制执行一种编码风格。在拉请求审查期间，当审查人员不必对编码风格留下挑剔的评论时，可以节省时间。ESLint是一个用于linting JavaScript代码的工具，具有高度可扩展性和可定制性。团队可以编写自己的lint规则来执行自定义样式。在Grab中，我们使用Airbnb的eslin -config- Airbnb预置，它已经在Airbnb的JavaScript风格指南中配置了通用的良好编码风格。

在大多数情况下，使用ESLint就像调整项目文件夹中的配置文件一样简单。如果您不为ESLint编写新的规则，那么就没有什么可学习的。当错误出现时，请注意它们，并将其谷歌，以找到推荐的样式。

预计持续时间:1/2天。没什么可学的。添加ESLint到您的项目，并修复linting错误!

Study Links

• ESLint Homepage
  
• Airbnb JavaScript Style Guide
  

Alternatives

• Standard
  
• JSHint
  

Linting CSS - stylelint

正如前面提到的，好的CSS是出了名的难写。在CSS上使用静态分析工具有助于保持我们的CSS代码质量和编码风格。对于linting CSS，我们使用stylelint。与ESLint一样，stylelint以一种非常模块化的方式设计，允许开发人员打开/关闭规则并为其编写自定义插件。除了CSS之外，stylelint还能够解析SCSS，并且对Less提供了实验支持，这降低了大多数现有代码库采用它的障碍。

一旦你学会了ESLint，考虑到他们的相似之处，学习stylelint将是毫不费力的。手写笔目前被Facebook、GitHub和Wordpress等大公司使用。

手写笔的一个缺点是，自动修复功能还没有完全成熟，只能修复有限数量的规则。然而，这个问题应该随着时间的推移而改善。

预计持续时间:1/2天。没什么可学的。将stylelint添加到项目中并修复linting错误!

Study Links

• stylelint Homepage
  
• Lint your CSS with stylelint
  

Alternatives

• Sass Lint
  
• CSS Lint
  

Types - Flow

静态类型在编写应用程序时带来了许多好处。它们可以在早期捕获代码中的常见bug和错误。类型还可以作为代码文档的一种形式，提高代码的可读性。随着代码库的增长，我们看到了类型的重要性，因为它们在我们进行重构时给了我们更大的信心。当清楚每个对象持有什么类型的值和每个函数期望什么时，将团队的新成员加入到项目中也更容易。

向代码中添加类型需要在增加冗长性和语法学习曲线之间进行权衡。但这种学习成本是预先支付的，并随着时间的推移摊销。在复杂的项目中，代码的可维护性很重要，并且处理代码的人员会随着时间的推移而变化，向代码中添加类型带来的好处要多于坏处。

向JavaScript添加静态类型的两大竞争者是Flow (Facebook)和TypeScript(微软)。到目前为止，还没有明确的赢家。现在，我们已经做出了使用流的选择。我们发现与TypeScript相比，Flow的学习曲线更低，并且将现有的代码库迁移到Flow所需的工作相对较少。Flow由Facebook打造，与React生态系统的整合性更好。无论如何，从Flow转移到TypeScript并不十分困难，因为语法和语义非常相似，我们将在以后重新评估这种情况。毕竟，使用一个总比不使用强。

Flow最近更新了他们的文档站点，现在已经很整洁了!

预计持续时间:1天。流非常容易学习，因为类型注释感觉像是JavaScript语言的自然扩展。向您的项目中添加流注释，并利用类型系统的强大功能。

Study Links

• Flow Homepage
  
• TypeScript vs Flow
  

Alternatives

• TypeScript
  

Build System - webpack

这一部分将会很简短，因为设置webpack可能是一个冗长乏味的过程，而且可能会让那些已经被前端开发中需要学习的大量新内容压得喘不过气来的开发人员感到厌烦。简单地说，webpack是一个模块绑定器，它将前端项目及其依赖项编译成一个最终的包，然后提供给用户。通常，项目已经设置了webpack配置，开发人员很少需要更改它。从长远来看，理解webpack仍然是一件好事。这是由于webpack的功能，如热重载和CSS模块是可能的。

我们发现由生存js的webpack演练是学习webpack的最佳资源。这是对官方文档的一个很好的补充，我们建议先进行演练，然后在需要进一步定制时参考文档。

预计持续时间:2天(可选)。

Study Links

• webpack Homepage
  
• SurviveJS - Webpack: From apprentice to master
  

Alternatives

• Rollup
  
• Browserify
  

Package Management - Yarn

如果您查看一下node_modules目录，您会对其中包含的目录数量感到震惊。每个babel插件lodash函数都是一个独立的包。当您有多个项目时，这些包在每个项目中都是重复的，它们在很大程度上是相似的。每次在新项目中运行npm安装时，这些包都会被一次又一次地下载，即使它们已经存在于计算机中的其他项目中。

在通过npm安装安装的包中也存在不确定性的问题。我们的一些CI构建会失败，因为在CI服务器安装依赖项时，它会对一些包含中断更改的包进行小的更新。如果库作者尊重semver，而工程师假设API契约一直受到尊重，就不会出现这种情况。

纱线解决了这些问题。通过纱线安装包的不确定性问题。锁定文件，并确保在所有机器上的node_modules中，每个安装都得到完全相同的文件结构。纱线在您的计算机中使用了一个全局缓存目录，以前下载过的包不必重新下载。这也支持离线安装依赖项!

最常见的纱线命令可以在这里找到。大多数其他的纱线命令类似于npm，可以使用npm版本。我们最喜欢的命令之一是纱线升级-交互式，这使得更新依赖项变得非常容易，特别是在现代JavaScript项目需要如此多的依赖项的时候。一定要去看看!

npm@5.0.0于2017年5月发布，它似乎解决了纱线想要解决的许多问题。一定要注意!

预计持续时间:2小时。

Study Links

• Yarn Homepage
  
• Yarn: A new package manager for JavaScript
  

Alternatives

• Good old npm
  

旅程才刚刚开始

祝贺你走到这一步!今天的前端开发是困难的，但它也比以前更有趣。到目前为止，我们所介绍的内容将帮助任何新工程师快速掌握我们的技术。还有更多的东西需要学习，但是在本质上建立一个坚实的基础将有助于学习其余的技术。这个有用的前端web开发人员路线图显示了各个方面可用的替代技术。

我们的技术决策是基于快速成长的Grab工程团队所看重的——前端代码库的可维护性和稳定性。这些决策可能适用于较小的团队和项目，也可能不适用于较小的团队和项目。评估什么对你和你的公司最有效。

随着前端生态系统的发展，我们正在积极探索、试验和评估新技术如何使我们成为一个更高效的团队，并提高我们的生产力。我们希望这篇文章能让你了解我们在Grab使用的前端技术。如果你对我们正在做的事情感兴趣，我们正在招聘!

感谢Joel Low, Li Kai和Tan Wei Seng审阅了本文的草稿。

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

More Reading

General

• State of the JavaScript Landscape: A Map for Newcomers
  
• The Hitchhiker’s guide to the modern front end development workflow
  
• How it feels to learn JavaScript in 2016
  
• Roadmap to becoming a web developer in 2017
  
• Modern JavaScript for Ancient Web Developers
  

Other Study Guides

• A Study Plan To Cure JavaScript Fatigue
  
• JS Stack from Scratch
  
• A Beginner’s JavaScript Study Plan
  

Footnotes

1. This can be solved via webpack code splitting. ↩
   
2. Universal JS to the rescue! ↩