如果你正在规划一个新的前端项目或者重构一个现有的项目，那么你需要意识到，现在的前端开发环境已经不是以前的样子了，有太多多种选择：React、Flux、Angular、Aurelia、Mocha、Jasmine、Babel、TypeScript、Flow……它们的初衷是为了简化开发，但无形中增加了学习成本，也给以后项目的维护带来了不确定性.好在这种现象正在淡化，优胜劣汰，优秀的项目慢慢沉淀下来，发展方式也越来越清晰。一些开发者正在尝试使用基于上述技术的框架进行开发，这也在一定程度上降低了学习成本。本文主要介绍我在Web应用开发中涉及和提倡的一些技术，其中一些在技术上存在争议，所以我只对每一种技术进行简单的介绍和分析。所有这些意见都是基于我个人的经验和与社区的接触，所以请根据您的需要使用它们。ReactReact可以说是风头一时：组件化让应用程序更容易开发和维护。学习曲线平缓。核心API简洁明了，简单易学。JSX语法非常规，充分利用了JavaScript的能量。它自然地适应了Flux和Redux。社区活跃有创意，奉献了很多优秀的开发工具单向数据流比双向数据绑定更适合复杂的应用，质量更高支持服务端渲染虽然比起Ember、Aurelia等功能丰富的框架和Angular一样，React不是全能的，但React的开发环境更健壮。现在，使用React不再是一种技术选择，而是一种提供更高效和有效生产力的业务实践。当你想开发移动端应用时，因为你学习了React语法，你可以直接用ReactNative开发跨平台应用。Redux现在，我们已经具备开发视图层的能力了。接下来，我们需要使用其他工具来管理应用程序中的状态和生命周期。这里推荐的工具是：Redux。为了配合React，Facebook开发了Flux，一款管理单向数据流的工具。Flux虽然基本支持单数据流，但是也带来了其他问题，比如如何保存状态，从哪里发起Ajax请求等等。为了解决这些问题，衍生出了一系列遵循Flux模式的框架：Fluxible、Reflux、Alt、Flummox、Lux、Nuclear、Fluxxor……目前，得到开发社区广泛支持的一个实现是Redux。在Redux中，大部分组件都是纯功能组件，只有一个中心化的存储和资源中心。Redux的实例方法负责整个数据的运维。与Flux相比，Redux的思路更加清晰。更重要的是，Redux非常容易学习。Redux作者DanAbramov是一位优秀的老师，制作了一系列深入的Redux视频教程。通过观看这些视频成为Redux专家。我见过一个零基础的React团队在短短几周内迅速开发出beta产品，而且代码非常健壮和成熟。围绕Redux的生态系统与Redux本身一样强大。从神奇的devtool到强大的memoization工具reselect，Redux开发社区为开发者提供了他们需要的一切。开发人员可能会本能地尝试抽象一个Redux模板。这样做的好处有很多，但是请在认清需求的基础上对模板进行封装，不要盲目尝试。ES6和Babel是时候放弃CoffeeScript了，因为它的很多特性在ES6中有相似的语法，而ES6是实现标准，代表着JavaScript未来的发展方向。目前最新的浏览器已经支持ES6的大部分特性。Babel是一个强大的转译器，用于将ES6转译为ES5。此外，可以根据目标浏览器调整转码程度。那么有类型系统吗？TypeScript和Flow都为JavaScript提供了静态类型系统。使用静态类型检查可以有效地捕获错误并减少测试量。目前，我建议采取观望态度。TypeScript试图让JavaScript向C#或Java的方向发展，但它缺乏许多先进的类型系统特性，例如代数数据类型（algebraicdatatypes）。此外，它处理空值的效率不如Flow。相比之下，Flow功能更强大，捕获的错误类型更多，但配置起来比较困难。另外，它对JavaScript新特性的支持弱于Babel，不支持Windows系统。从我个人的角度来看，类型系统并不是前端开发的关键部分（这可能是有争议的）。让我们拭目以待，直到类型系统更加健壮和Babel友好。另一个无可争议的ESLint工具是ESLint。ESLint支持ES6语法，也提供React插件。它不仅仅是一个代码审查工具。目前JSLint已经过时，ESLint可以替代JSHint和JSCS独树一帜。开发者可以根据自己的需要配置ESLint，这里我建议按照AirBNB的开发规范进行配置，也可以直接使用ESLintairbnbconfig。当然，这个规范还有不足之处，但是保持团队整体代码的一致性，可以有效提高代码的可读性。熟悉ESLint后，建议开发人员深入试验规则。ESLint捕获的错误越多，产品就越稳定。NPM、CommonJS和ES6模块忘掉Bower，使用NPM来接管。Browserify和Webpack等构建工具间接提升了NPM在Web开发中的作用。使用NPM，版本管理将更加简单，您将更多地参与Node.js生态系统。目前对CSS的处理还不够完善。您可能正在考虑如何在部署服务器上执行构建？与Ruby的Bundler不同，NPM使用通配符来检索文件，第三方包可以在代码开发期间和项目发布之前任意修改。使用shrinkwrap文件可以冻结项目中的第三方依赖。我推荐使用User的shrinkwrap来提高输出的一致性。此外，开发者也可以考虑使用Sinopia等工具托管自己的私有NPM服务器。Babel会将ES6模块语法转换为CommonJS。CommonJS是一种久经考验的语法，这意味着它稳定且用途广泛。此外，我们可以使用treeshaking等机制来实现静态代码分析（Webpack2.0和Rollup已经支持此功能）。Webpack除非你乐于在你的页面中添加数百个脚本标签，否则你应该尝试使用构建工具来捆绑页面的资源。此外，您还需要某些工具来支持NPM第三方包的浏览器。这里推荐大家使用Webpack。一年前，开发者完成上述工作还有很多工具可供选择，例如基于JavaScript的RequireJS、Browserify和Webpack解决方案，此外还有号称可以优化ES6模块的RollupJS。在尝试了所有工具之后，我强烈建议开发者选择Webpack：可以通过配置处理各种情况支持主流模块加载方式（AMD、CommonJS、globals）内部机制可以修复损坏的模块可以处理CSS完善的缓存系统支持热重载可以加载大多数资源提供高效的性能优化解决方案Webpack也非常擅长处理大型单页应用，支持代码拆分和延迟加载。但值得注意的是，Webpack的学习曲线异常陡峭。但是一旦你学会了它，那么你就掌握了最大的构建系统。Gulp和Grunt怎么样？相比之下，Webpack更擅长处理各种资源。如果您需要执行其他类型的构建任务，Gulp和Grunt也很有用。对于像运行Webpack这样的基本任务，我建议直接使用NPM脚本。JavaScript中的Mocha+Chai+Sinon，有大量可选的单元测试工具，每一个都稳定健壮。如果您只是将它用于单元测试，那么现有工具足以满足您的需求。常见的测试工具有Jasmine、Mocha、Tape、Ava、Jest等，各有千秋。我对测试框架的要求是：可以在浏览器中运行，易于调试执行速度快，易于处理异步测试，易于在命令行上使用第三方库兼容任意断言和数据模拟第一个标准是Ava和Jest被排除在外。我喜欢Chaiassertions，因为它有各种各样的全功能插件，也喜欢Mocha，因为它有很好的异步支持。强烈建议使用DirtyChai来避免某些问题。Webpack的mocha-leader插件允许开发人员自动化测试。对于React，开发者可以参考AirBNB的Enzyme和Teaspoon。我非常喜欢摩卡的特性。如果你想要的只是最基本的功能，可以参考这篇文章来了解Tape。LodashJavaScript没有类似于Java或.NET的核心工具库，因此大部分开发者会从外部引用外部工具库。Lodash目前是此类工具的领导者。此外，由于其惰性执行的特点，它也是目前性能最高的工具之一。使用Lodash时无需引用所有资源，开发者可以根据需要使用其中的函数。在4.x版本中，Lodash为喜欢函数式编程的开发者提供了“函数式开发”模式。如果你熟悉函数式编程，你可以看看Ramda。如果你决定使用这个库，你可能需要引用一些Lodash函数。许多基于React的应用程序不再使用jQuery。除非你在维护一个老项目或者使用依赖于jQuery的第三方库，否则没有必要再使用它了。我喜欢保持我的项目干净，只在我的代码中使用fetch。fetch基于promise，Firefox和Chrome都对它进行了封装。对于其他浏览器，需要提供polyfill脚本。我建议使用isomorphic-fetch来保持跨浏览器和服务器的功能一致。当然其他优秀的第三方库也可以异步获取数据，不过我觉得fetch就够了。同构JavaScript同构JavaScript是指同时运行在客户端和服务端的JavaScript。它通常用于在服务器上预渲染页面以提高性能并促进SEO。使用React可以实现同构JavaScript，但是并不简单，增加了程序的复杂度，限制了开发者可以选择的工具和第三方库。如果您正在构建B2C站点，例如电子商务站点，那么您可能需要使用同构JavaScript。但是，对于内部站点或者B2B程序来说，性能并不是最重要的，所以同构JavaScript并不是太重要。API最近似乎每个人都在考虑如何使用API。每个人都在随人群使用RESTfullAPI，SOAP已经成为历史。目前业界有多种API协议，如HATEOAS、JSONAPI、HAL、GraphQL等，GraphQL赋能客户端进行任意查询。使用Relay，它可以更好地处理客户端状态和缓存。但是，创建GraphQL服务器端接口比较困难，而且大部分文档都是针对Node.js的。Netflix的Falcor似乎提供了与GraphQL/Relay类似的能力，同时降低了服务器端的要求，但目前处于开发者预览状态，并没有在实际开发中使用。所有已知的规范都有其缺陷，有些过于复杂，有些只处理数据读取而不处理更新，还有一些与REST有很大不同。很多开发者选择自己开发，但还是会遇到以上问题。我不认为上面有一个完美的解决方案，但我对API有一个想法：可预测，符合共识协议支持在一个查询中获取多个实体支持更新操作易于调试到目前为止易于使用，我尚未找到满足上述所有条件的解决方案。如果你使用的是RESFful，建议参考Swagger编写API。ElectronElectron可以利用前端技术构建桌面程序，GitHub团队出品的Atom编辑器就是基于Electron打造的。Electron本质上是在里面封装了一个Node.js，可以打开Chrome窗口渲染UI，也可以访问操作系统的本地API，浏览器没有沙盒机制。开发者可以通过Electron打包和分发应用。这是创建跨平台软件的最简单方法，并且仍然可以利用上述所有工具。此外，Electron拥有完整的文档和活跃的开发社区。你可能听说过nw.js的名字，虽然它已经存在多年，但Electron更稳定易用。这是一个基于Electron、React和热重载的模板，试试吧。扩展以下是我在Twitter上关注的一些人：DanAbramov，Redux的创建者ChristopherChedeau，非常活跃的React开发人员，现在在FacebookJeffMorrison，Flow的核心贡献者之一SebastianMarkb?ge，React的创建者PeteHuntReact的一员Formore值得注意的对象，请参考ReactInfluencers。推荐阅读PateHunt的LearningReact！DanAbramov发布了一系列视频教程GettingstartedwithRedux，强烈推荐！此外，Dan发布了一个比上面更详细的关注列表。MarkErikson收集的React/Redux链接也是很好的学习资料。JavaScript-on-demand生态系统每天都在快速发展并变得更加强大。React的最佳实践正在固化，周边工具的职责和能力也越来越清晰。最重要的是要记住：保持简单，按需使用。如果你的应用只有两到三个屏幕，那么就没有必要使用路由系统；如果你正在创建一个单页应用程序，那么你甚至不需要Redux，只需要React自己的状态属性；如果你正在创建一个简单的CRUD程序，那么你不需要使用Relay；如果你正在学习ES6，你不需要深入了解Async/Await或装饰器；如果你只是学习React，你不需要使用热重载和服务端渲染；如果你是Webpack的新手，你不需要分离代码和组合多个资源；如果你只是学习Redux，你不需要了解Redux-Form和Redux-Sagas的使用。保持简单，一次只做一件事！
