可复制的前后端分离开发模式.ppt

1、可复制的前后端分离开发模式,Cisco WebEx 杜欢 ,WEB开发方式历史回顾 问题与挑战 迎接挑战 组织结构上的前后端分离 F2E & SDE 改变的意义 开发模式上的前后端分离 合理的开发流程 Yahoo!的分离开发经验 全新的思想-可复制的前后端分离开发模式 验证与实践,议题,WEB开发方式历史回顾,组织结构,业务 管理,开发 甲 乙 丙 丁,开发 主管,技能 数据库 服务端 客户端,开发流程(单项目),业务 管理,开发 甲 乙 丙 丁,开发 主管,客户 需求,数据库设计,服务端编程,客户端页面,开发流程(多项目),业务 管理,开发 甲 乙 丙 丁,开发 主管,客户 需求,客户 需求

2、,客户 需求,迎接挑战,如何降低招聘成本？ 如何提高项目质量？ 如何完善开发资源分配？ 如何提高企业的专业形象？ 如何为员工提供技能升级的空间？ 如何为员工提供更好的职业规划指引？,组织结构上的前后端分离,F2E & SDE,F2E Front End Engineer 泛指WEB前端开发 SDE Server Develop Engineer 泛指WEB后端开发,开发的组织结构重组,推荐的内部组织结构,企业 提高生产力 提高项目品质 降低招聘成本 提升专业形象 员工 做自己想做的事 具备成为领域内专家的基础 获得更为清晰的职业规划路线,改变的意义,开发模式上的前后端分离,明确的需求,合理的开

3、发流程,F2E 前端,SDE 后端,整 合 测 试,QA 测 试,项 目 发 布,变动的需求 转换成明确的需求 非紧急，重大变动的部分可以版本更新的方式进行处理 制定适合的“需求更改”流程,合理的开发流程,PHP Maple System + PHP 存在的问题 在页面中找到要替换的假数据有点困难，需要“淡定” 经常弄丢HTML中的字符、引号、结束符等等 SDE表示“压力很大” SDE套页后的页面拿到前端跑不起来 QA需要等到后端全部弄好后才能开始测试,Yahoo!的分离开发经验,全新的思想可复制的前后端分离开发模式,适合任何后端语言的分离开发模式,JAVA PHP ASP .NET ,思想核

4、心,指 令,引入JS的I18N资源文件 页面中调用该指令后，应该输出如下代码: “en_US” 应该由该指令自动识别客户端语言 如果站点允许用户选择“语言”，则以此为准,指令实现,页面中输出的I18N信息 该指令应该从相应的i18n属性文件中取到key为”feed.userinfo”的值，如果支持参数形式，则可以将参数传递过去，支持多参数以数组形式的传递，如：arguments=”a”,”b”,”c”前端Mock环境时将只有一个模拟i18n文件（每种语言一个） 例如，i18n资源中有: feed.userinfo=0s Info 那么，调用该指令后应该输出: Charlies Info,指令实

5、现,业务数据的访问 “name” 取到的数据将赋值给它，以便在后面可以通过它来访问取到的数据 “param” 该service需要用到的参数 “service” 在前端mock环境下，它会去读取对应的mockdata/biz/feed/feed_list.json 这个文件，在真实环境中，它由后端对该指令接口的具体实现去提供真实数据，service和params将传递进去。,指令实现,通过AJAX访问业务数据 bizcall.ext.do, .php, .asp(x) 所有通过AJAX访问业务数据的请求都指向到同一个bizCall.ext, 发送一个字段: 字段名:bizcall 字段值:na

6、me:“feed”, service:“feed.feed_list”, params:pageSize:10,pageIndex:0 对后端来讲, 他们仍然可以使用 easySC.bizData 来处理, 对前端来讲, 他们的假数据不需要编写多份. 提示: 前端对业务数据访问的AJAX Call可以封装为一个通用方法，如 “bizCall”,指令实现,环境数据访问 “key” 在前端开发的mock环境中，应该匹配到前端模拟的环境假数据文件中的 “currentuser.username” ，在真实环境中，则由后端对该指令接口的具体实现去提供真实数据，key将传递进去。 “name” 取到的对

7、应KEY的返回值，如: “Charlie Du”，可以在后面的代码中使用,指令实现,“指令”，可以由任何语言进行实现 “指令”设计思想: “指令”在前端mock环境中取假数据 “指令”在真实环境中取真实数据 环境切换由开关控制,指令实现,业务数据格式 需要由前后端共同约定,数据接口, status:“SUCCESS|FAILURE”, message:“当前请求的情况资讯”, result:“返回值, 可以是任何数据类型, 比如 String, Array, Object, 需要前后端一起约定” ,环境数据格式 需要由前后端共同约定，后面的注释可以由后端同事补齐，用于后端在真实环境中取数据时可

8、以明确数据出处（比如，来自Session或Cookie）。,数据接口, rootpath:“/”, skinpath:“/resource/skin_default/”, jspath:“/resource/js/”, currentuser.cred: “U1U7EXG5”, /*数据出处*/ currentuser.username:“Charlie Du” /*备注信息*/ ,前端模拟假数据文件结构,数据接口,表单数据约定 Action URL Items Name Submit Method 链接URL、参数约定,数据接口,所有这些约定最终需要形成“数据接口文档”,数据接口,验证与实践,分离框架EasySC,Easy Separate and Cooperate 它是一个简易的前后端分离框架 基于可复制的前后端分离开发模式思想，JAVA + Freemarker的简单实现,分离框架EasySC,HTTP Server,EasySC Framework,前端环境,真实环境 实现接口,BizData,EnvData,I18N,I18NJS,分离框架EasySC,分离框架EasySC,分离框架EasySC,Module: current-list,分离框架EasySC,mstarWEB-INFp