SkyForm ECP前端技术点浅谈

■ 文/ 天云软件 前端工程师  杨明翔

导读:SkyForm ECP是由天云软件自主开发的一套开放的、基于容器技术的应用集群管理平台。它内置了丰富的容器镜像及通用中间件基础服务,结合强大的应用编排功能,可以帮助企业在已有的IT基础架构之上快速构建出大规模具有弹性的应用系统。

一.WebSocket网络协议

前段时间笔者在SkyForm ECP产品的开发过程中,需要做一个Web端的Linux控制台功能。结合后端同事的建议,采用了WebSocket网络协议来辅助完成这个功能。在这里先简单介绍一下WebSocket网络协议:

1、简介

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

2、背景

长久以来, 创建实现客户端和用户端之间双工通讯的web app都会造成HTTP轮询的滥用: 客户端向主机不断发送不同的HTTP呼叫来进行询问。这会导致一系列的问题:

  • 服务器被迫为每个客户端使用许多不同的底层TCP连接:一个用于向客户端发送信息,其它用于接收每个传入消息。
  • 有线协议有很高的开销,每一个客户端和服务器之间都有HTTP头。
  • 客户端脚本被迫维护从传出连接到传入连接的映射来追踪回复。

一个更简单的解决方案是使用单个TCP连接双向通信。 这就是WebSocket协议所提供的功能。 结合WebSocket API ,WebSocket协议提供了一个用来替代HTTP轮询实现网页到远程主机的双向通信的方法。

传统HTTP客户端与服务器请求响应模式:

2

WebSocket模式客户端与服务器请求响应模式:

13、在SkyForm ECP项目中的应用

  • 前端实现简述:

对于前端实现来说,WebSocket是HTML5内置对象,当前所有主流浏览器基本都已经支持,不存在兼容性问题。区分于http://和https://,它应用的是ws://和wss://,代码编写如下图:

3

  • 接口监控以及前后端数据交互如下图:

4

二、自定义图标字体库

1、简介

图标字体库就是把常用的矢量图制作成如”宋体”一样的字体库。

2、背景

CSS3兴起后,出现了很多框架,例如:Bootstrap、Semantic等。其中很多矢量图标制作成字体库形式嵌入在框架里面,大量应用。这种方式解放了很大一部分UI人员的工作,也极大方便前端开发人员。但是对于每个项目应用的图标虽然有共性但同时也存在独特性,例如:SkyForm ECP上的虚拟机、主机、服务器、集群等,第三方图标库满足不了这种需要,又很难达到自定义拓展。另一方面,第三方图标库存在大量没有用的图标,形成大量冗余。如果想要满足需求,又可以减少性能开销,自己定义一款精简版且支持自主扩展的图标库才能达到目的。

7

Bootstrap3内嵌字体库Font Awesome

3、自定义扩展

  • 自定义扩展首先需要大量图标素材。其中很大一部分素材可以在阿里矢量库上寻找,极少部分特性图标需要UI人员设计制作成矢量图上传。单一矢量图标应用,矢量图标自定义大小、颜色以及图片文件格式,改造图标、扩展图标都十分容易。如下图:

8

主机矢量图例

  • 图标库制作过程,首先整理出项目所用的所有图标

9

项目适用图标集合

  • 手动导出字体库文件,然后把文件应用到项目中

10

生成的字体库文件

三、SVG在项目中的应用

1、简介

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如DOM和XSL之类的W3C标准是一个整体

2、背景

动态展示卡片集群,在不引用额外资源情况下完成。

3、在SkyForm ECP项目中应用

  • SkyForm ECP产品应用市场界面

11

呈现的界面效果

  • 前端实现

首先对后端抛出来的数据进行轮询动态生成卡片集群,然后结合后端返回的应用名称的简称结合SVG图形绘制出独特标识的各类应用图片。

12

SVG与应用简称结合部分代码

小结

HTML 5所支持的新技术慢慢已经流行开来,例如:SVG and Canvas、Web存储、应用缓存、WebSocket等,无论对于PC端还是移动端都有很大的应用价值。除过带来视觉、特效上的惊艳,更多的是对前端性能的优化。技术的更新换代需要一个过渡期,就如IE 6被逐步放弃一样,只有关注并跟紧革新的步伐,才能在技术更迭的激流中不被淘汰。