第一部分主要是对运维平台的思考、系统演化方式，以及用ruby/rails开发项目时的收获；第二部分是结合自己的工作谈谈单页面应用开发中的技术思路

1. 运维系统开发与Rails 3页面开发实践
——李福（李建业）
fsw ord@sina
fsw ordlee@tw itter
http ://fsw ord.iteye.com

2. 摘要
• 介绍一下运维系统项目
– 定位
– 理念
– 进展
• rails中的web页面开发实践
– MVC、AJAX、REST
– 单页面应用

3. 运维系统介绍

4. 运维系统
• 背景与生态环境
– Alibaba运维体系
• 资源
• 配置
• 监控
• ……

5. 运维系统
• 背景与生态环境
– Alibaba运维体系

6. 运维系统
• 背景与生态环境
– 在淘宝
• 基础数据资料库（CMDB）
• 基础信息采集
• 软件包依赖
• 系统上线部署

7. 运维系统
• 面对的挑战
– 互联网应用规模化以后的瓶颈
• 模式：Google or Facebook ?
– 复杂的技术环境：语言、平台、网络拓扑
– 重复建设 vs 系统整合
– 运维中的监控问题：监多控少
– 部署自动化——敏捷的最后一公里

8. 运维系统
• 做什么
– 通用运维系统
– 多机并行操作
– 支持用户审计
• 不做什么
– 人员、组织管理
– 工作流
– 日志、告警采集
– 配置管理
– 热部署

9. 运维系统
• 设计理念
– 兼容现有运维体系
– 利用现有成熟的技术
– 基于组合的方式推进系统演化

10. 系统关系

11. 运维系统
• 系统职责（类比OS）
– 相同点
• 完成任务
• 改变自身状态
• 反馈结果
– 区别
• 基于网络
• 多机同时操作
• 跨域，环境复杂
• 任务单一

12. 运维系统
• 运维基础设施
– ssh 通道 ( ssh-copy-id)+sudo
– 命令脚本 ( bash、python、perl...... )

13. 功能模块

14. 运维系统
• 技术要点
– 网络可达性：大型互联网应用跨越多个机房，
出于多方面考虑，互相之间可能有隔离
– 系统并发能力：运维风暴对机群管理提出要求
– 任务复杂性：脚本维护复杂

15. 运维系统
• 解决办法
– 网络可达性
– 设计专门的agent进行shell指令推送下发，
agent与控制中心、与被管机器之间均为主
动交互
– 系统并发能力
– agent使用erlang进行指令发送，异步请
求，并行处理
– 任务复杂性
– 提供原子指令和操作两层抽象，运维任务基
于操作来进行

16. 运维系统
• 系统对比
– Puppet
• 抽象为资源
• 核心是配置管理，不适合进行实时运维操作

17. 运维系统
• 系统对比
– Sagent
• 功能较完善
• 结构较复杂
来源链接

18. 运维系统
• 我们的收获
– 如何应对摸索中的需求
• 快速、可用的原型
• 行进中开火
• 团队小型化
– 技术？流程？
• Guard + Rspec + Spork = TC翻倍
• jruby + trinidad：开发环境 vs 真实环境
• statemachine：完善设计思路
• rails.js: 轻量级的ajax
• 去extjs：代码量锐减（2000+ -> 400+)
• 页面功能点评估单位：天 -> 小时

19. 运维系统
• 我们的收获 - 即时测试
has_many :envs do
def [] name, creatable=false
if creatable
where(:name => name).first || create(:name => name)
else
where(:name => name).first
end
end
end

20. 运维系统
• 我们的收获
app.envs[:unknown, true].should_not be_nil

21. 运维系统
• 我们的收获

22. 目前的进展
• 第一阶段
– 建立基本模型
– 基础架构实现功能闭环
– 部分用户试用，分析现实需求
• 第二阶段
– 固化常用运维操作
– 和相关系统进行集成
• 第三阶段
– 应用托管标准化
– 弹性部署

23. 我们还在路上...
尚未完成

24. web页面开发实践

25. 理解MVC
• 通常的理解
– 模型负责业务逻辑
– 视图负责展现逻辑
– 控制器处理用户请求
摘自Wikipedia

26. 理解MVC
• 《企业应用架构模式》：两个分离
– 从模型中分离展现 （主要）
– 视图与控制器的分离 （次要）
•疑问：控制器应该放在哪里？

27. MVC: 例子

28. MVC: 例子

29. MVC: 例子

30. 理解MVC
The Model-View-Controller architectural pattern
(MVC) divides an interactive application into three
components.
The model contains the core functionality and data.
Views display information to the user.
Controllers handle user input.
Views and controllers together comprise the user
interface.
A change-propagation mechanism ensures
consistency between the user interface and the model.
——POSA(面向模式的软件架构)

31. 理解MVC
[POSA]

32. Web 上的 变化
• 本地 => 基于网络

33. Web 上的 变化
• 推模型 => 拉模型
模型 模型
发送消息
请求/响应
视图 视图

34. Web 上的 变化
控制器远离了用户！
--摘自Wikipedia

35. Ajax
Browser Client
Browser Client User Interface
User Interface Script call
HTML+CSS data
AJAX Engine
HTTP request
HTTP request
HTML + CSS data XML data
Web Server Web and/or XML Server
Data store,… Data store,…
Server Side System Server Side System

36. Ajax
似乎更复杂了？
Browser Client
Browser Client User Interface
User Interface Script call
HTML+CSS data
AJAX Engine
HTTP request
HTTP request
HTML + CSS data
XML
data
Web Server Web and/or XML Server
Data store,… Data store,…
Server Side System Server Side System

37. Ajax
似乎更复杂了？
Browser Client
Browser Client User Interface
User Interface Script call
HTML+CSS data
AJAX Engine
HTTP request
HTTP request
HTML + CSS data
XML
data
Web Server Web and/or XML Server
1.Page
2.Form
Data store,… 3.Action Data store,…
4.Persistent
Server Side System Objects Server Side System

38. Ajax
似乎更复杂了？
Browser Client
Browser Client User Interface
User Interface Script call
HTML+CSS data
AJAX Engine
HTTP request
HTTP request
HTML + CSS data
XML
data
Web Server Web and/or XML Server
Data store,…
服务化 Data store,…
Server Side System Server Side System

39. 实现Ajax
• 交互前端化(extjs)
tbar:[ {
x ty pe:' bu tton' ,
tex t:'清空所选择的机器' ,
han dl er:func tion () {ch oo seMach in eToE xecu te.eac h (
fu nctio n(rec ord) {
reco rd .set('c ho oseToE x ecu te', fa lse);
}
); }
}...]

40. 实现Ajax
• 优点
– 简化交互逻辑
– 提高响应速度

41. 实现Ajax
• 缺点
– 局部更新导致信息不一致

42. 实现Ajax
• 缺点
– 必须要用js重新完成全部页面逻辑，难以利用
模型元信息

43. 举例1
• 状态迁移的逻辑？
//d irec ti ve.rb ( by event_ mac hin )
sta te_ mach in e :sta te, :in itial => :i ni t do
even t :cl ea r do tra n si ti on [:in it, :read y] => :do ne en d
even t :ack do tra nsitio n :f ail ure => :d on e end
end

44. 举例1
• 状态迁移的逻辑？
//d irec ti ve.rb ( by event_ mac hin )
sta te_ mach in e :sta te, :in itial => :i ni t do
even t :cl ea r do tra n si ti on [:in it, :read y] => :do ne en d
even t :ack do tra nsitio n :f ail ure => :d on e end
end
写两个版本（js, ruby)么？

45. REST: 超文本驱动
• 信息能够自解释：信息与控件的同时呈现
• 客户端的先验知识标准化：html+css
http://is.gd/2Gm8bb
http://is.gd/hcQDRv

46. 我们能得到什么
• MVC
– 单模型多视图结构
– 控制器靠近界面( 单机情况下 )
• REST
– 数据+操作，自解释
– 先验知识标准化
• Ajax
– 代码靠近“工作地点”
– [局部更新导致]信息不一致
– 没法应用模型元信息

