KonishiLee's Blog

快启 Web 前端技术架构优化意见

目前的架构体系

Server 部分

以 Rails 为基础的架构体系,将整个 App 分为了 官网 + 快启 两个部分

Js 部分

以 Backbone 为基础的 MVC 架构体系,其中增加了很多来增强这一体系的库。

  • 1.Marionette 增强 V 部分,易于开发与维护
  • 2.Handlebars 增强 V 部分的 Template 引擎
  • 3.Backbone 周边的生态圈,包含 Mutators, Radio, Schema, Syphon等,用于增强 M 部分的功能,以及架构当中通讯系统

HTML + CSS 部分

以 Bootstrap 为主的响应式框架,其中 Rails 部分用到了 Sass,快启部分用到了 Stylus,很多控件依赖于 Bootstrap

Build 部分

以 Gulp 为主的构建打包工具,其中也引用了 Gulp 周边的生态圈用于管理任务等功能

总结:根据以上的架构说明,相信对于前端的整体技术有了一定的了解,不得不说在当前以 MVVM 为主流的架构体系当中,目前这一套架构体系已经属于陈旧落后,虽然在项目当中引用了 React,Vue 的一些思想进行了一些改进与优化,但是为了项目能够跑的越来越顺,深层次的优化当然是更适合目前功能迭代以及维护的。基于目前的这一问题,我也做了一系列的优化建议与意见,当然这也只是参考,如果能用其他方式来让项目跑的越来越顺才是最主要的目的。

优化路线意见

写在最前:
在优化之前,非常明确的一点是必须对于项目业务相对熟悉了解,快启这一项目其实并不需要多么高深的技术为基础的产品,更多的是依赖于业务知识积累,所以在优化之前一定要熟悉业务。关于技术方面应该是对目前前端的发展非常了解,以及怎样用最好的架构体系匹配与目前的业务场景以及开发模式。

具体

  • 1.建议将 Rails 部分完全抽离,构建一套静态页面的 App,好处在于降低发布,团队学习的成本,并且将快启整体打包为一个 App,连同官网部分一起被维护。需要注意的地方就是做好 Rollback 的方案。

  • 2.考虑团队的具体资源,合理的选择更好的以 MVVC 为架构思路的框架来替换目前的架构体系,好处在于目前的架构体系下,很多部分都需要自己来实现一些可以使用框架解决的问题,并且降低维护成本,减少多余的 JS 行数。当然前提是选择的框架应该是组员所熟悉的。推荐 (React/Vue)

  • 3.目前的 Bootstrap 为主的框架虽然为主流,但是缺少了一点 UI/UE 方面的体验,为了更顺利的跟进产品组的步伐,应该增加一些增强类型的库来支撑目前的交互体验。推荐(Semantic-UI/Material-UI)

  • 4.在构建工具上面,虽然 Gulp 能完成目前的任务,但是手动的去编写以及维护构建任务的方面还是不够简便,以至于学习成本较高,应该替换用更好的构建工具来进行打包。推荐(Webpack)

  • 5.目前是使用的包管理工具为 NPM + Bower,虽然这一块用的一直都很顺,但是为了更好的维护第三方的包,还是应该统一。建议是只用 NPM

  • 6.目前的打包方式是统一打包为一个 JS,这样的问题在于在进入 App 的时候 Install 的时间过长,影响用户体验,还有就是如果以后需要适配移动端,那就非常浪费资源,建议将现有的单页应用改为多页应用,将 Js 部分分为 Common,Base 部分打包,然后在分 Module 部分来打包,这样才算是一个具有良好体验的 Web App

  • 7.目前的架构是构建了整个 App,如果在了解了业务之后,会发现其实大部分的用户进入 App 之后浪费了很多资源,比如没有系统设置的用户,为什么需要加载系统设置部分的 Module?如果我从没有系统设置被后台设置为了有系统设置的权限之后怎么灵活加载那一部分?在销售推客户的时候怎样分离组合功能来卖?目前的架构应该是不支持这一块业务的。怎样让架构变得灵活,推荐可以考虑分离 App,大到可以以 OA,CRM,AI,Stat,System…,小到可以 Project,Customer,Task…。当然这个需要重构的技术人员对业务非常熟悉,并且在前端架构方面有非常好的经验以及思想。

总结:以上的建议都是旨在让项目越跑越顺,加快迭代步伐,减少维护危机。当然也是一个长线的工作,并且需要有足够的技术资源,时间资源来支撑。如果在没有,或者不够资源的情况下可以采用一些短期的优化目标,比如说怎样整理 CSS,JS 部分,将 Module 分的更细,将 Component 写的更加贴近于业务,以及提升 UI/UE 方面的体验。

如果喜欢这个分享,就帮忙买杯咖啡吧