Skip to content

Instantly share code, notes, and snippets.

@luckyadam
Last active March 18, 2016 07:10
Show Gist options
  • Save luckyadam/c47ac4cc41bcc4733717 to your computer and use it in GitHub Desktop.
Save luckyadam/c47ac4cc41bcc4733717 to your computer and use it in GitHub Desktop.
后端模板方案

#后端模板方案

优势及挑战

优势

  • 性能优化工作可以更好地开展
  • 前后端分离,减少没必要的沟通成本
  • 数据处理,聚合接口,减少不必要数据
  • 资源加载优化
  • 公共资源加载
  • 直出模板,优化性能
  • 定制化模板,可根据UA等用户信息输出不同模板
  • 可以在中间层部署缓存服务
  • 上线更方便
  • A/B test

挑战

  • 没有部署大型服务经验
  • 中间层需要扛流量,根据QPS预估机器
  • 中间层服务监控和异常定位
  • 初期压力测试的实施
  • 新的开发、联调、测试流程打通
  • 中间层基础库的开发
  • 页面容灾

主要功能

####后端渲染,直出模板 同步直出框架以及首屏数据,再异步渲染其余部分->提升首屏速度,优化性能

简单数据处理

过滤、合并数据、让前端更易于处理

页面路由

用户使用环境获取(浏览器、操作系统等)

方便为不同环境输出多套模板

资源加载优化

通过编译工具扫描得出的资源依赖表 来分析页面所需资源,让资源加载更加合理

页面组件化

资源细粒度化,组件模板动态加载,代码易于维护管理,上线方便

前后端工作分离

前端负责页面及功能,后端负责数据接口和业务逻辑,节约沟通成本

缓存(Redis、MemoryCache)

通过设置中间层缓存,可以让用户更快获取数据,同时降低对后端接口的请求

准备工作

初始

  • 根据流量预估机器数

开发阶段

环境及工具

  • 本地构建工具改造支持 本地文件编译,推送到统一开发环境,实时预览

  • 开发环境 如何与线上环境保持一致

框架和基础库

  • 框架

CodeIgniter

  • 页面组件化及资源加载框架 XXView

负责页面组件化开发

Layout类,页面框架模板,用于设置页面使用的模板,在模板中设置一些坑位,通过填坑的方式来拼装页面,这样可以保证所有页面的公共部分只有一份,灵活插入

// 加载模板
$_layout = $layout->load(模板名, 模板参数, 模块名);
// 填坑
$_layout->setBlock();
$_layout->startBlock('head');
$_layout->endBlock('head');

Widegt类,组件类,调用组件来拼装页面

$widget->load(组件名, 组件参数, 模块名);

HTML 类,负责资源加载,通过分析资源依赖关系表

// 加载CSS
HTML::getCSS(CSS名称, 模块名, 是否直接输出到页面);
// 加载JS
HTML::getJS(JS名称, 模块名, 是否直接输出到页面);

// 定义CSS模块,将会收集区间内的样式,打印到页面<head></head>中
HTML::startCSS();
HTML::endCSS();

// 定义JS模块,将会收集区间内的脚本,打印到页面<body>的最后
HTML::startJS();
HTML::endJS();
  • 数据请求封装 通过调用后端接口获取数据

联调测试阶段

环境及工具

  • 联调环境 数据同步,框架部署
  • 持续集成打包测试

上线

  • 线上机器申请
  • 机器部署PHP环境及我们的框架
  • 代码发布

外部协助

  • 现有后端模板开发流程
  • 线上机器申请及部署
  • 请求CGI数据方式的封装,TCP/HTTP形式,还是直接调用
  • 对接现有线上业务监控系统
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment