运维系统开发与Rails 3页面开发实践
13 likes729 views
文档介绍了运维系统的开发与Rails 3的页面开发实践，涵盖了项目的定位、理念、进展及面临的挑战。强调了系统在互联网应用规模化背景下的运作模式、设计理念和技术要点，提供了对比分析及开发过程中的经验教训。总结了MVC、REST和AJAX在运维系统开发中的应用及其优缺点，展现了团队在敏捷开发过程中的探索和进展。
![运维系统
• 我们的收获 - 即时测试
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](https://image.slidesharecdn.com/rails3-111111214547-phpapp01/85/Rails-3-19-320.jpg)
![运维系统
• 我们的收获
app.envs[:unknown, true].should_not be_nil](https://image.slidesharecdn.com/rails3-111111214547-phpapp01/85/Rails-3-20-320.jpg)
![理解MVC
[POSA]](https://image.slidesharecdn.com/rails3-111111214547-phpapp01/85/Rails-3-31-320.jpg)
![实现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);
}
); }
}...]](https://image.slidesharecdn.com/rails3-111111214547-phpapp01/85/Rails-3-39-320.jpg)
![举例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](https://image.slidesharecdn.com/rails3-111111214547-phpapp01/85/Rails-3-43-320.jpg)
![举例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)么？](https://image.slidesharecdn.com/rails3-111111214547-phpapp01/85/Rails-3-44-320.jpg)
![我们能得到什么
• MVC
– 单模型多视图结构
– 控制器靠近界面( 单机情况下 )
• REST
– 数据+操作，自解释
– 先验知识标准化
• Ajax
– 代码靠近“工作地点”
– [局部更新导致]信息不一致
– 没法应用模型元信息](https://image.slidesharecdn.com/rails3-111111214547-phpapp01/85/Rails-3-46-320.jpg)
![我们的思路
// 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);
}
);](https://image.slidesharecdn.com/rails3-111111214547-phpapp01/85/Rails-3-49-320.jpg)
![举例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);
});](https://image.slidesharecdn.com/rails3-111111214547-phpapp01/85/Rails-3-53-320.jpg)
![举例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);
});](https://image.slidesharecdn.com/rails3-111111214547-phpapp01/85/Rails-3-57-320.jpg)
运维系统开发与Rails 3页面开发实践
- 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