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

1. 可复制的前后端分离开发模式 Cisco WebEx – 杜欢 http://www.w3cgroup.com dh20156@126.com

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

3. WEB开发方式历史回顾

4. 组织结构 开发 甲 乙 丙 丁 技能 数据库 服务端 客户端 业务 管理 开发 主管

5. 开发流程(单项目) 开发 甲 乙 丙 丁 客户 需求 业务 管理 开发 主管 数据库设计 服务端编程 客户端页面

6. 开发流程(多项目) 开发 甲 乙 丙 丁 数据库 数据库 数据库 服务端 服务端 服务端 客户端 客户端 客户端 业务 管理 客户 需求 开发 主管 客户 需求 客户 需求

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

8. 组织结构上的前后端分离

9. F2E& SDE • F2E • Front End Engineer • 泛指WEB前端开发 • SDE • Server Develop Engineer • 泛指WEB后端开发

10. 开发的组织结构重组

11. 推荐的内部组织结构

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

13. 开发模式上的前后端分离

14. 合理的开发流程 • 明确的需求 F2E 前端 QA 测 试 整 合 测 试 项 目 发 布 SDE 后端

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

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

18. 全新的思想可复制的前后端分离开发模式

19. 适合任何后端语言的分离开发模式 JAVA PHP ASP .NET ……

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 来处理, 对前端来讲, 他们的假数据不需要编写多份. • 提示: 前端对业务数据访问的AJAXCall可以封装为一个通用方法，如 “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

32. 为什么不使用前端JS模板作为分离解决方案? 搜索引擎 X 可用性 性能 易用性 可靠性

33. 前端团队协作

34. 模组化

35. UI/UE 团队支持

36. 开发流程

37. 项目前端目录结构

38. JavaScript 目录文件结构

39. 多人开发 var home = {}; //页面命名空间 home.vars = {}; //存储空间 home.module = { moduleA : function(dModule){}, //开发人员 A 负责 moduleB : function(dModule){}, //开发人员 B 负责 moduleC : function(dModule){}, //开发人员 C 负责 moduleD : function(dModule){} //开发人员 D 负责 }; (function(){ util.doWhileExists(‘moduleA’, home.module.moduleA); util.doWhileExists(‘moduleB’, home.module.moduleB); util.doWhileExists(‘moduleC’, home.module.moduleC); util.doWhileExists(‘moduleD’, home.module.moduleD); })();

40. 你在WEB开发中面临着怎样的情况？你的解决方案是什么?你在WEB开发中面临着怎样的情况？你的解决方案是什么? 思考:

41. Q&A Q&A

42. THANKS! dh20156@126.com Thanks!