《可复制的前后端分离开发模式》由会员分享，可在线阅读，更多相关《可复制的前后端分离开发模式（45页珍藏版）》请在金锄头文库上搜索。
1、可复制的前后端分离开发模式可复制的前后端分离开发模式Cisco WebEx 杜欢http:/WEB开发方式历史回顾问题与挑战迎接挑战组织结构上的前后端分离F2E & SDE改变的意义开发模式上的前后端分离合理的开发流程Yahoo!的分离开发经验全新的思想-可复制的前后端分离开发模式验证与实践议题议题WEB开发方式历史回顾开发方式历史回顾组织结构组织结构业务管理开发甲乙丙丁开发主管技能数据库服务端客户端开发流程开发流程( (单项目单项目) )业务管理开发甲乙丙丁开发主管客户需求数据库设计服务端编程客户端页面开发流程开发流程( (多项目多项目) )业务管理开发甲乙丙丁开发主管客户需求数据库服务端客
2、户端客户需求客户需求数据库服务端客户端数据库服务端客户端迎接挑战迎接挑战如何降低招聘成本？如何提高项目质量？如何完善开发资源分配？如何提高企业的专业形象？如何为员工提供技能升级的空间？如何为员工提供更好的职业规划指引？组织结构上的前后端分离组织结构上的前后端分离F2EF2E & SDE& SDEF2EF Front E End E Engineer泛指WEB前端开发SDES Server D Develop E Engineer泛指WEB后端开发开发的组织结构重组开发的组织结构重组开发后端架构应用前端UX开发项目1N项目1N项目1N项目1N推荐的内部组织结构推荐的内部组织结构组织结构组织结构T
3、eam LeaderTechnic LeaderTeam member企业提高生产力提高项目品质降低招聘成本提升专业形象员工做自己想做的事具备成为领域内专家的基础获得更为清晰的职业规划路线改变的意义改变的意义开发模式上的前后端分离开发模式上的前后端分离明确的需求合理的开发流程合理的开发流程需求1.快速原型4.UISpec3.视觉设计2.交互设计F2E前端SDE后端整合测试QA测试项目发布变动的需求转换成明确的需求非紧急，重大变动的部分可以版本更新的方式进行处理制定适合的“需求更改”流程合理的开发流程合理的开发流程PHPMaple System + PHP存在的问题在页面中找到要替换的假数据有点
4、困难，需要“淡定”经常弄丢HTML中的字符、引号、结束符等等SDE表示“压力很大”SDE套页后的页面拿到前端跑不起来QA需要等到后端全部弄好后才能开始测试Yahoo!Yahoo!的分离开发经验的分离开发经验PSD 转 HTML(.php)模拟假数据(hard code)F2E准备数据接口SDE将前端做好的页面中的假数据替换为真实数据SDE全新的思想全新的思想可复制的前后端分离开发模式可复制的前后端分离开发模式适合任何后端语言的分离开发模式适合任何后端语言的分离开发模式JAVAPHPASP.NETSDE脱离套页Framework数据桥接F2E一份代码思想核心思想核心后端SDE前端F2E实现分离框
5、架中相关指令的接口以返回真实数据页面中调用分离框架中的指令读取模拟数据分离框架分离框架分离框架分离框架真实环境开关：true | false，动态切换数据来源，前端开发时为false，取模拟数据，当页面迁移到真实环境中，开关置为true，则自动切换取真实数据，对前端透明，保证前端代码只有一份，无需后端套页。指令引入JS的I18N资源文件页面中调用该指令后，应该输出如下代码:“en_US” 应该由该指令自动识别客户端语言如果站点允许用户选择“语言”，则以此为准指令实现指令实现页面中输出的I18N信息该指令应该从相应的i18n属性文件中取到key为”feed.userinfo”的值，如果支持参数形
6、式，则可以将参数传递过去，支持多参数以数组形式的传递，如：arguments=”a”,”b”,”c”前端Mock环境时将只有一个模拟i18n文件（每种语言一个）例如，i18n资源中有: feed.userinfo=0's Info那么，调用该指令后应该输出: Charlies Info指令实现指令实现业务数据的访问“name” 取到的数据将赋值给它，以便在后面可以通过它来访问取到的数据“param” 该service需要用到的参数“service” 在前端mock环境下，它会去读取对应的mockdata/biz/feed/feed_list.json 这个文件，在真实环境中，它由后端对
7、该指令接口的具体实现去提供真实数据，service和params将传递进去。指令实现指令实现通过AJAX访问业务数据bizcall.ext.do, .php, .asp(x)所有通过AJAX访问业务数据的请求都指向到同一个bizCall.ext, 发送一个字段:字段名: bizcall字段值: name:“feed”, service:“feed.feed_list”, params:pageSize:10,pageIndex:0对后端来讲, 他们仍然可以使用 easySC.bizData 来处理, 对前端来讲, 他们的假数据不需要编写多份.提示: 前端对业务数据访问的AJAX Call可以封
8、装为一个通用方法，如 “bizCall”指令实现指令实现环境数据访问“key” 在前端开发的mock环境中，应该匹配到前端模前端模拟的的环境假数据文件境假数据文件中的 “currentuser.username” ，在真实环境中，则由后端对该指令接口的具体实现去提供真实数据，key将传递进去。“name” 取到的对应KEY的返回值，如: “Charlie Du”，可以在后面的代码中使用指令实现指令实现“指令指令”，可以由任何语言进行实现，可以由任何语言进行实现“指令指令”设计思想设计思想: :“ “指令指令”在前端在前端mockmock环境中取假数据境中取假数据“ “指令指令” ”在真在真实环
9、境中取真境中取真实数据数据环境切境切换由开关控制由开关控制指令实现指令实现业务数据格式需要由前后端共同约定数据接口数据接口status:“SUCCESS|FAILURE”,message:“当前请求的情况资讯”,result:“返回值, 可以是任何数据类型, 比如 String, Array, Object, 需要前后端一起约定”环境数据格式需要由前后端共同约定，后面的注释可以由后端同事补齐，用于后端在真实环境中取数据时可以明确数据出处（比如，来自Session或Cookie）。数据接口数据接口rootpath:“/”, skinpath:“/resource/skin_default/”,j
10、spath:“/resource/js/”, currentuser.cred: “U1U7EXG5”, /*数据出处*/currentuser.username:“Charlie Du” /*备注信息*/前端模拟假数据文件结构数据接口数据接口mockdataenvenv.txtbizhomenews_list.txtfeedfeed_list.txti18nmessage_zh_CN.propertiesmessage_en_US.properties表单数据约定Action URLItems NameSubmit Method链接URL、参数约定数据接口数据接口所有这些约定所有这些约定最终
11、需要形成最终需要形成“数据接口文档数据接口文档”数据接口数据接口Data Interface SpecificationXXX ProjectVersion:0.1F2E Owner:Charlie DuSDE Owner:Bo Song2010/10/09验证与实践验证与实践分离框架分离框架EasySCEasySCEasy Separate and Cooperate它是一个简易的前后端分离框架基于可复制的前后端分离开发模式思想，JAVA + Freemarker的简单实现分离框架分离框架EasySCEasySCHTTP ServerEasySC Framework前端环境真实环境实现接口E
12、asysc.properties配置BizDataEnvDataI18NI18NJS分离框架分离框架EasySCEasySC分离框架分离框架EasySCEasySC分离框架分离框架EasySCEasySCModule: current-list分离框架分离框架EasySCEasySCmstarWEB-INFclasseseasysc.properties分离框架分离框架EasySCEasySC分离框架分离框架EasySCEasySC分离框架分离框架EasySCEasySC为什么不使用前端为什么不使用前端JS模板作为分离解决方案模板作为分离解决方案?搜索引擎搜索引擎 X性能性能 可用性可用性 可靠性可靠性 易用性易用性 你在你在WEB开发中面临着怎样的情况开发中面临着怎样的情况？你的解决方案是什么你的解决方案是什么?Q&ATHANKS!THANKS!
