微信号:infoqchina

介绍:有内容的技术社区媒体

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

2014-05-08 21:37 徐飞

企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢?


B/S企业软件前端开发模式大体上与桌面软件类似,都是偏重量级的,在前端可能会有较多的业务逻辑,这些业务逻辑如何被合理模块化,与界面分离,以便测试,成为这个领域的一个重要挑战。另一方面,由于企业应用的界面相对规整,偏重的是数据存取,没有太多花哨的东西,所以常见的界面控件也是可枚举的,如何让开发界面的工作能更快完成,甚至由不擅长编写代码的业务设计人员来做,与界面原型的工作合二为一,能提高不少开发效率。


在AngularJS等MV*框架出现之后,给这个领域带来一些契机,架构师们能够有机会去重新规划前端的架构,甚至是开发流程,从而让整个软件的生产更为高效。


本文将探讨它给这个领域带来的变化。


企业应用前端的特点

企业应用系统是一种很常见的软件系统,这类系统的特点是面向某个行业,功能较复杂,对界面的要求一般是整齐,不追求花哨。这类系统通常有C/S和B/S两个流派,其中的B/S方式因为部署和集成的便利,使用得较为普遍。

同样是在浏览器中做东西,写企业应用和网站的差别也很明显。企业应用的业务逻辑较重,前端有一定的厚重性,但是对效果并不追求很多,主要是各类控件的使用,表单的存取值等等。

企业应用产品的一些特点如下:

  • 独占模式

  • 重业务,轻视觉

  • 界面规整,模式单一

  • 键盘操作

  • 逻辑复杂

  • 加载速度的侧重不同

  • 浏览器版本相对宽松

企业应用常见的前端框架

在开发B/S企业应用前端的人群中,有很大一部分群体选择了服务端的组件化方式,比如JSF之类,它的弊端是与异构服务端的第三方系统集成比较麻烦。也有不少人使用Bindows和ExtJS这样的框架,最近的KendoUI也是个不错的选择。

每种类型选一个有代表性的来说说:

HTC在浏览器端扩展标签

早期有些团队采用的方式,一般会跟XMLHTTP等结合使用,易于使用,界面代码整洁,但已被主流浏览器抛弃。

JSF等 在服务端生成界面

以后端为主的架构师最推崇的方式,受Struts的MVC模型影响很深,弱化了前端,使得前端蜕化为后端的一种附属。

GWT编译阶段生成界面

写其他语言来生成HTML和JS,一般会依赖于一种前端UI库。这种方式也比较受后端架构师喜欢,因为他们觉得写JS很头疼,宁可写Java。

ExtJS用JS封装界面组件,干脆就不要HTML了

这是另外一种极端,从Bindows开始,使用纯逻辑代码来描述界面,走着跟Java Swing一样的道路,也有不少人喜欢。但这种方式在没有好用的界面设计器的情况下非常痛苦。

Flex等 脱离HTML体系,另辟蹊径

这条路其实是对Java Applet的一种延续,好处是可以不受HTML体系的制约,独立发展,所以其实这些体系在企业应用领域的成熟度远超HTML体系。

单页应用和前端分层

我们把眼光放到2013年,在这一年里最火的前端技术莫过于NodeJS和AngularJS,前者给我们带来的是一种开发方式的改变,后者是一种典型的前端分层方案。Angular是前端MV*框架的一个流派,用过的人都会觉得很爽。它爽在什么地方呢?因为它帮我们做的事情太多了,一个双向绑定,无所不包,凡是存取值相关的操作,基本都不用自己写代码。在企业应用前端功能里,表单的存取值和校验占据了很大的比例,这些事都不用干了,那简直太好了。

如果就因为这个用Angular,那还有些早。有一些第三方代码被称为库,另外一些称为框架,Angular是框架而不是库。框架的含义是,有更强的约束性,并非作为辅助功能来提供的。

