专栏首页腾讯开源的专栏基于通用组件语言规范的声明式组件库,腾讯WeComponents正式开源

基于通用组件语言规范的声明式组件库,腾讯WeComponents正式开源

面对各类运营需求,微信游戏团队在B端开发实践中进行思考和提炼,创立了通用组件语言规范(CLS,Common Components Language Specification),对所有组件进行统一抽象,指引无终端依赖、无语言依赖、无框架依赖的标准化组件开发模式。并基于此规范实现了一套 Vue.js 的声明式组件库,以标准化JSON描述页面组成,写完JSON就完成了页面开发,以此来简化前端工作,提高开发效率。

适用场景

B端系统中最常见的需求包含表单、列表、图表。表单用来收集用户数据,列表用来呈现数据,图表用于数据可视化。解决了这三个场景,就解决了大部分的需求。

来看一个常见的需求:需要提供一个搜索框,点击查询按钮后,展示结果列表,列表展示图标、描述等几个字段,需要支持翻页。

像产品经理提需求一样写代码,是什么样的体验?

首先,需要一个包含搜索框和查询按钮的表单,并在查询按钮点击后触发事件。

然后,需要有一个列表支持对数据做回显,个别字段还需要进行格式化的转换,并支持翻页。在格式化时,第一列 icon 展示了图标;第二列 name 原样输出;第三列 size 涉及到数字做了右对齐,且带上了字节单位G;最后一列允许用户进行交互操作。

最后,把查询到的数据设置为列表的值,就完成了开发。

来看看最终的页面效果。

这就是使用 WeComponents 组件库进行页面开发的过程,采用JSON作为载体,以统一的声明式结构,在组件粒度描述页面构成。在组件内对外屏蔽了产品规范、交互规范、设计规范、前端规范,开发时按照组件粒度组织页面,像产品经理一样聚焦业务逻辑本身,代码简洁易理解。

特点

WeComponents 在使用中具有以下的特点。

1. 声明式

WeComponents 是声明式编程的实践,不像命令式编程需要一步步告诉计算机该怎么做,而是描述最终需要的结果是什么样子,执行过程封装在组件内部以及组件机制内。JSON即是声明式编程的一种表述方式。

2. 数据驱动

MVVM的设计模式,使得程序员可以更关注数据本身的改变,弱化对界面展现的掌控。WeComponents 将这种模式实现得更加彻底,将所有组件分析抽象后,建立统一的数据结构,以通用的属性来描述组件构成,以通用方法来操作组件。

组件设计更关注数据结构,以数据描述组件,不受组件表现的影响。在同等结构下,组件的表现可以通过修改组件类型、属性、布局等,达到快速切换。

3. 开发者友好

因 WeComponents 是对所有组件统一抽象下的表述,所以理解了组件模型就理解了整个组件库,不用依赖组件开发者自身素质差异产生不同的组件描述,免去频繁查阅不同组件的说明文档。也易于开发对应的可视化页面制作工具,维护构成页面的JSON。

通用组件语言规范

通用组件语言规范是将所有组件抽象为统一模型的一种标准描述方式,因采用JSON作为描述方式,天然是跨端的,可以按照需求,实现为具体运行环境下、具体语言、具体框架的组件库。

通用组件语言规范对组件的抽象体现为属性和方法。属性是对组件的声明式描述,包含基础信息、实体属性、扩展属性;方法是外部对组件的操作,包含针对不同级别属性的get/set操作。

详细可查阅:

https://tencent.github.io/WeComponents/#/doc/principle/cls

期待贡献

借助通用组件语言规范CLS,微信游戏团队实现了 Vue.js 组件库 WeComponents,并使用此组件库降低了开发门槛,提升了开发效率。对于其他框架,如 React 暂未实现;对于其他优秀的组件库,还没有对接。真诚的期望通用组件语言规范能在不同框架、不同组件库得到支持,利用统一的思路简化组件使用,让开发更简单。

WeComponents 说明文档:https://tencent.github.io/WeComponents/

WeComponents 正式开源

Github 开源地址:

https://github.com/Tencent/WeComponents

(点击文末阅读原文直接访问)

请给 WeComponents 一个 Star !

欢迎提出你的 issue 和 PR!

WeComponents 国内镜像地址:

https://git.code.tencent.com/Tencent_Open_Source/WeComponents

(登录后才能访问公开项目)

腾讯工蜂源码系统为开源开发者提供完整、最新的腾讯开源项目国内镜像

本文分享自微信公众号 - 腾讯开源(tencentopen)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【 开源公告 】 Android 轻应用开发组件 RapidView 正式开源

    RapidView 是一套用于开发 Android 客户端界面、逻辑以及功能的开发组件。布局文件(XML)及逻辑文件 ( Lua )可以运行时执行,主要用以解决...

    腾讯开源
  • 腾讯 Web UI 解决方案 QMUI Web : 探索与沉淀

    QMUI Web 是一个 Web UI 的解决方案,从零开始,由编码规范,到组件和工具方法的制作,再到工作流的整合,不断在迭代,也不断在优化,走过了不少的路。

    腾讯开源
  • 【开源公告】微信小程序解决方案 Westore 开源

    众所周知,小程序本身的工程化十分优秀,不管从组件化、开发、调试、发布、灰度、回滚、上报、统计、监控和最近的云能力都非常完善。据统计,开发小程序使用最多的技术栈是...

    腾讯开源
  • 微信小程序组件化编程和实践(下)

    现在我们已经可以做到了两个组件之间的数据传递,那么如何在多个组件间传递数据呢?

    疯狂的小程序
  • [Vue 牛刀小试]:第十章 - 组件间的数据通信

      在上一章的学习中,我们继续学习了 Vue 中组件的相关知识,了解了在 Vue 中如何使用组件的 data、prop 选项。在之前的学习中有提到过,组件是 V...

    程序员宇说
  • vue2.0组件间通信

    大象无痕
  • 基于 React 的可视化编辑平台实践

    前段时间发在朋友圈的一句话:各种自主搭建的平台,想起好多年各种DIY博客,行业门户网站,本质不变,变的是实现的手段了

    黄泽杰
  • 如何使用Vue.js渲染JSON中定义的动态组件

    json数据content里边有个body数组,每个元素中都有一个component的字段,这个字段决定了使用哪个组件去渲染。

    前端知否
  • 从工程化角度讨论如何快速构建可靠React组件

    前言 React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块。切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有...

    李成熙heyli
  • ​Vue + SpringCloud前后端分离项目3个月项目实战经验分享(下)

    上篇文章总结了三个月的后端开发。本篇主要对3个个月前端开发做个总结。最开始我想着我主要负责好后端的开发。没后端接口开发完成与前台的同事调接口。由于前端严重缺人,...

    不安分的猿人

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动