47. 我们能得到什么
单模型多视图 REST
MVC
控制器靠近界面
数据+操作，自解释
先验知识标准化
代码靠近“工作地点”
Ajax
信息不一致
没法应用模型元信息

48. 我们的思路
• 抽象的区域化，用div、li代替iframe
• 对关联对象进行直接更新，使用id
• 抛弃复杂逻辑，直接更新html片段

49. 我们的思路
// appl ica ti on .j s
$('d iv[ bo x-href] ,li[ bo x-href] ').li ve(
' ref resh .a pplica tion' ,
fun ction (e) {
var ba se_ no de = $ (e.cu rrentTa rget);
a ppl ica ti on .refresh (
b ase_ nod e,
a pplic ation .li nk(ba se_ nod e)
);
retu rn a pplic ation .sto pEvery thi ng (e);
}
);

50. 我们的思路
// appl ica ti on .j s
……
l in k: f unc ti on (n od e){
if (nod e.data ('bo x -href ')==nu ll ){
n od e.da ta ("b ox -h ref",n od e.attr('b ox -h ref' ));
}
retu rn n od e.da ta (' bo x-h ref' );
},
……

51. 举例1
• 看看之前的例子

52. 举例1
// o pera ti on s/_c ol lection .html .erb
<% opera ti on s.wi tho ut_ state(:do n e).ea ch do |o | %>
<l i bo x-href= "<% =o pera ti on_ path(o .i d) %> ">
<% =ren d er ' operatio ns/i tem', :resou rc e => o %>
</l i>
<% end %>
//d irec ti ves/_i tem .h tm l .erb
li nk_ to ('清理 ', cl ea r_ operatio n_pa th (o .id ),
:remo te => tru e, :m ethod => :put, :han dl e => tru e
)

53. 举例1
//a pplica ti on .j s
$('a[ha ndl e]' ).li ve('aj ax :succ ess', f unc ti on (e, da ta ,
sta tu s, x hr) {
var n od e = $ (e.cu rren tTa rg et).pa ren t();
var pa rent =
appl ica ti on .u pto (no d e,' di v[b ox -h ref],l i[b ox -h ref]' );
if (pa rent){
paren t.trig ger("ref resh .appl ica ti on ");
}
retu rn a ppl ica ti on .stopE very thi ng (e);
});

54. 举例1
// d irec ti ves/_co ll ec ti on .h tm l .erb
<% di rec ti ves.ea ch do |d irec ti ve|%>
<l i bo x-href= "<% =di rec ti ve_pa th (d i rective.id ) %> ">
<%= rend er 'di rec ti ves/i tem' , :resou rc e =>
di rec ti ve %>
</l i>
<% end %>
//d irec ti ves/_i tem .h tm l .erb
li nk_ to ('清理 ', cl ea r_ di rective_ pa th (o .id ),
:remo te => tru e, :m ethod => :put, :han dl e => tru e
)

55. 举例2
• 另一个例子

56. 举例2
// ma chi nes/_ col l ectio n .html .erb
li nk_ to ('暂停 ',
pa use_ mach in e_path (mach in e.i d ),
:rem ote => tru e, :m etho d => :pu t )
// ma chi nes/ pau se.j s.erb
al ert('生成<% =@di recti ve.co mma nd_n am e %>指令' );
$("#ma chi nes").h tml ('<%= esc ape_j avascript(rend er
"/ mac hin es/c ol lection ", :a pp = > @mach in e.a pp) %>' );

57. 举例2
// appl ica ti on .j s
$('select[ box -remo te]' ).l ive(' chan g e',f unc ti on (e){
var el em ent = $ (thi s);
var u rl = el ement.a ttr(' url' ),
meth od = el em en t.attr('m etho d' ),
opti on = th i s.o ptio ns[ th is.sel ec ted In dex],
nam e = th i s.na me;
var d ata = n am e + "= " + optio n .val ue;
$ .aj ax ({u rl : u rl, ty pe: m etho d || ' GE T', data: data });
retu rn a ppl ica ti on .stopE very thi ng (e);
});

58. Q&A