做单页应用,前端不分层是很难办的,当规模扩大的时候,很难处理其中一些隐患。分层更重要的好处是能够从全盘考虑一些东西,比如说数据的共享。跨模块的数据共享是一个比较复杂的话题,搞得不好就会导致不一致的情况,如果考虑到在分层的情况下,把各种数据来源都统一维护,就好办多了。

所以,以AngularJS为代表的前端MV*框架最重要的工作就是做了这些对于分层的指导和约束性工作,在此基础上,我们可以进一步优化单页应用这类产品。

前端的自定义标签体系

Angular带来的好处是可扩展的标签体系,这也就是标签的语义化。Angular的主打功能之一是指令,使用这种方式,可以很容易扩展标签或者属性。比如,业务开发人员可以直接写:

<panel>

<treedata="{{data}}"></tree>

</panel>

这样多么直观,而且可以跟原有的HTML代码一起编写,不造成任何负担。语义化的标签是快速编写界面的不二法门。

业务逻辑

有了语义化标签之后,如果我们只写界面不写逻辑,那也够了,但现实往往没有这么美好,我们还要来考虑一下业务逻辑怎么办。

前面提到,我们在前端作分层,把展现层跟业务逻辑层完全隔离,带来的好处就是逻辑层不存在对DOM的操作,只有纯粹的逻辑和远程调用,这么一来,这一层的东西都可以很容易做测试。对于一个大型产品来说,持续集成是很有必要的,自动化测试是持续集成中不可缺少的一环。如果不做分层,这个测试可能就比较难做,现在我们能把容易的先做掉,而且纯逻辑的代码,还可以用更快的方式来测试。

我们看到,最近很火的NodeJS,它从很多方面给了前端工程师一个机会,去更多地把控整个开发流程,在我们这个场景下,如果能把针对前端逻辑的单元测试都放在node里做,那效率就会更高。

二次开发平台

我们来看看,有了这么一套分层机制,又有了界面标签库之后,该做些什么呢?

做企业软件的公司,有不少会做二次开发平台,这个平台的目标是整合一些已有的行业组件,让业务开发人员甚至是不懂技术的业务人员通过简单的拖拉、配置的形式,组合生成新的业务功能。

从界面的角度看,拖拽生成很容易,很多界面原型工具都可以做,但要如何整合数据和业务?因为你要生成的这个功能,是实实在在要拿去用,不是有个样子看就可以,所以要能跟真实数据结合起来。但这事情谈何容易!

就比如说,界面上有一个选择所属行业的下拉框,里面数据是配置出来的,对这个数据的查询操作在后端,作为一个查询服务或者是业务对象管理起来,有些传统的方式可能是在后端作这个关联,Angular框架可以把这个事情推到前端来。相比Backbone这样的框架来说,Angular由于有双向绑定,这个过程会变得特别省事。一个界面片段想要和数据关联起来,要做的事情就是各种属性的设置,所以动态加载和动态绑定都会比较容易。

更多精彩内容,请点击阅读原文。

***********************************

本文来自InfoQ微信公众账号:infoqchina

1、回复“今日新闻”,查看今天更新的新闻;

2、回复“今日英文”,查看今天英文站的更新;

3、回复“文章 +关键词”,搜索关键词相关内容;

4、回复“QCon”,了解QCon大会相关信息;

5、回复“活动”,了解最近InfoQ组织的线下沙龙;

6、回复“架构师”,获取《架构师》下载地址;

7、回复“投稿”,了解投稿和加入编辑团队的流程。

***********************************


 
InfoQ 更多文章 Facebook如何实现PB级别数据库自动化备份 学术派Google软件工程师Matt Welsh谈移动开发趋势 Spotify为什么要使用一些“无聊”的技术? 妹纸们放假了,汉纸们做啥? 大多数重构可以避免
猜您喜欢 你相信这些数学事实么?(上) 城里年薪20w、40w、80w码农的真实生活是这样的··· golang post取参数的一些问题 【9.1敏捷实录】京东是如何进行敏捷软件开发的? 新编辑器Cocos Creator发布:对不起我来晚了!