LintingCSS-stylelint
正如前面提到的，好的CSS是出了名的难写。在CSS上使用静态分析工具有助于保持我们的CSS代码质量和编码风格。对于lintingCSS，我们使用stylelint。与ESLint一样，stylelint以一种非常模块化的方式设计，允许开发人员打开/关闭规则并为其编写自定义插件。除了CSS之外，stylelint还能够解析SCSS，并且对Less提供了实验支持，这降低了大多数现有代码库采用它的障碍。
一旦你学会了ESLint，考虑到他们的相似之处，学习stylelint将是毫不费力的。手写笔目前被Facebook、GitHub和Wordpress等大公司使用。
手写笔的一个缺点是，自动修复功能还没有完全成熟，只能修复有限数量的规则。然而，这个问题应该随着时间的推移而改善。
预计持续时间:1/2天。没什么可学的。将stylelint添加到项目中并修复linting错误!
StudyLinks
stylelintHomepageLintyourCSSwithstylelintAlternatives
SassLintCSSLintTypes-Flow
静态类型在编写应用程序时带来了许多好处。它们可以在早期捕获代码中的常见bug和错误。类型还可以作为代码文档的一种形式，提高代码的可读性。随着代码库的增长，我们看到了类型的重要性，因为它们在我们进行重构时给了我们更大的信心。当清楚每个对象持有什么类型的值和每个函数期望什么时，将团队的新成员加入到项目中也更容易。
向代码中添加类型需要在增加冗长性和语法学习曲线之间进行权衡。但这种学习成本是预先支付的，并随着时间的推移摊销。在复杂的项目中，代码的可维护性很重要，并且处理代码的人员会随着时间的推移而变化，向代码中添加类型带来的好处要多于坏处。
向JavaScript添加静态类型的两大竞争者是Flow(Facebook)和TypeScript(微软)。到目前为止，还没有明确的赢家。现在，我们已经做出了使用流的选择。我们发现与TypeScript相比，Flow的学习曲线更低，并且将现有的代码库迁移到Flow所需的工作相对较少。Flow由Facebook打造，与React生态系统的整合性更好。无论如何，从Flow转移到TypeScript并不十分困难，因为语法和语义非常相似，我们将在以后重新评估这种情况。毕竟，使用一个总比不使用强。
Flow最近更新了他们的文档站点，现在已经很整洁了!
预计持续时间:1天。流非常容易学习，因为类型注释感觉像是JavaScript语言的自然扩展。向您的项目中添加流注释，并利用类型系统的强大功能。
StudyLinks
FlowHomepageTypeScriptvsFlowAlternatives
TypeScriptBuildSystem-webpack
这一部分将会很简短，因为设置webpack可能是一个冗长乏味的过程，而且可能会让那些已经被前端开发中需要学习的大量新内容压得喘不过气来的开发人员感到厌烦。简单地说，webpack是一个模块绑定器，它将前端项目及其依赖项编译成一个最终的包，然后提供给用户。通常，项目已经设置了webpack配置，开发人员很少需要更改它。从长远来看，理解webpack仍然是一件好事。这是由于webpack的功能，如热重载和CSS模块是可能的。
我们发现由生存js的webpack演练是学习webpack的最佳资源。这是对官方文档的一个很好的补充，我们建议先进行演练，然后在需要进一步定制时参考文档。
预计持续时间:2天(可选)。
StudyLinks
webpackHomepageSurviveJS-Webpack:FromapprenticetomasterAlternatives
RollupBrowserifyPackageManagement-Yarn
如果您查看一下node_modules目录，您会对其中包含的目录数量感到震惊。每个babel插件lodash函数都是一个独立的包。当您有多个项目时，这些包在每个项目中都是重复的，它们在很大程度上是相似的。每次在新项目中运行npm安装时，这些包都会被一次又一次地下载，即使它们已经存在于计算机中的其他项目中。
在通过npm安装安装的包中也存在不确定性的问题。我们的一些CI构建会失败，因为在CI服务器安装依赖项时，它会对一些包含中断更改的包进行小的更新。如果库作者尊重semver，而工程师假设API契约一直受到尊重，就不会出现这种情况。
纱线解决了这些问题。通过纱线安装包的不确定性问题。锁定文件，并确保在所有机器上的node_modules中，每个安装都得到完全相同的文件结构。纱线在您的计算机中使用了一个全局缓存目录，以前下载过的包不必重新下载。这也支持离线安装依赖项!
最常见的纱线命令可以在这里找到。大多数其他的纱线命令类似于npm，可以使用npm版本。我们最喜欢的命令之一是纱线升级-交互式，这使得更新依赖项变得非常容易，特别是在现代JavaScript项目需要如此多的依赖项的时候。一定要去看看!
npm
5.0.0于年5月发布，它似乎解决了纱线想要解决的许多问题。一定要注意!预计持续时间:2小时。
StudyLinks
YarnHomepageYarn:AnewpackagemanagerforJavaScriptAlternatives
Goodoldnpm旅程才刚刚开始
祝贺你走到这一步!今天的前端开发是困难的，但它也比以前更有趣。到目前为止，我们所介绍的内容将帮助任何新工程师快速掌握我们的技术。还有更多的东西需要学习，但是在本质上建立一个坚实的基础将有助于学习其余的技术。这个有用的前端web开发人员路线图显示了各个方面可用的替代技术。
我们的技术决策是基于快速成长的Grab工程团队所看重的——前端代码库的可维护性和稳定性。这些决策可能适用于较小的团队和项目，也可能不适用于较小的团队和项目。评估什么对你和你的公司最有效。
随着前端生态系统的发展，我们正在积极探索、试验和评估新技术如何使我们成为一个更高效的团队，并提高我们的生产力。我们希望这篇文章能让你了解我们在Grab使用的前端技术。如果你对我们正在做的事情感兴趣，我们正在招聘!
感谢JoelLow,LiKai和TanWeiSeng审阅了本文的草稿。
原帖可以在GitHub上找到。未来的学习指南将在那里更新。如果你喜欢你正在阅读的东西，给它打一颗星吧!
MoreReading
General
StateoftheJavaScriptLandscape:AMapforNew