UIDesigner 3.0架构设计总结

UIDesigner是腾讯用户研究与体验设计部(CDC)设计研发的一款设计类软件,打造一款可以让设计师统一平台和团队协作的平台型设计工具,经过1.0和2.0版本的经验沉淀,我们决定对3.0版本进行全新的架构设计。

开发一个软件系统,前期的架构设计承载着整个软件的设计思想和关键决策,可以说是重中之重。

根据软件架构设计思想,关注分割和交互,好的架构必须使每个关注点相互分离。我们进行了最基本的需求分析,得出两个关注点:一是工具,二是设计绘图,关系如图1所示。

得到最基本的两个关注点后,接着将提取关键需求(包括:关键功能需求、关键质量需求和关键商业需求),根据两个关注点进行架构的细化设计。

一、关注点——工具

这里我们结合UIDesigner的实际需求,提取出属于“工具”范畴的关键功能需求、关键质量需求和关键商业需求。

首先,“工具”的关键功能需求,必须包括:磁盘文件读写、异常捕捉、日志记录、安全性管理;非工具所必须,但是UIDesigner本身所要求的,包括:配置管理、缓存管理、线程服务、服务器和客户端通讯管理、国际化服务。

其次,“工具”的关键质量需求,质量需求包括开发期质量需求和运行期质量需求两部分,经过分析和权衡,UIDesigner的性能主要取决于设计绘图,而稳定性、可扩展性和可维护性才是决定“工具”本身发展的质量需求,因此,对“工具”的质量需求设计将以稳定性、可扩展性和可维护性为主。

最后,“工具”的关键商业需求,因为UIDesigner本身并没有很复杂的业务需求,因此关键商业需求是在设计流程的优化和规范上得到体现,这方面的设计已经属于高层模块和使用流程的设计,对架构的影响非常小,可以暂时性的忽略。

经过关键需求的提取,我们得到了“工具”的设计目标——可以提供通用功能(关键功能需求)的高稳定性、扩展性和维护性的客户端应用。根据此目标,我们采取了DI(Dependency-Injection)和MVP(Model-View-Presenter)结合的架构,概念架构设计如图2所示。

1、将上层功能进行模块划分,每个模块内部都依赖于MVP架构,通过Model(继承至BaseModel)定义和注册模块,通过观察者模式,每个模块的View都可以通过Presenter(继承至BasePresenter)进行消息的发布和订阅,进行模块间的通信和交互。

2、定义集成了关键功能需求的PlatformService,并在BasePresenter中提供PlatformService的服务调用,这样每个功能模块都可以使用通用的关键功能。

3、为PlatformService的服务定义接口,根据关键功能需求,得到多个服务的接口,将定义和实现相分离,实现部分作为一个特殊的功能模块(核心模块,必须存在),集成到系统本身,方便前期的验证和后期的扩展和维护。 属于“工具”这个关注点的架构就已经设计好了,具体的上层功能模块将在后续的开发中,根据需求一个一个模块的来完成,每个模块之间不会有任何依赖关系(开发时),缺少某个或多个功能模块的时候,软件依然可以稳定的运行起来。

二、关注点——设计绘图

UIDesigner是为设计师打造的设计工具,其最核心的功能需求当然就是设计绘图了,这一块也是变化最多的。根据隔离变化点的原则,我们将这一块设计为绘制引擎框架,通过框架,为“工具”部分提供绘制相关的支持。

我们对绘制引擎框架进行细化分割,分离出三个关注点:图元、画板、辅助组件。

首先,图元是可以通过定义进而展示出自身的基础元件,由基础属性和基础绘制接口两部分组成,其中基础绘制接口的定义和实现分离,这样可以方便后期的扩展,特别是在性能改进方面发挥重要作用。概念设计如图3所示。

其次,画板作为各种图元集合的容器,支持对各种图元的操控和定位,被分为三层:点击测试层、图元设计器管理层和图元绘制层。概念设计如图4所示。

最后,辅助组件分为标尺、辅助线、全局缩略图、遮罩装饰器和自动对齐线等,这些辅助组件都依赖于画板而存在。

三、架构验证和后续开发

在概念架构设计出来后,我们对核心进行了进一步的细化设计,然后对设计的架构进行验证。为了达到敏捷开发和节省时间成本,结合设计的架构,我们最终选择了垂直演进型原型进行架构的验证和后续开发。

因为架构本身是基于DI(Dependency-Injection),是非常符合垂直架构设计的一种架构模式,因此我们搭建了简单的基础核心(只有核心模块,没有其他业务流程功能模块)和简易的绘制引擎框架实现了原型。

通过对原型的测试和验证,确定此架构满足我们的预期。在此原型的基础上,继续完善核心和绘制引擎框架,并且规划后续的业务功能,根据业务功能插件,可以合理的安排项目进度,最终按照计划顺利完成开发和测试。

四、后期仍待改进的一些地方

因为各种原因,在此架构之下,仍有一些细节需要在后续的开发和维护中进行进一步的深入,如:本地数据的存储、用户数据安全、客户端程序的进程安全和网络通信机制的优化等。

随着软件的不断演进,功能越来越多,复杂度越来越高,架构也在不断的磨损,我们需要不断的重构和细节改进,直到主体架构不能完成关键的核心需求(包括关键功能需求、关键质量需求和关键商业需求)时,再进行大改进。 tinawen,本内容来自腾讯内部分享,请勿外传!

(本文出自Tencent CDC Blog,转载时请注明出处)

时间: 2024-09-30 02:29:44

