《可复制的前后端分离开发模式.ppt》由会员分享,可在线阅读,更多相关《可复制的前后端分离开发模式.ppt(45页珍藏版)》请在三一文库上搜索。
1、可复制的前后端分离开发模式,Cisco WebEx 杜欢 http:/ ,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 .
4、NET ,思想核心,指 令,引入JS的I18N资源文件 页面中调用该指令后,应该输出如下代码: “en_US” 应该由该指令自动识别客户端语言 如果站点允许用户选择“语言”,则以此为准,指令实现,页面中输出的I18N信息 该指令应该从相应的i18n属性文件中取到key为”feed.userinfo”的值,如果支持参数形式,则可以将参数传递过去,支持多参数以数组形式的传递,如:arguments=”a”,”b”,”c” 前端Mock环境时将只有一个模拟i18n文件(每种语言一个) 例如,i18n资源中有: feed.userinfo=0s Info 那么,调用该指令后应该输出: Charlies
5、 Info,指令实现,业务数据的访问 “name” 取到的数据将赋值给它,以便在后面可以通过它来访问取到的数据 “param” 该service需要用到的参数 “service” 在前端mock环境下,它会去读取对应的mockdata/biz/feed/feed_list.json 这个文件,在真实环境中,它由后端对该指令接口的具体实现去提供真实数据,service和params将传递进去。,指令实现,通过AJAX访问业务数据 bizcall.ext .do, .php, .asp(x) 所有通过AJAX访问业务数据的请求都指向到同一个bizCall.ext, 发送一个字段: 字段名: biz
6、call 字段值: name:“feed”, service:“feed.feed_list”, params:pageSize:10,pageIndex:0 对后端来讲, 他们仍然可以使用 easySC.bizData 来处理, 对前端来讲, 他们的假数据不需要编写多份. 提示: 前端对业务数据访问的AJAX Call可以封装为一个通用方法,如 “bizCall”,指令实现,环境数据访问 “key” 在前端开发的mock环境中,应该匹配到前端模拟的环境假数据文件中的 “currentuser.username” ,在真实环境中,则由后端对该指令接口的具体实现去提供真实数据,key将传递进去。
7、 “name” 取到的对应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、参数约定,数据接口,所有这些约定 最终需要形
9、成 “数据接口文档”,数据接口,验证与实践,分离框架EasySC,Easy Separate and Cooperate 它是一个简易的前后端分离框架 基于可复制的前后端分离开发模式思想,JAVA + Freemarker的简单实现,分离框架EasySC,HTTP Server,EasySC Framework,前端环境,真实环境 实现接口,BizData,EnvData,I18N,I18NJS,分离框架EasySC,分离框架EasySC,分离框架EasySC,Module: current-list,分离框架EasySC,mstarWEB-INFclasseseasysc.properties,分离框架EasySC,分离框架EasySC,分离框架EasySC,为什么不使用前端JS模板作为分离解决方案?,搜索引擎 X,性能,可用性,可靠性,易用性,思考:,你在WEB开发中面临着怎样的情况? 你的解决方案是什么?,Q&A,Q&A,Thanks!,,THANKS!,
链接地址:https://www.31doc.com/p-2611014.html