Grab 前端技术指南（上）

　　Grab 前端技术指南（上）

　　

　　Grab是*敏*感*词*的一家领先的客运平台（类似滴滴打车），截止到2017年5月，这家公司每日的订单量有230万，而且在持续增长中。

　　为了适应公司的快速增长，web团队和web平台也需要迭代。在Grab，web团队一直在紧跟最新最优的实践方案，也在webApp中实现了现代化的JavaScript生态，但这不知是福是祸。

　　这导致的一个后果是，对于新入职的员工或后端工程师，他们可能并不需要精通现代JS生态，但是为了能够完成功能迭代或修改webApp中的bug，被逼无奈要去学习新东西，这让他们倍感压力。前端开发从未像现在这样复杂和令人兴奋。新的工具、库、框架和插件层出不穷，有太多东西需要学习。Web团队的新员工必须要接受前端的这一变革，能够轻松驾驭JS生态，快速高效的为用户提供代码。所以Grab的前端团队提供了一个学习指南，用于介绍我们为何做正在做的东西，和如何处理大数量级的前端开发。

　　这一学习指南受《A Study Plan to Cure JavaScript Fatigue》#.g9egaapps启发，并且在一定程度会倾向推荐一些特定的库或框架，因为它们被认为是目前最适合Grab的。指南中有解释为何选择特定的某个库或框架或工具，并提供了学习资源的链接，以方便读者阅读。同时，也提供了一些可能更适用于其他应用场景的备选方案，以做参考和自我拓展。

　　如果你已经非常熟悉前端开发并持续关注着最新发展，那么这个指南可能对你并不会太有用。这一指南面向的是前端新手。

　　如果你的公司也在探索现代JS技术栈，你会发现这里的学习计划对你的公司同样有用！尽可以按照你的需要来调整它。这一学习计划会根据最近的工作内容和方案选择来定时更新。

　　——来自Grab Web团队

　　前提条件：

　　目录

　　1.测试（Testing）

　　2.JS检测（LintingJavaScript）

　　3.CSS检测（LintingCSS）

　　4.类型（Types）

　　如果你对某一部分内容已有经验，可以跳过这部分文章。

　　单页面应用程序

　　现在的Web开发人员更倾向于开发Web应用程序而不是网站。虽然二者之间没有严格的区别，但Web应用程序往往是高度交互的，动态的，允许用户进行操作并接收操作的反馈。传统上，浏览器从服务器接收HTML渲染。当用户打开一个新URL，需要进行全页面刷新，服务器会为这个新页面发送全新的HTML。这被叫做服务端渲染。

　　然而，在现代单页面应用程序中，使用的是客户端渲染。浏览器从客户端加载初始页面、整个应用程序需要的样式表和脚本（框架、库、应用程序代码）。当用户进入其他页面，不会触发页面刷新。页面URL是利用HTML5历史AIP进行更新。新页面需要的数据，通常是JSON格式，由浏览器通过AJAX请求从服务器获取。单页面应用程序会通过加载初始页面过程中下载的JS，利用这些数据动态地更新页面。这种模式类似于原生应用程序的工作方式。

　　优点：

　　缺点：

　　虽然传统的服务器端渲染应用程序仍然是一个可行的选择，但是客户端和服务器的清晰隔离对于大型工程团队来说给有效，因为客户端和服务器的代码可以独立开发、发布。对于Grab来说更是如此，我们有多个客户端应用程序访问同一个API服务器。

　　由于现在Web开发人员构建应用程序而不是页面，客户端JS的组织变得越来越重要。服务端渲染页面的时候，使用jQuery片段来为各个页面添加用户交互是很常见的。但在构建大型应用程序时，仅仅使用jQuery是不够的。毕竟，jQuery主要是一个用于DOM操作的库，它不是一个框架，它没有为应用程序定义一个清晰的结构和组织。

　　JS框架是为了在DOM上提供更高级别的抽象而创建的，允许你脱离DOM，在内存中保存状态。使用框架还会带来重用推荐改进和构建应用程序最佳实践的好处。一个不熟悉代码库但有框架经验的团队新人，会更容易理解代码，因为这些代码是以他熟悉的结构组织的。流行的框架有很多教程和指南，利用来自同事和社区的知识经验，可以帮助新工程师快速进入状态。

