Miox答疑解惑之基于页面的服务体系

Miox发布以来，不少小伙伴都在问一个问题：Miox与react-router@4.x到底有什么不一样？我在掘金和知乎上都回答了一些，可是不够完整，那么我就来解释下它们的不一样点。

这个问题很简单，也许是因为我以前文章标题取的是Miox带你走进动态路由的世界让你们以为Miox仅仅作了动态路由选择这一层。其实否则，Miox中router仅仅是一部分，咱们还作了不少其余的事情。简单而言，咱们能够归纳为“基于后端服务理念而架设在前端页面上的一套WEB SERVICE体系”。

Miox是一个兼容多种渲染引擎的，提供高度自动化 Webview 生命周期管理的一个中间件/框架，同时提供了开箱即用的若干自动化脚手架，快速生成项目。它能够自动帮你处理路由切换、webview 生命周期管理等各类单页应用会面临的问题，让你专一于 webview 内的业务开发。
Miox 实现了生命周期和路由管理的最佳实践，避免了不统一的开发方式可能形成的性能降低和错误，而且能够平滑接入SSR这样的开发技术，达到开发效率和接近原生体验二者之间的最佳平衡。
Miox 并不依赖任何框架，这意味着你的业务开发不管是基于 React、Vue 仍是其余框架，均可以完美的接入到其中来，无需担忧是否在公司中不能使用某些框架的问题。

页面管理的区别

React-router的V4版本，已支持动态路由的概念。而这个咱们早在2年前就已经提出，通过2年时间的沉淀才开源了这个框架。它们二者的区别在因而否单一页面管理和数据是否隔离上：

• react-router在一个页面内基于状态不一样分层为不一样的组件显示，作到了动态路由区分页面内容，内部能够共享顶层（父）组件数据。
• Miox分为多个页面由统一的service服务进行管理，数据隔离，不共享页面数据。

二者因为设计理念的差别，在不一样的场景中各有利弊。

Miox另一个优点在于，当咱们使用KOA做为咱们的服务应用框架，要接入Miox的时候，因为设计理念的一致性，咱们彻底能够直接接管掉koa-router来进行自我处理，意思就是对同构很是友好。固然说回来，REACT对后端的支持也很是好，next.js帮咱们完成了这些工做。

Miox比较适合大型项目的开发，灵活的路由分层结构和服务化思想给你们带来不少相似后端书写的体验和维护体验。咱们能够直接使用不少不关系nodejs环境变量的中间件包，而不用咱们本身去从新造轮子。一套中间件也许就能直接在前端和后端同时使用，何乐而不为呢？

补充动态路由的性能说明

基于后端路由理念，体系无非就是页面 = 模板 + 数据。从这个公式上面，您能够看到，对于一个页面的渲染，模板相当重要。在Miox的世界里，模板就是咱们所谓的Vue或者react。那么何时建立与何时销毁的问题，经过后端请求的机制能够知道，当一个URL进入的时候，咱们会动态根据一些变量生成出数据，同时对应选择模板来渲染。MIox也是如此。Miox实际上是架设在Web端的一套服务系统，简称web service。Miox将使用对应的模板和数据进行页面的渲染。可是考虑浏览器端的特殊性，好比渲染性能等问题，咱们须要对其做出调整。最明显的作法就是加入缓存机制，咱们是用空间来换效率和性能。咱们会缓存这些生成出来的对象（相似后端最终生成出来的页面），加入到内存堆栈中，经过一种动态算法来计算进入的这个URL究竟是要从缓存中拿仍是须要从新建立。算法可能比较复杂，您能够经过这里看下源码。咱们会将浏览过的页面缓存起来，表现为节点的堆叠。固然咱们也不会那么傻，节点堆叠多了，也是要影响性能的。因此在Miox启动服务以前，咱们就会让用户设置一个max属性，让用户来选择咱们最大缓存多少个页面。当每次渲染后，发现页面缓存堆栈超过了这个最大的指，那么咱们会经过最远距离关系将那个须要被删除的页面（对象）给删除，达到一种动态平衡。

再说一点比较深刻的，其实咱们的缓存不只仅存在于页面堆栈，还在于您渲染的模板上，您能够经过webview.dic属性来看下这个模板上被缓存的一些特征。咱们的原则是，路由不对应具体页面，而是对应具体页面的constructor原型对象。这个点，不少小伙伴因为没有看过render.js的实现而没能理解。这个才是缓存特性的关键，理论来说，路由不对应页面，而是对应生成页面的原型对象。

最后

你们都会问，我怎么开始写一个Miox的项目呢？

咱们提供了脚手架以外，还会提供一系列的教程帮助你们来熟悉Miox的编写。最近咱们有一个仓库，就是来介绍Miox的简单使用，点击这里查看。