专栏首页QAPM-腾讯客户端性能分析【私有化质量实践3】“千奇百怪”的Web
原创

【私有化质量实践3】“千奇百怪”的Web

春节快乐,干货来袭。相较于SDK与后台,Web可以说是直面我们交付的用户了。可以这么说,好的Web“千篇一律”,坏的Web“千奇百怪”。下面我们就来说说,面对“千奇百怪”的Web,我们是怎么做的。前言

经过我们的“千锤百炼”,总结出来在私有化交付中Web的难点无非有两方面:一是用户环境复杂,导致了许许多多的兼容性问题;其次,可能是完全没有共性的用户需求,可以这么说,做公有云,是20%的需求来满足80%的用户,而私有化呢?是99%的需求满足1%的用户,这些需求主要集中在前端。所谓的99%的需求,我们可以理解为这些其实面向的是行业的复杂性。那么,面对这种“千奇百怪”的用户环境,我们该如何提前做好准备,随时应对呢?

我们的实践

1)针对用户环境复杂

痛点:例如是没有外网环境,导致外部依赖的JS包以及CSS包全部都不能有;例如是想象不到的终端屏幕尺寸,也就是根本不知道最终我们业务的体验是怎样的,记得当时在交通银行北京研发中心进行私有化交付的时候,我们观察到用户的屏幕是我们之前没有见过的,在震惊之余,我们也马上购买了同款屏幕进行测试与适配,最终成功解决这个问题。而这也让我们思考,当再次遇上这种问题时,我们应该如何快速响应,如何提前做好准备呢?

解决方案:

(1)终端各尺寸和分辨率屏幕适配方案:

● 尽量使用响应式布局方案,例如flex布局,栅格布局等;

● 设置元素大小及间隔时,尽量使用百分比,而不要直接使用px。

(2)外部资源依赖解决方案:

● 所有的线上资源依赖需要下载为本地资源(例如字体文件,icon资源等等),并统一打包,否则在内网环境中无法正常下载这些依赖;

● 除此之外,尤其还需要注意依赖库引入的外网资源文件,我们需要在打包前的时候扫描node_modules中的代码,一旦发现这些依赖库中引入外网资源,同样需要将这些资源下载到本地,再将node_modules中的引入路径修改为本地路径。

2)针对完全没有共性的用户需求

痛点:在现有的Grafana插件中,针对于不同的报表有不同的插件以及不同的配置和使用方式,这就导致了数据报表配置的碎片化与高基础。同时,由于不同的实现方式又有不同的特性,这就导致了往往很难符合我们的使用场景,而使用SQL和DSL等语句时直接查询又过于危险,例如容易受到SQL注入攻击、XSS攻击等。那么我们的解决方案是什么呢?答案就是设计一个“中间层”解决跨数据源查询的问题,同时基于Grafana的自定义BI报表功能,提供用户可根据自身需求自主定制报表的能力。

解决方案:

1.中间层:RestSQL

首先,我们借用了Grafana的前端展示能力,设计了数据源与Grafana之间的中间层——RestSQL, 用于数据获取处理;

其次,我们定义了一种基于SQL的中间格式,将所有查询语句都先翻译为这种中间格式,以这种方式解决了多语句查询的困难;

最后,为了保护数据源,防止数据库的细节暴露,我们使用了对象的思想,封装了细节于系统内, 只对外展示我们设计的内容。

2.灵活的自定义能力:BI报表

BI报表以Grafana服务的形式开放给用户,考虑到数据安全问题,统一使用自研RestSQL数据源,该数据源与后端通过RestSQL协议进行通信。根据Grafana的API与使用需要,我们在BI报表上定义了大量有助于使用的接口,比如获取当前系统所有表名、获取某个表的所有字段名等等接口。我们以这种方式对外提供服务,帮助第三方基于我们的RestSQL进行二次开发。

具体架构图如下,在RestSQL协议的基础上,我们需要开发以下两部分模块:

● 前端:基于Grafana的RestSQL Datasource插件;

● 后端:RestSQL解析与查询模块。

