前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前后端分离实践

前后端分离实践

原创
作者头像
gglinux
修改2019-02-23 00:48:01
1.2K0
修改2019-02-23 00:48:01
举报
文章被收录于专栏:gglinux.com

最早从Web2.0 Ajax技术开始兴起,就有提前后端分离了。从Gmail的单页应用,到现在的单页应用层出不穷。浏览器渲染引擎也一直在突破,越来越多的交互、计算放在了浏览器这一层。传统后端MVC架构,变成了前后端的MVC。后台的接口变成了模型层,逻辑处理层从CGI变成了JavaScript,展示层则还是标记语言HTML和CSS。

为什么要做前后端分离

当前项目从立项到2018年,已经有10余年的历史了。前端的技术栈是jQuery。后台是基于10年前的PHP框架,中间也经历过多次重构。但总体架构还是LNMP,PHP渲染的,存在的问题比较多。

  • 从维护侧看:1)业务逻辑复杂,充斥着很多明眼不可见的业务。导致更改bug很容易引发其他的bug。2)代码巨长无比,可读性差。3)代码结构性差、分层模糊,逻辑层的代码充斥在View层中。找代码的时间占据解决bug的大部分时间。4)前端尚处在刀耕火种的年代,前端规范差、压缩混淆不彻底,难以适应新的浏览器渲染技术。
  • 从性能侧看:单一请求,往往读取比页面所需要多得多的数据。频繁的拉取数据,不仅对后端资源是一种浪费,也会导致单一请求耗时过长。
  • 从用户侧看:因为多页应用的频繁刷新,新的URL都需要页面重载。单一页面会触发多个HTTP请求(静态资源、Ajax)。这两个因素导致用户等待时间过久。
  • 从开发人员侧看:1)开发者往往热衷于新技术。学习新技术不仅有利于团队技术成长,也有利于发挥成员的积极性。2)团队成员本身具有全栈开发的能力,转换成前后端分离的模式成本较低。
  • 从业务本身来看:产品天生适合采用单页应用,无需SEO。

前端方案选型

基于上述原因,促成团队下定决心进行正式的改造。新的项目,由于没有历史包袱,采用开源框架是水到渠成的。但对于已有项目而言,采用新框架意味着要对现有代码进行彻底重构。结合自身业务来讲,自研框架可以完美的兼容现有的前端组件库。其次,自研对框架细节的把握程度也会更强。

但是从长期来看,自研意味着需要专业人员长期维护。采用自研,对团队而言是摸着石头过河。我们需要改造业务,需要兼容现有组件,需要考虑长期的维护性,需要考虑安全和性能,需要考虑前端开发流程,还有新成员的上手程度。最重要的还有改造进度和成本。

在前端方案的落地中,团队花费了很长时间进行框架的预研,最终选择了Vue。对业务而言,框架需要提供双向数据绑定、模版引擎、组件化、前端路由,还有能与jQuery组件进行通信,定制化程度较高。

  1. React意味着全局替换,替换成本过高,成果成型慢
  2. JSX、TS对偏后台同学而言,学习门槛较高
  3. 在国内Vue显然更受欢迎,文档、社区也更活跃
  4. React许可协议的具有潜在的不可控性
  5. 前端同学对Vue理解更深刻

实际开发遇到的问题

1.与jQuery组件通信:庞大的现有组件,短时间内非常难Vue化改造。必须采用hack的方式完成jQuery组件和Vue业务的通信。最终是选择发布订阅模式,收集组件的变更。如果Vue需要知道jQuery组件的变更,jQuery组件需要显式$emit通知到Vue。

2.状态管理:状态管理的加入,会增加开发门槛,使用不恰当也会导致乱用。但如果后续引入,又会增加回炉再造的成本。其次不引入状态管理,全局变量的处理也是问题。

3.样式的规范管理:前端的样式规范,也是需要改造的痛点。最终选用业界使用较成熟的BEM规范。

后端方案选型

这些年后端的发展与前端相比,就显得小巫见大巫了。后端现有代码量更大,如果仅仅为了PHP的命名空间、自动加载、依赖注入,就去更换框架就有些得不偿失了。现有的框架性能、类的加载、路由、关系对象映射模型,已经有较好的方案来支撑。

前后端分离对后端而言,最大的改造点,在于接入层的处理,即数据的输入输出方式。对接口而言,性能对前后端分离的体验至关重要,也是我们重点考虑的问题,我们加入了HTTP协议层的缓存。在代码规范、log管理、安全校验(参数过滤)、业务安全(越权)、频率限制、签名验证、登陆验证等问题,也在框架层面做了完善和加强。最后基于前后端分离流程的完善,我们使用Apidoc作为接口文档的管理工具。

后续的工作

前端

  1. 开发规范:Js代码规范、CSS规范、组件规范,自动检测工具支撑。
  2. 代码结构:文件结构划分。
  3. 测试支撑:UI自动化测试、前端构建测试。
  4. 运维监控:前端日志上报、前端错误监控、优化分析。
  5. 运营支撑:点击流、访问转化分析。
  6. 开发调试:开发调试工具的完善。
  7. 运维部署:灰度引入、前端发布流程及工具完善。

后端

  1. 业务接口性能和安全:随着业务改造,新接口的性能及伴随的业务安全。
  2. 共用逻辑的拆分和复用:和现有模式的代码复用和拆分,服务层的完善。

一些观点

  1. 没有工具支撑的规范,抵不过人的惰性。
  2. 动态优化的方法论。改造之前想想两年后你期望项目长什么样,反过来推导现在应该怎么做。
  3. 理解业务是重点,任何框架都会被时代抛弃,选择最适合业务的。
  4. 系统性思维,无论前端还是后端,都具等同性。
  • 开发流程:代码管理、开发调试、代码编译、项目构建、模块管理、配置部署、测试支撑、性能检测、安全扫描、规范约束、统计分析、运营支撑。
  • 开发指标:可用性、可靠性、可维护性、安全性。

希望转载的朋友能够尊重作者的劳动成果,加上转载地址。谢谢!

http://gglinux.com/2017/04/15/IM_design/

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 为什么要做前后端分离
  • 前端方案选型
    • 实际开发遇到的问题
    • 后端方案选型
    • 后续的工作
      • 前端
        • 后端
        • 一些观点
        相关产品与服务
        业务风险情报
        业务风险情报(Business Risk Intelligence,BRI)为您提供全面、实时、精准的业务风险情报服务。通过简单的 API 接入,您即可获取业务中 IP、号码、APP、URL 等的画像数据,对其风险进行精确评估,做到对业务风险、黑产攻击实时感知、评估、应对、止损。您也可利用业务风险情报服务搭建或完善自身的风控体系,补充自身风险情报数据,提升对风险的感知、应对能力。BRI 支持按需付费,您可根据您的需求,选取不同的套餐,更易优化成本。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档