UIDesigner 3.0架构设计总结的相关文章

《企业迁云实战》——第3章 3.0云上通用架构设计与改造

第3章 3.0云上通用架构设计与改造 本章将介绍如何基于常用的阿里云产品和技术,快速构建出满足客户业务需求的架构.在进行实际架构设计和实施过程中,将就如何恰当地使用阿里云产品与技术给出建议和指导,同时会对阿里云产品背后的技术细节进行探讨.

从0到1,趣店集团的云上架构设计

摘要:本次阿里云行业圆桌论坛上,趣店集团总架构师徐章健与阿里云数据库产品经理王义成共同探讨了趣店集团上云实践之路,并且分享了趣店集团对于数据库层面的思考的实践和在基础架构设计上的经验,以及趣店对于消费金融风控的思索和探索.对话行业大咖,引领云端科技,畅谈云上话题,尽在阿里云行业圆桌论坛. 以下内容根据阿里云行业圆桌论坛视频整理而成.视频传送门,请点击这里 本期嘉宾介绍:徐章健,趣店集团总架构师:王义成,阿里云数据库产品经理. 首先,徐章健简单介绍了趣店集团的基本业务情况,趣店集团是2014年3月

Flume(NG)架构设计要点及配置实践

Flume NG是一个分布式.可靠.可用的系统,它能够将不同数据源的海量日志数据进行高效收集.聚合.移动,最后存储到一个中心化数据存储系统中.由原来的Flume OG到现在的Flume NG,进行了架构重构,并且现在NG版本完全不兼容原来的OG版本.经过架构重构后,Flume NG更像是一个轻量的小工具,非常简单,容易适应各种方式日志收集,并支持failover和负载均衡. 架构设计要点 Flume的架构主要有一下几个核心概念: Event:一个数据单元,带有一个可选的消息头 Flow:Even

Android 4.0平台设计:简洁、美观和更为智能

文章描述:Android 4.0平台交互简析. Android4.0继承了3.0的设计多任务.丰富的通知.可定制的主界面.可调整大小的控件.用于交互和分享的互动性元素.应用程序的结构日趋成熟,几乎没有发生变化,看看系统主要界面是如何体现其设计目标:简洁.美观和更为智能. 从解锁界面可以看出,4.0使用视觉化元素引导用户进行简单直观的手势操作,精致的动画和反馈增加了系统的互动参与感和趣味性,全新的字体提高了高分辨率界面的可读性,显得更为优雅和现代. 用户可以直接从解锁界面直接进入程序,或者下拉通知

[精华]web架构设计经验分享!

经验|经验分享|精华|设计|web架构 本人作为一位web工程师,着眼最多之处莫过于 性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查看视频 架构设计的几个心得: 一,不要过设计:never over design 这是一个常常被提及的话题,但是只要想想你的架构里有多少功能是根本没有用到,或者最后废弃的,就能明白其重要性了,初涉架构设计,往往倾向于设计大而化 一的架构,希望设计出具有无比扩展

基于Ajax的应用程序架构设计汇总

ajax|程序|架构|设计 1 浏览器端框架被划分成两大类: •应用程序框架:提供浏览器的功能,但是常以包括窗口小部件抽象和另外的部件而出名,其功能主要围绕桌面GUI框架. •基本结构框架:提供基本的管道和可移植的浏览器抽象,让开发者去创建内容.典型的功能: * 针对XMLHttpRequest的包装器以封装浏览器-服务器的交互.(所有的框架都提供这一功能). * XML操作和查询. * 根据来自XMLHttpRequest的应答执行DOM操作. * 在一些情况中,与另外的浏览器端技术如Flas

架构设计之首部曲

架构|设计 系统采用|B/S结构,共分三层,分别是数据访问层,业务规则层,Web外观层.它们各自有自己的职责,各自为政又互相配合从而形成一个软件的整体功能系统,数据访问层的职责是负责对数据源的存取(这里的数据源是指SQL Server 2000),业务规则层负责的是对数据按照业务流程的处理,Web外观层负责向用户提供交互的接口,只负责输入输出数据.这样设计是很普遍的,它提供了一个较好维护的体系. 设计: 1) 数据访问层: 很多人愿意在这一层封装大量的SQL脚本以简化上层的设计,但是这样的设计并

利用Docker轻松实现云原生应用 - 高可用架构设计

本文为利用Docker和容器服务轻松实现云原生应用系列的第一篇 高可用架构设计(本文) Spring Boot + Redis分布式会话 最近对应用迁云的讨论很多,很多用户对云环境中的应用架构和运维方式还不了解.直接利用云服务器替换自有物理机并不是使用云的正确姿势. Cloud Native Application(云原生应用)是当下一个热门名词,简单而言就是针对云计算的特性,来设计应用架构,并优化应用的交付.运维流程.Linux基金会旗下的云原生计算基金会 CNCF(Cloud Native

揭秘红包场景下的高性能本地存储架构设计

前言:红包是最近兴起的全民参与的活动,2017年新春红包在参与人数和业务峰值上都到达了历史新高,其中红包除夕开奖峰值达到90W/s.近日,阿里云系统和块存储负责人.资深专家马涛从高性能本地存储架构设计.高性能本地存储要点分享.高性能本地存储性能数据等方面分享了高性能本地存储的实战经验. 以下内容根据现场分享和幻灯片整理而成. 红包业务特点 支付宝红包的大致业务架构包括单元化部署.统一接入.网关.DAO.数据库以及在线\离线数据处理,整体流程很长.其中数据库在整理的交易链路中起到承上启下的作用.在