(QAPM基于Grafana的自定义BI报表:http://km.oa.com/articles/show/455873

BI报表使用文档:https://docs.qq.com/doc/DYWRPWFpFdUFHRU1h

写在最后

不管用户环境再复杂,QAPM仍以探索者的姿态不断发现问题、解决问题,坚持为用户提供创新的体验;不管是99%的用户需求还是1%的用户需求,QAPM始终进行探索与优化,最大限度的满足用户的需求。在2021年,我们也希望能一直进步,持续为客户提供高质量的云原生数据服务,与我们的合作伙伴们实现“共赢”。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从0到1,QAPM在私有化实践过程中的质量保障

    QAPM(移动监控)在TMF中交付已经走过两个年头,两年的时间,我们也在不断成长。截止到2020年12月,QAPM私有化工单数量收敛,安灯工单数48单下降到8单...

    010101011001
  • 【私有化质量实践1】出了问题要“坐牢”的SDK

    后台都还好,SDK跟着这些金融类产品发布。我们总开玩笑说,一旦出问题,都是“坐牢”的事情,瑟瑟发抖呀。当然,也许“坐牢”不必,但是前一阵某金融行业内部的产品,就...

    010101011001
  • 【私有化质量实践2】最“年轻”的云原生数据服务

    随着云架构的不断普及,“未来的软件一定生长于云上”的理念被越来越多的人所接受。云提供了一种面向企业应用实现按需进行资源分配的模型,以一种全新的、高效的方式来部署...

    010101011001
  • JS 后端框架盘点

    文档:http://www.expressjs.com.cn/ 菜鸟教程:http://www.runoob.com/nodejs/nodejs-expres...

    王小婷
  • 百度全面开放HTTPS的几个重要问题

    百度从 14 年开始对外开放了 https 的访问,并于 3 月初正式对全网用户进行了 https 跳转。

    哲洛不闹
  • 微信七年回顾:历经多少质疑和差评,才配拥有今天的强大

    不知不觉,微信已经诞生七年了。 从第一版到现在,微信的演变史,很像一部创业史,很好地诠释了创业者能经得起多少质疑和差评,才配拥有多大的成功。

    JackJiang
  • 第4章 编程语言大观 《丰富多彩的编程世界》

    编程语言虽然五花八门,千奇百怪,但是归根结底,编程语言最终的目标,本质上无非是回答两个问题:

    一个会写诗的程序员
  • 必备,前台与后台分离的架构实践

    如果你经历过创业,经历过快速迭代业务,经历过用户量不断上涨,经历过访问并发越来越大,你一定会遇到以下系统问题: 用户访问页面越来越慢 系统性能下降,数据库扛不住...

    架构师之路
  • 必备,前台与后台分离的架构实践

    如果你经历过创业,经历过快速迭代业务,经历过用户量不断上涨,经历过访问并发越来越大,你一定会遇到以下系统问题:

    纯洁的微笑
  • 20个经常更新的高质量博客

    往期精选 1、Programcreek.com:主要介绍 Java,关注设计模式、对比、算法、Java基础、进阶和大量的问题讨论。前往 Programcreek...

    企鹅号小编
  • 35岁了,还能入职BAT吗,这几个公众号告诉你

    号主为BAT一线架构师,CSDN博客专家,博客访问量突破一千万,著有畅销书《深入理解SpringCloud与微服务构建》。公号主要分享Java、Python等技...

    Java技术江湖
  • 这些让程序员头秃的bug,竟然只要一分钟就能找到?

    然而,我们在刚开始学习 Web 安全的时候苦于技术和经验有限,难以挖到实际项目中的漏洞。

    用户5224393
  • SDN交换机在云计算网络中的应用场景

    SDN的技术已经发展了好几年了,而云计算的历史更长,两者的结合更是作为SDN的一个杀手级应用在近两年炒得火热,一些知名咨询公司的关于SDN逐年增加的市场份额的论...

    SDNLAB
  • 前台与后台,为什么要分离?

    如果你经历过快速迭代业务,经历过用户量不断上涨,经历过访问并发越来越大,你一定会遇到以下系统问题:

    架构师之路
  • 「网络安全」SQL注入攻击的真相

    我们生活在数据的黄金时代。有些公司将其分析为更好的自己,有些公司为了获利而进行交易,没有一家公司因其价值而自由放弃 - 对于他们的业务和犯罪分子。

    首席架构师智库
  • 优秀的Java程序员必须掌握的8项代码编程技巧!

    Java是目前最流行的编程语言之一——它可以用来编写Windows程序或者是Web应用,移动应用,网络程序,消费电子产品,机顶盒设备,它无处不在。

    本人秃顶程序员
  • 腾讯SQL“现役运动员”给你的实践小技巧

    引言 SQL的全称是Structured Query Language(结构化查询语言),是一种古老而简洁的程序设计语言。看似平平无奇,一直被各种吐槽,但却有...

    腾讯大讲堂
  • 尴尬!Google搜索现在也会“千人千面”了,退出登录也一样

    这只小鸭子发现,Google搜索会对不同用户的搜索结果进行“千人千面”的定制,不同的人搜到的结果不一样。

    量子位
  • 网站页面优化:BODY标签

    BODY标签表示文档的内容,document.body属性提供了可以轻松访问文档的BODY元素的脚本。简单地说,BODY标签是网页主要文本内容,这是搜索引擎优化...

    林雍岷

扫码关注云+社区

领取腾讯云代金券