基于AngularJS的企业软件前端架构.pdfVIP

2014/4/26 @InfoQ infoqchina 2014/4/26 基于AngularJS 的企业应用前端架构 徐飞 新浪微博：@ 民工精髓V 企业应用前端的特点 • 独占模式 • 重业务，轻视觉 • 界面规整，模式单一 • 键盘操作 • 逻辑复杂 • 加载速度的侧重不同 • 浏览器版本相对宽松 传统的B/S企业应用前端 • B/S企业软件常用的展现层技术 – HTC 在浏览器端扩展标签 – JSF等在服务端生成界面 – GWT 编译阶段生成界面 – ExtJS 用JS封装界面组件 – Flex等脱离HTML体系，另辟蹊径 • 业务逻辑 – 放后端比放前端的多。。。 流行过什么样的技术 单页应用 • 传统企业应用 – 通过iframe加载菜单 – 每个功能菜单都是独立界面 – 各功能菜单包含完整的公共库（JS ，样式） • 单页应用 – 每个功能都是部件 – 动态加载 – 整个系统共享一个作用域 单页应用架构 前端的分层 • 为什么单页应用一定要分层？ – 前端逻辑有一定规模，分层有利协作 – 便于保证数据的一致性 – 业务逻辑的复用 – 每个层次的单独可测试 • Struts这种服务端MVC的弱点在哪里？ – 拉长了视图层的生成和渲染 – 不利于UI人员协作 自定义标签 • 在创建界面时，声明式代码是有优势的。 • HTML的标签集是比较贫乏的。 • 服务端自定义标签的劣势 • 曾经有过什么浏览器端自定义标签机制 – html components （IE only） • 现在有哪些方式在浏览器端自定义标签 – polymer，angularjs 业务逻辑层 • 在良好的分层机制下，前端可以独立出一 层与界面元素无关的纯逻辑层 • 这一层是与业务相关的，比界面层稳定 • 业务逻辑层可以用单元测试来覆盖 • 甚至因为与DOM无关，这个单元测试可以 在NodeJS里做 二次开发平台 • 二次开发平台是做什么用的？ – 业务人员通过拖拉配置，生成可用的功能。 • 为什么企业会需要二次开发平台？ – 人力与定制化需求的矛盾 • 为什么企业选择自己做二次开发平台？ – 每个行业都有自己的特点 • 怎样才能做好二次开发平台？ – 业务模型的维护，界面与逻辑的松耦合 移动端 • 移动端需要完全从头开始开发吗？ – 代价太大了 • 它能利用已有的什么？ – 服务、前端业务逻辑 • Angular有哪些特性适合移动端开发？ – ngTouch • 还有更完善的选择吗？ – Ionic 前端的工程化 • 一个软件系统，并不只是简单功能的堆砌 • 当规模扩大的时候，有一些边际效应 – 某个JS模块被修改，如何得知会影响谁？ – 某个界面片段被调整，会影响什么界面？ – 如何最小化发布？ – 如何一键测试、打包、压缩？ – 。。。。。。 Q A Thanks 2014/4/26 特别感谢合作伙伴 特别感谢媒体伙伴（部分） 2014/4/26