可复制的前后端分离开发模式 Cisco WebEx – 杜欢

1. Cisco WebEx – 杜欢 http://www.w3cgroup.com [email_address]

2. WEB 开发方式历史回顾 问题与挑战 迎接挑战 组织结构上的前后端分离 F2E & SDE 改变的意义 开发模式上的前后端分离 合理的开发流程 Yahoo! 的分离开发经验 全新的思想 - 可复制的前后端分离开发模式 验证与实践

7. 如何降低招聘成本？ 如何提高项目质量？ 如何完善开发资源分配？ 如何提高企业的专业形象？ 如何为员工提供技能升级的空间？ 如何为员工提供更好的职业规划指引？

9. F2E F ront E nd E ngineer 泛指 WEB 前端开发 SDE S erver D evelop E ngineer 泛指 WEB 后端开发

11. 组织结构 Team Leader Technic Leader Team member

12. 企业 提高生产力 提高项目品质 降低招聘成本 提升专业形象 员工 做自己想做的事 具备成为领域内专家的基础 获得更为清晰的职业规划路线

14. 明确的需求 F2E 前端

15. 变动的需求 转换成明确的需求 非紧急，重大变动的部分可以版本更新的方式进行处理 制定适合的“需求更改”流程

16. PHP Maple System + PHP 存在的问题 在页面中找到要替换的假数据有点困难，需要“淡定” 经常弄丢 HTML 中的字符、引号、结束符等等 SDE 表示“压力很大” SDE 套页后的页面拿到前端跑不起来 QA 需要等到后端全部弄好后才能开始测试

20. 指 令

21. 引入 JS 的 I18N 资源文件 <@easySC.i18nJs path=“…/feed.js”/> 页面中调用该指令后，应该输出如下代码 : <script type=“text/javascript” src=“…/feed_en_US.js”></script> <script type=“text/javascript” src=“…/feed.js”></script> “ en_US” 应该由该指令自动识别客户端语言 如果站点允许用户选择“语言”，则以此为准

22. 页面中输出的 I18N 信息 <@easySC.i18nMsg key=“feed.userinfo” arguments=“Charlie” /> 该指令应该从相应的 i18n 属性文件中取到 key 为” feed.userinfo” 的值，如果支持参数形式，则可以将参数传递过去，支持多参数以数组形式的传递，如： arguments=”[\”a\”,\”b\”,\”c\”]” 前端 Mock 环境时将只有一个模拟 i18n 文件（每种语言一个） 例如， i18n 资源中有 : feed.userinfo= {0}&#39;s Info 那么，调用该指令后应该输出 : Charlie’s Info

23. 业务数据的访问 <@easySC.bizData name=“feed” service=“feed.feed_list” params=“{pageSize:10,pageIndex:0}” /> “ name” 取到的数据将赋值给它，以便在后面可以通过它来访问取到的数据 “ param” 该 service 需要用到的参数 “ service” 在前端 mock 环境下，它会去读取对应的 mockdata/biz/feed/feed_list.json 这个文件，在真实环境中，它由后端对该指令接口的具体实现去提供真实数据， service 和 params 将传递进去。

24. 通过 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 可以封装为一个通用方法，如 “ bizCall”

25. 环境数据访问 <@easySC.envData name=“username” key=“currentuser.username” /> “ key” 在前端开发的 mock 环境中，应该匹配到 前端模拟的环境假数据文件 中的 “ currentuser.username” ，在真实环境中，则由后端对该指令接口的具体实现去提供真实数据， key 将传递进去。 “ name” 取到的对应 KEY 的返回值，如 : “Charlie Du” ，可以在后面的代码中使用

26. “ 指令”，可以由任何语言进行实现 “ 指令”设计思想 : “ 指令”在前端 mock 环境中取假数据 “ 指令”在真实环境中取真实数据 环境切换由开关控制

27. 业务数据格式 需要由前后端共同约定 { status: “ SUCCESS|FAILURE ” , message: “ 当前请求的情况资讯 ” , result: “ 返回值 , 可以是任何数据类型 , 比如 String , Array , Object , 需要前后端一起约定 ” }

28. 环境数据格式 需要由前后端共同约定，后面的注释可以由后端同事补齐，用于后端在真实环境中取数据时可以明确数据出处（比如，来自 Session 或 Cookie ）。 { rootpath: “/” , skinpath: “/resource/skin_default/” , jspath: “/resource/js/” , currentuser.cred: “U1U7EXG5” , /* 数据出处 */ currentuser.username: “Charlie Du” /* 备注信息 */ }

29. 前端 模拟假数据 文件结构

30. 表单数据约定 Action URL Items’ Name Submit Method 链接 URL 、参数约定

31. 所有这些约定 最终需要形成 “数据接口文档” Data Interface Specification XXX Project Version:0.1 F2E Owner: Charlie Du SDE Owner: Bo Song 2010/10/09

33. Easy Separate and Cooperate 它是一个简易的前后端分离框架 基于可复制的前后端分离开发模式思想， JAVA + Freemarker 的简单实现

34. HTTP Server EasySC Framework 前端环境 真实环境 实现接口 BizData EnvData I18N I18NJS

37. <@easySC_bizData name=&quot;starlist&quot; service=&quot;home.star_list&quot; params=&quot;{articleId:-1}&quot; /> Module: current-list

38. mstar\WEB-INF\classes\ easysc.properties

45. [email_address]