　　学习链接

　　现代JS

　　在深入了解构建JS web应用程序的各个方面之前，有一点很重要，即熟悉web的语言-JS，或者说ECMAScript。JS是一个非常通用的语言，你可以用它来构建web服务器，原生移动应用 和桌面应用程序 。

　　在2015年之前，JS最后一次重大更新是2011年的ECMAScript5.1。然而，近年来，JS突然在短时间内出现了巨大的改进。2015年，ECMAScript 2015（之前被称为ECMAScript6）被发布，并引入了大量的语法结构，以使编写代码更易用。如果你对这感兴趣，Auth0已经写了一篇关于JS历史的好文章。直到今天，并不是所有的浏览器都完全实现了ES2015规范。像Babel 这样的工具可以让开发者用ES2015开发应用程序，Babel可以将代码转换为ES5，从而兼容浏览器。

　　对ES5和ES2015都熟悉是很重要的。ES2015仍然是相对较新的，很多开源代码、Node.js应用程序仍然是用ES5编写的。如果你在浏览器控制台中进行调试，那有可能无法使用ES2015语法。另外，我们稍后会介绍的许多现代库的文档和示例代码是用ES2015编写的。在Grab，我们使用babel-preset-env来从现代JS的语法改进中获得生产力的提升，我们一直都很喜欢这个它。Babel-preset-env智能地决定了哪些Babel插件是必须的（哪些新的语言特性不受支持，并且必须被转换），因为浏览器增加了对更多ES语言特性的本地支持。如果你更喜欢使用已经稳定的语言特性，那么你会发现babel-preset-stage-3更合适，它是一个完整的规范，最有可能在浏览器中实现。

　　花一到两天的时间复习ES5，探索ES2015。ES2015中频繁使用的功能包括“箭头函数”、“类”、“模板字符串”、解构、“Default/Rest/Spread操作符”和“导入和导出模块”。

　　估计时间：3-4天。你可以在学习其他库的时候学习/查找语法，尝试构建自己的应用程序。

　　学习链接：

　　用户界面-React

　　

　　如果说近年有什么JS项目在前端系统中掀起了风潮，那就是React。React是由FaceBook的优秀工程师们开发的开源库。在React中，开发人员为他们的web界面编写组件，并将他们组合在一起。

　　React带来了许多开创性的想法，并鼓励开发人员重新思考最佳实践 。多年来，web开发人员被告知，单独编写HTML，JS和CSS是一种很好的实践。React正相反，它鼓励你在JS中编写HTML和CSS 。起初这个想法听起来非常疯狂，但在尝试了之后，会发现并没有那么奇怪。因为前端开发场景正在变为基于组件开发的模式。React的特点：

　　

　　近年来，出现了一些比React性能更高的新视图库。React可能不是最快的库，但是在生态系统、总体使用体验和效益方面，它仍然是最伟大的库之一。Facebook也在通过重写底层算法()来让React更快。React引入的概念教会我们如何编写更好的代码，更易于维护的web应用程序，并使我们成为更好的工程师。

　　我们建议通过React主页上开发tic-tac-toe游戏的教程()，来了解什么是React、它能做些什么。为了更深入的学习，可以查看免费的高级课程，React原理（），这是React路由创造者们的课程，他们是React社区的专家。这个课程涵盖了React文档没有涉及的高级概念。FaceBook的Create React App（）是一个工具，它可以用最少的配置来搭建一个反应项目，强烈推荐用它来启动新的React项目。

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

　　估计时间：3-4天。尝试构建一个简单的项目，比方说待办事项列表，并到Hacker News查看一下纯React的东西。你会慢慢欣赏它，也许还会遇到一些React没能解决的问题，这就把我们带到下一个话题…

　　学习链接

　　替代方案

　　未完待续……

　　原文链接:

　　#types---flow

　　..........

　　苹果耍[流氓]啦～要对赞赏收30%过路费

　　以下是IOS用户专用赞赏通道～

　　感谢您的支持，我们会继续努力!

　　

　　..........