web开发|如何选择合适的webui框架

时间:2021-09-04 19:21:20

 

  在市场中很多人分不清框架和库的区别,部分只知道框架模糊的概念。所以在选择webUI框架的时候就会仁者见仁智者见智,会存在各抒己见也是很正常的,这里整体都叫框架吧,在市场中不断的淘汰与创新,主要以Vue、React和Angular三大底层框架为主,很多基于jQuery研发的框架在不断的创新,也有和Vue、React和Angular三大框架并驾齐驱的框架出现。

  这里跟大家谈谈为什么我们要使用webUI框架?

  选择Web UI框架的目的

了解了如果没有框架,我们需要做的工作,这对选择框架有非常大的帮助。 框架,直白点说,就是一个半成品,能够帮我们做一些事情的半成品。 框架的选择,就是看哪个框架最合适,从而减少开发的工作量,提高开发的效率和质量,并有效减少维护的工作量,最终达到节约综合开发成本,获取更多的收益。

选择Web开发框架的标准

  声明:这里所谈的选择WebUI框架的标准,只是我们的总结和一家之言,并不是放之四海而皆准的真理,请根据您的体会客观的看待我们的总结。

  另外:我们这里更多的讨论业务功能性应用程序的WebUI框架。

  1:选择能够对我们的开发过程提供更多、更好帮助的Web开发框架

  2:Web框架的学习一定要简单,上手一定要快,没有什么比使用能得到更深的体会。那些动不动就需要半个月或者一个月学习周期的框架,实在是有些恐怖。

  3:一定要能得到很好的技术支持,在应用的过程中,或多或少都会出现这样或者那样的问题,如果不能很快很好的解决,会对整个项目开发带来影响。一定要考虑综合成本,其实这是目前应用开源软件最大的问题,碰到问题除了死肯文档就是查阅源代码,或者是网上搜寻解决的办法,通常一个问题就会导致1-2天的开发停顿,严重的甚至需要一个星期或者更长,一个项目有上这么几次,项目整体的开发成本嗖嗖的就上去了。

  4:Web框架结合其他技术的能力一定要强

  5:WebUI框架的扩展能力一定要强。在好的框架都有力所不及的地方,这就要求能很容易的扩展Web开发框架的功能,以满足新的业务需要。同时要注意扩展的简单性,如果扩展框架的功能代价非常大,还不如不用呢。

  6:WebUI框架最好能提供可视化的开发和配置,可视化开发对开发效率的提高,已经得到业界公认。

  7:Web框架的设计结构一定要合理,应用程序会基于这个框架,框架设计的不合理会大大影响到整个应用的可扩展性。

  8:WebUI框架一定要是运行稳定的,运行效率高的。框架的稳定性和运行效率直接影响到整个系统的稳定性和效率。

  9:WebUI框架一定要能很好的结合目前公司的积累。在多年的开发中已有了很多积累,不能因为使用Web开发框架就不能再使用了,那未免有些得不偿失。

  10:选择开发框架另外要注意的一点就是:任何开发框架都不可能是十全十美的,也不可能是适应所有的应用场景的,也就是说任何开发框架都有它适用的范围。所以选择的时候要注意判断应用的场景和开发框架的适用性。

  使用框架的必然性

  框架,即(framework)。其实就是某种应用的半成品,把不同应用程序中有共性的一些东西抽取出来,做成一个半成品程序,这样的半成品就是所谓的程序框架。 软件系统发展到今天已经很复杂了,特别是服务器端软件,涉及到的知识,内容,问题太多。在某些方面使用别人成熟的框架,就相当于让别人帮你完成一些基础工作,你只需要集中精力完成系统的业务逻辑设计。这样每次开发就不用白手起家,而是可以在这个基础上开始搭建。 使用框架的最大好处:减少重复开发工作量、缩短开发时间、降低开发成本。同时还有其它的好处,如:使程序设计更合理、程序运行更稳定等。基于这些原因,基本上现在在开发中,都会选用某些合适的开发框架,来帮助快速高效的开发应用系统。

  Web层开发的工作

  在开发中,分层是基本的思想,3层架构或者多层架构早已深入人心,在这里我们就把目光集中到Web层,看看到底Web层开发做了那些工作:

  1:数据可视化 Web层需要从逻辑层获取需要展示的数据,然后以合理的方式在页面进行展示

  2:人机交互 用户需要从界面上输入数据,在界面上进行按钮点击,进而触发事件,标准的事件驱动模型,然后跟后台进行数据交换,出现新的界面。

  3:收集数据,调用逻辑层接口 Web层收到用户的事件请求,需要调用相应的逻辑层接口来进行处理,Web层是不会有任何逻辑处理的。调用逻辑层接口,需要传递参数,这时需要收集用户在界面上输入的数据,然后进行组织,组织成为逻辑层接口需要的数据封装形式(通常都是ValueObject)。

  4:根据逻辑层的数据来重新展示页面

  Web层开发的步骤

  注意:这里讨论的Web层开发,是不使用任何开发框架时候的开发。

  1:写页面Html,到底有哪些数据需要在界面上表现

  2:每个数据的具体表现形式,如:有的需要表现成为下拉列表,有的需要表现成为单选按钮等。

  3:界面表现形式的逻辑布局,所谓逻辑布局是指某些数据的表现形式应该放在前面,某些应该放在后面;某些放在上面,某些放在下面。如:某个请假申请 的业务,有请假开始时间和结束时间,很明显开始时间的表现就应该排在结束时间的前面。而美工是负责最后页面的美观,一般美工不能动界面的逻辑布局。

  4:完成前面3步,页面的表现形式的大致模样就有了,下面需要来做功能性的开发。第一个就是这些表现形式的值的来源,如:下拉列表显示的值从什么地方来。值的来源方式很多,有数据库中来、固定值、某断程序运行的中间结果、前面页面传递过来等等,当然典型的还是来自数据库。 好了,确定了值的来源,开发人员就要写代码来获取这些值,然后把这些值赋值到对应的表现形式里面。

  5:还有一些比较特殊,也就是真实操作的是一类值,但是在界面上显示的是另一类值,比如:数据库中有用户编号,到了界面上就得显示用户姓名,但是所 有的操作都是要操作用户编号的。我们把这种情况分做:真实值和表现值,他们有一定的内在联系。这些都是要开发人员去转化和维护的。

  6:接下来就应该开发功能性的事件响应了。用户点击了某个按钮或者触发了某个事件,首先是客户端:数据检测、客户端事件处理;然后提交到服务端,服务端要获取到客户端提交的数据,然后调用相应的逻辑层接口来响应。当然如何写逻辑层的实现这里就不去谈论了。

  7:逻辑层执行完过后,返回数据和信息到Web层,开发人员还需要写代码去处理,选择哪个页面来显示,如何显示这些数据和信息等。

  8:在整个交互的过程中,还必须考虑到如何控制权限,如:某些数据不能显示,某些数据不能编辑等等;同样还需要考虑到消息的配置和国际化等等。这些功能起源于逻辑层,但是实际的控制要到Web层,这些都需要开发人员来控制。

  9:完成了上面的开发步骤,页面基本的功能开发就告一段落,接下来开发人员需要考虑页面美观的问题了。大家可能会说:“不是有美工吗,还需要开发人 员干什么?”。事实上美工多半只能出一个静态页面的美化模版,美工对于一推Java代码和Html的混杂物,多半是没有办法的,更不要说还有一些内容是动 态生成的,美工就更不可能搞定了。还是得开发人员上阵,按照美工给的模版,开始添加Css:class、id、style……

  10:完成上面的开发,基本页面的开发工作就完成了,最后的一个步骤就是把各个页面有机的组织起来,开发应用程序的整体应用导航框架,通常就是菜单,然后把各个功能页面跟菜单结合起来,形成一个完整的应用。

原文链接:http://www.uileader.com/news/news_content_88.html?id=88