我们是如何构建一个内部使用的数据可视化web应用

背景介绍

在过去的半年中,我一直参与构建一个内部的数据可视化应用,基于web技术,展示公司内部每天产生的大量数据.我们使用了一些可以提升用户体验和开发效率和质量的方法,收到了或多或少的效果.本文将介绍这些方法.这些方法不适用所有项目,但是挺适合一个内部的项目.很多方法的使用很局限,兼容性差,但是,用在这里很合适.

方法

• 我们采用前后端完全分离的方式进行开发,不仅仅因为我们有非常好的前端工程师,也是为了更好的利用宝贵的人力.
  在现实中,很少有人可以前后端都十分精通,因为前后端的工程师都有自己的技术领域,每一个领域都需要多年时间才可以独挡一面.让每个人的长处发挥出来,前端工程师一心写展现层,后端工程师一心写数据服务,不仅可以让事情做快,更可以做的更好.
  所以我们在开发的时候,前端工程师在本地(127.0.0.1)进行纯HTML的编写,需要数据的时候,采用jsonp或者浏览器插件实现跨域访问后端工程师写好的数据接口.上线后将不会再有跨域的情况,这个时候改为json.
  
  对比一下:
  A.传统方案中前端需要会jsp或者freemarker,但是我们的方案中完全不需要.
  B.前端为了在本地看到效果,需要在本地搭服务器,搭本来就是成本.如果前端工程师的服务器坏了,是需要后端工程师放下手中的工作,取帮助修复的,需要注意的是,这个时候牺牲的2倍的时间成本,因为两个人都没有正常工作.但是我们的方案,前端本地除了静态文件之外就什么都不需要了.
  C.使用MVC框架,如果后端参与展现层.是需要让后端面对一堆JSP的,了解别人所写的页面结构,了解jsp自带函数,把数据套进去,这对于后端是一种折磨啊.如果套进去发现样式被改乱了,前端工程师要花时间去修复.而我们,后端需要的,仅仅是提供接口.这个时候填充数据的工作给了前端,但是,我们的前端将这种填充做成了模块化,对于前端,这个也不是负担.
  
  这里,我们在极力不给两种职责的人引入不擅长的技术,从对比中也可以看出来,一但引入,不必要的沟通成本会高很多.分层的角度来看,不要让前端接触又”丑”又繁碎的后端技术,让后端知道要什么数据而不是数据在前端长什么样子.
  后来我们要做iOS应用,这次数据接口几乎一行没改,整个应用只改了改登录模块.可见代码复用的便利.

• 对于大数据查询, 查询速度往往不能很快,我没有系统的统计过,但是经验来看,2秒的SQL还是经常的,当一个页面上有多个图表,需要多次从数据库查询的时候,访问DB的时间可能超过6秒,4秒是经常的时候.
  如果采用常规的方式,请求到达服务器,执行SQL A,执行SQL B,执行SQL C,执行SQL D,假设每个SQL执行1秒,再加上常规的HTTP请求建立,传输时间,可能6秒.
  如果先load HTML页面,然后每个图表通过Ajax load.由于SQL A & B & C & D是同时进行,所以理想时间是加起来1秒,总共3秒. 总时间减少了很多,同时由于静态页面非常快的先被加载了进来,会给用户一种系统很快的错觉.(思想可以参照 Bigpipe)
  
  

• 对内应用,不要考虑IE
  一个公司内部的应用,要的是什么?!要的是加快公司的发展!要的是比竞争对手的分析展示工具更强大!要的是人无我有,人有我全,人全我快!
  一个公司内部的应用,不要的是什么?!前端角度不和别人拼谁兼容的浏览器多!
  数据可视化应用涉及很多前端框架,如果是SPA可能需要更多.很多前端框架对IE支持不好,如果要兼容IE,可能会大大限制开发效率.