开个坑记录下这几年在公司做过一些 落地了的重要技术方案.
前后端分离
14年 公司过去的项目一直是揉在一起,刚好赶上公司 开荒 做了前后端分离 后端->服务
业务情况:
1. 需要静态资源频繁发布 而非整个项目一起发 没有做灰度会影响到线上用户
2.前后端耦合性太严重 经常前端抱怨项目跑步起来,沟通成本很高
3.业务发展是 面向多端 api不能保证一套
解决方案
1.代码分离
前后端项目各自分开 开发环境独立 .
前端项目形式为 纯静态项目, 需要动态渲染的项目(多页应用)
2.部署分离
将前端资源部统一署在Nginx上，后端服务部署在常规的服务器.
所有的 入口服务 统一在nginx做转发配置。
通过各自项目Ci去发布 做到互不影响发布
3.数据分离
静态项目 比如 单页应用 浏览器跨域影响 用cors来做 服务端配置好cors
node 代理服务端接口 项目 做一次接口转发 前端项目部署在node中 不受跨域影响
动态渲染 比如 多页应用 使用node的动态渲染能力 ejs 模板
成果
前后 并行开发 定好接口协议 双方可以开动了 测试进行 接口mock测试 用例编写
促进后端 微服务构建 后面拆解成微服务了
发布真的很自由 特别只涉及到前端改动
Hybird 架构
15年 开始做移动互联网 app产品(教育社交类)
业务情况:
部分业务希望能有 热部署和跨平台 能力.比如一些 mvp业务(孵化型) 和 跨平台业务
我们就设计了一套 hybrid 架构. 原生前端参与实现
解决方案
image.png
1.Jsbridge
首先做的核心是jsbridge,用来做 native 和 js 的双向通信的。基于这一层基础上面 上层封装了native的各种ui组件 和 功能 抹平web端差异.
2.离线cache
前端业务 会打成一个个zip 的静态资源包。上传到离线包平台(用于管理包)
在app 启动 或者进行更新点的时候 回去请求离线包 获得版本信息 返回 h5PackageMap.json
这些就是需要app版本 和 离线包版本比对后需要下载文件列表. 增量更新 需要更新从 cnd上下载离线包 解压 本地进行一套安全校验(完整性等) 如果ok 替换调旧包 否则保持原状.
image.png
成果
速度贼快,原生体验 因为本地file协议 秒开 不会白屏 目前小程序就此方案.
增量更新非常省流量,离线包可以批量推送
原生般的热部署能力 热发布
Saas端 产品架构
后来 公司转战saas产品
业务情况:
公司做了很多 saas类产品 但是各个BU 项目参差不齐 问题很多 需要统一的架构.
解决方案:
根据各个项目的特点,设计一套针对saas产品 前端架构.
- 分层模式开发
- 模块分割 懒加载路由
- 路由管理
- 权限控制
- 状态管理
- 状态持久化
- 通信解决方案
- request/response拦截器
- util 工具类
- UI框架与主题
- 工程化
- 组件/代码规范
startup 目前已经开源
https://github.com/sherlock221/vue-saas
技术架构的演进
努力推动新技术落地 和历史包袱的重构
从最早 耦合项目 采用 jq +模板引擎，操作dom时代, 到前后端分离后 使用angular 作为一站式解决方案 dom驱动UI时代,再到 面向全端时代 react /vue 以及未来的大前端发展模式
后面会不断更新......
未来规划 不断给 前端业务提供 支撑点,并不断寻找业务和技术领域的破局点.
网友评论