前端架构解决方案

Posted 2020-10-30

ue2平台通过1年多的努力，为解决前后端友好分离对angular，react，vue并结合nodejs进行服务端渲染，

同时做了大量的中间件，为前端架构设计提供非常良好的解决方案。例如：

1. api请求代理
2. 静态图片缓存
3. less服务端编译
4. 静态资源合并，动态压缩
5. 服务端渲染
6. 全局缓存控制

等等以及对底层的框架进行了二次封装从而产出了 easyspa，easyme，easyvue更加友好的前后端分离架构设计思想。

并配有相应的脚手架工具，使开发者能够快速构建应用而无需关注性能优化，路由配置和seo等问题。组件的合并加载让

开发者告别组件碎片化带来的担忧以及静态文件的过期缓存策略由框架底层自动化进行处理。下来对easyspa，easyme，

easyvue分别进行介绍：

easyspa

主要在angular的基础上做了大量的二次开发，用户只需要通过脚手架工具来维护应用即可，框架支持单页应用和传统的页面刷新
以及二者的混合使用，只需要在路由文件中配置即可。单页应用的js文件是按照cmd模块管理机制来进行加载的从而可以解决单页
应用中第一次需要将整个应用需要的静态资源全部进行加载而带来的维护性以及性能问题。并具有良好的隔离性。对于业务性应用
的开发，用户只需要关注controller，service的代码编写即可，同时提供了可视化的国际化支持，对于框架的深入讲解后面
会具体讲到。

easyme

   主要在react的基础上做了大量的二次开发和中间件开发，整个页面由react组件组装而成并对组件进行标准化管理，极大的
   提高了组件的复用性和降低整个应用代码的耦合度，使开发角色能够更加友好的与组件开发任务进行绑定，框架采用了nodejs
   做为视图层的渲染服务器，将controller和model层的控制权交给前端，使得整个应用的开发有更大的灵活性，单个页面由
   多个组件拼装而成可能会带来性能的开销，为了解决这个问题easyme采用了多组件合并加载智能缓存检测策略，使得任何一个
   静态文件的变化都能够独立更新客户端特定的缓存文件，所有的静态文件只需要加载一次便可持久化缓存到客户端直到这个文件
   在服务端被修改。easyme还有一个最大的亮点就是将虚拟dom从jsx文件中分离到html模板中进行维护，在js文件中只需要关
   注业务代码的实现即可，对于组件通讯来说，可以通过框架提供的eventMitter来进行状态的管理，高效灵活的提高了react
   应用的开发速率。

easyvue

   更是一款非常优秀的前端架构设计框架，底层使用vuejs作为视图层的管理。具有更高的可配置性，支持服务端渲染和客户端
   渲染的单向选择配置参数。整个页面的开发思路完全面向组件化和模块化的设计思想。同样开发者无需关注性能优化等问题。
   所有的优化机制在config.json中进行统一管理。由开发者手动进行维护，nodejs提供了前后端api请求的代理模块，
   开发者无需解决ajax请求跨域的问题。同样easyvue也将视图层进行了分离，使得代码的维护更加方便。

ue2最大的亮点更是在云端搭建了组件仓库，开发者可以将自己在三大框架中开发的组件提交到云仓库中进行共享，

使用者只需要简单的安装便可以使用组件，从而大大的提高了开发效率。

更多技术文档可以在这里了解：前端架构解决方案

或者关注：