UBER 开源的 Fusion.js 通用 Web 框架

如果你正在读这篇文章，那你已经知道现在有一个新的“框架”出现了。这在 JavaScript 的世界里可能听起来很常见，但在你翻白眼、在 Twitter 上吐槽之前，让我们先来看看这场“FUSSion”到底是怎么回事。

React、Angular、Vue，现在是 Fusion？

不！ Fusion.js 并非 React 的替代品。确切地说，Fusion.js 是基于 React 和 Redux 构建的功能丰富的样板，旨在缓解现代单页 Web 应用的主要痛点。

fusion.js 发布已经有几个小时了，所以这不是深入探讨，而是对 Fusion.js 的简要总结和第一印象。

开箱即用的服务器端渲染

为 SPA 进行服务器端渲染一直有些棘手。市面上有各种各样的样板文件，提供在服务器端渲染应用、在客户端进行数据同步的设置。但这些设置往往比较死板，用不了多久就会被淘汰，只能靠你自己了。Fusion.js 开箱即用地支持服务器端渲染。这意味着，既可以实现同构的通用 Web 应用，在服务器端渲染，在浏览器端进行数据同步；又可以实现 SEO 友好、加载速度更快的页面。

立即进行代码拆分和 HMR

在 SSRed 的 react-redux SPA 上进行 bundle 拆分一直是前端开发者的梦想。但为其配置 webpack 并使其在所有主流浏览器中正常工作一直是一场噩梦。此外，热模块重新加载对开发者来说也是一件好事，对吧？Fusion.js 开箱即用地支持这两项功能。

基于插件的架构

单入口点架构使 Fusion.js 能够在客户端和服务器上通用地运行其代码。因此，插件也具有通用性。它允许插件开发人员根据代码所属的库（而不是代码运行的环境）将代码片段共置一处。

这张图可以更好地理解这一点：

插件逻辑基于其逻辑分组而不是基于需要添加代码的位置。

类型依赖注入

插件可以将定义明确的 API 作为服务暴露给其他插件，并且插件的依赖项在测试期间可以轻松模拟。当依赖项负责与数据存储基础设施通信或与可观察性（例如日志记录、分析和指标）相关时，这一点尤为重要。

不再快递，欢迎 Koa

目前大多数 SSR 和代码拆分解决方案都基于 Express。Express 的 API 鼓励副作用，这使得复杂的响应转换难以封装和测试。然而，Fusion.js基于 Koa，它提供了更易于单元测试的基于上下文的 API，以及基于下游和上游概念的优雅轻量级请求生命周期管理抽象。Fusion.js 核心将网络副作用与应用程序状态分离，并利用 Koa 和 DI 实现子系统之间的松散耦合。

根据你的口味测试

Fusion.js 支持Jest、Enzyme 和 Puppeteer等现代测试工具。除此之外，它还提供插件测试工具。fusion-test-utils 包允许模拟服务器本身，从而可以在任何插件和模拟组合之间快速运行集成测试。

那么造型怎么样？

Fusion.js 可以使用任何 CSS 框架或库。Fusion 默认支持Styletron，这是一个由 Fusion.js 团队维护的高性能原子 CSS 库。

基于组件的路由

Fusion 应用可以使用fusion-plugin-react-router将路由功能集成到组件树中。该插件在底层使用了 react-router，并公开了类似的 API，允许你在组件树的任何位置添加路由行为。

其他好东西

• 安全性：在端点上自动设置 CSRF 保护。
• 数据获取：支持 RPC 驱动的可组合数据获取和 GraphQL/Apollo
• 质量指标：轻松使用服务器性能和浏览器性能日志、错误日志和通用事件流
• I18N：自动设置高效的捆绑分割感知翻译加载

我的看法：

大公司的开源项目总是让我感到温暖。作为一名前端开发者，在 React、Redux 和 Express 上搭建 SSRed 和代码拆分的设置是我面临的最艰难的挑战之一。所以，看到这样的设置开源，并且被 Uber 大规模使用，真的很高兴。 

说到开源，dev.to 将于 2018 年 8 月 8 日开源。太棒了！

我们已经拥有了像Next.js、Gatsby、Electrode这样的优秀现代 Web 设置 ，越多越好。我迫不及待地想在我的下一个项目中使用 Fusion，看看它的效果如何。你觉得 Fusion.js 怎么样？